leaflet入門|プラグインでダイアログを表示する(Leaflet.Dialog)

leafletのプラグイン「Leaflet.Dialog」を使って、地図上にダイアログメッセージを表示します。

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

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

Leaflet.Dialog の本体は GitHubからダウンロードできます。

GitHub-Leaflet.Dialog

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/Leaflet.Dialog.css
js/Leaflet.Dialog.js

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

Step1で配置した css・jsファイルを読み込みます。
また、アイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

Step3:Dialogの設定(オプション)

ダイアログオブジェクトを作成する際に、オプションを指定することができます。
今回は、以下のようにオプションを設定します。

オプション
size:ダイアログのサイズ。
minSize:ダイアログの最小サイズ。
maxSize:ダイアログの最大サイズ。
anchor:ダイアログの表示開始位置。
initOpen:初期状態でダイアログを表示(true)非表示(false)。

Step4:Dialogの設定(コンテンツ)

コンテンツは、htmlで作成します。
そのため、テキスト以外にリンク・ボタンなども表示することができます。

Step5:Dialogの設定(L.control.dialogオブジェクトの追加)

L.control.dialogオブジェクト作成時に、オプションと表示内容を指定します。

Step6:Dialogの設定(イベントの登録)

L.control.dialogでは、様々なイベントを登録することができます。
Demoでは、’dialog:closed’ イベントを登録しているため、右上のバツボタンをクリックするとダイアログが閉じられる際に、アラートメッセージが表示されます。

今回使用したオプション以外にも様々なオプションがあります。
詳細は、GitHub-Leaflet.Dialog をご参照ください。

スポンサーリンク

シェアする

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

フォローする