リーフレットのポップアップのルックアンドフィールをカスタマイズするにはどうすればよいですか？

Question

リーフレットを使用して作成したマップをカスタマイズすることを検討しており、ポップアップ（L.popup）をカスタマイズしたいと考えています。

私が考えることができる唯一の方法は、新しいダイアログを使ってカスタムポップアップレイヤーを作成し、ユーザーがマーカーとやりとりするたびにこの位置を変更することです。この方法で、ユーザーがマップをドラッグしたときにポップアップが維持されます。

これを行う方法や既存の方法を知っている人はいますか？

おかげ

Answer 1

あなたは外観をカスタマイズし、CSSを使用して感じるべき。あなたは要素を点検し、右ページ上の任意の場所をクリックするのFirefoxやChrome/Safariの（内開発ツールでビルドのFirebugのようなツールを使用し、クリックすることができ、お使いのブラウザによって

.leaflet-popup-content-wrapper { 
} 

.leaflet-popup-content-wrapper .leaflet-popup-content { 
} 

.leaflet-popup-tip-container { 
} 

、または次のセレクタは、おそらく興味深いものですshortcuts）を使用して、ポップアップを調べ、修正する可能性のある追加のcssセレクターを見つけます。

機能を拡張するには、まずpopup source codeを調べる必要があります。あなたが何が起こっているのかについての感情を得るまで、他のリーフレットのコンポーネントのソースを見てください。 leaflet.jsを使用していますmapboxの例以上あり

L.CustomPopup = L.Popup.extend({ 
    // You changes here 
}); 

Answer 2

：あなたが望むものは何でも変更し、次のようにポップアップクラスを拡張し、そして。 この例では、custom tooltip in leafletの使用方法を示しています。

<style> 
/* 
* These CSS rules affect the tooltips within maps with the custom-popup 
* class. See the full CSS for all customizable options: 
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366 
*/ 
.custom-popup .leaflet-popup-content-wrapper { 
    background:#2c3e50; 
    color:#fff; 
    font-size:16px; 
    line-height:24px; 
    } 
.custom-popup .leaflet-popup-content-wrapper a { 
    color:rgba(255,255,255,0.5); 
    } 
.custom-popup .leaflet-popup-tip-container { 
    width:30px; 
    height:15px; 
    } 
.custom-popup .leaflet-popup-tip { 
    border-left:15px solid transparent; 
    border-right:15px solid transparent; 
    border-top:15px solid #2c3e50; 
    } 
</style> 

<div class='custom-popup' id='map'></div> 

Answer 3

ポップアップをカスタマイズする別の方法は次のようにポップアップ表示するためのカスタムCSSクラスを作成することである：

<style> 
/* css to customize Leaflet default styles */ 
.popupCustom .leaflet-popup-tip, 
.popupCustom .leaflet-popup-content-wrapper { 
    background: #e0e0e0; 
    color: #234c5e; 
} 
</style> 

、その後、あなたの中にあなたがbindPopup方法でマーカーカスタムポップアップを設定して渡すことができdivをマッピングあなたが言及customOptionsオブジェクトはcss class name：

// create popup contents 
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>"; 

// specify popup options 
var customOptions = 
    { 
    'maxWidth': '400', 
    'width': '200', 
    'className' : 'popupCustom' 
    } 


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map); 

// bind the custom popup 
marker.bindPopup(customPopup,customOptions); 

はそれを願っています助けてください。