Mapbox/Leafet Popups - brauche Unterschiede zwischen den Höhen für Popups

Question

Ich erstelle eine Karte, die es dem Benutzer erlaubt, eine Postleitzahl von der linken Seite auszuwählen und dann auf der Karte selbst ausfüllen zu lassen. Sobald der Benutzer des schattierte Postleitzahl klickt, erscheint ein Popup mit Informationen zu diesem zip (siehe unten):

Zur gleichen Zeit, ich bin Fallenlassen Markierungen auf dem umliegenden Konkurrenten. Wenn der Benutzer eine Markierung klickt, erscheint das Fenster mit dem Namen Konkurrenten und Franchise-Auto, das sie verkaufen (siehe unten):

Um sicher zu stellen, dass die Postleitzahl Informationen fit im Popup Bereich (ich hatte einige Probleme, wo das Popup mit dem enthaltenen div nicht erweitern würde), habe ich eine Artklasse das Popup war groß genug, um sicherzustellen:

div.leaflet-popup-content { 
min-height: 400px; 

}

die schlechte Nachricht ist, jetzt, Stil wird auf meinen c angewendet Kontaktstifte und es sieht schrecklich aus.

Gibt es eine Möglichkeit, die CSS innerhalb des Bindpopup-Bereichs der Deklaration festzulegen?

Answer 1

Anstatt alle Popups standardmäßig auf 400px hoch zu setzen, können Sie Ihren Popup-Inhalt in eine div mit einer eigenen CSS-Klasse stellen und dann die Eigenschaften für diese Klasse nach Belieben festlegen. Zum Beispiel, wenn Sie zwei GeoJSON Punkt Schichten (nennen wir sie points1 und points2), und Sie wollen, um die Pop-ups machen für points1 400px hoch:

var tallPoints = L.geoJson(points1, {onEachFeature: onEachTall}).addTo(map); 
var shortPoints = L.geoJson(points2, {onEachFeature: onEachShort}).addTo(map); 

function onEachTall(feature, layer) { 
    layer.bindPopup('<div class="tallPop">Tall Popup is Tall</div>'); 
} 

function onEachShort(feature, layer) { 
    layer.bindPopup('<div class="shortPop">Short Popup is not so Tall</div>'); 
} 

Wo die CSS für die tallPop Klasse:

Hier

.tallPop { 
    min-height: 400px; 
} 

ist ein Beispiel Geige:

http://fiddle.jshell.net/nathansnider/nez8zrnm/