Leaflet入門|プラグインでポップアップをレスポンシブ化する(leaflet-responsive-popup)

Leafletのプラグイン「leaflet-responsive-popup」使用して、ポップアップメッセージをレスポンシブ対応にします。

実装すると以下のようになります。

【通常】

【左端のマーカー】

【上部のマーカー】

Demoはこちらです。

1.全体のコード

2.解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

2−1.プラグインの読み込み

leaflet-responsive-popup の css・js は GitHubからダウンロードできます。

GitHub-leaflet-responsive-popup

2−2.ポップアップを作成&マーカーにバインド

L.responsivePopup インスタンスを作成して、マーカーにバインドします。

以上で、レスポンシブポップアップメッセージが完成です。

3.まとめ

L.responsivePopupを使用するとポップアップメッセージを簡単に、レスポンシブ対応することができました。

他のプラグインと併用しても便利かと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする