Mapbox/Leafet Popups - ポップアップの差の最小値が必要

Question

私は、ユーザーが左側から郵便番号を選択してマップ自体に記入できるようにマップを作成しています。ユーザーは日陰の郵便番号をクリックすると、ポップアップがそのジップに関する情報が表示されます（下記参照）：同時に

、私は周囲の競合他社にマーカーを落としています。ユーザーがマーカーをクリックすると、ポップアップが競合他社の名前が表示されます、とフランチャイズ車彼らが販売する（下記参照）：

ZIPコード情報がポップアップに収まることを確認するためには、面積（私はポップアップが含まれているdiv要素を拡大しないといくつかの問題があった）、私はポップアップを確保するために、スタイルクラスを作成した十分な大きさだった：

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

}

悪いニュースは、今では、ありますスタイルは私のcに適用されていますompetitorのピンとそれはひどい見える。

宣言のbindpopup領域内からCSSを設定する方法はありますか？

Answer 1

すべてのポップアップをデフォルトで400pxにするのではなく、ポップアップコンテンツをdivの中に独自のcssクラスで入れてから、好きなようにそのクラスのプロパティを設定することができます。たとえば、次の2つのにGeoJSONポイント層を持っている場合（のはpoints1とpoints2それらを呼びましょう）、あなたは背の高いpoints1 400ピクセルのためのポップアップを作りたい：tallPopクラスのCSSである場合

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>'); 
} 

：

ここで

.tallPop { 
    min-height: 400px; 
} 

は、例えば、フィドルです：

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