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

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

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

【通常】

【左端のマーカー】

【上部のマーカー】

Demoはこちらです。

全体のコード

解説

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

Step1:プラグインの読み込み

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

GitHub-leaflet-responsive-popup

Step2:ポップアップを作成&マーカーにバインド

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

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

まとめ

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

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

スポンサーリンク

シェアする

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

フォローする