Leaflet入門|プラグインでメッセージウィンドウを表示する(control-window)

Leafletのプラグイン「control-window」を使って、地図上にメッセージウィンドウを表示します。

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

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

leaflet-control-window の本体は GitHubからダウンロードできます。

GitHub-leaflet-control-window

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

index.html
css/L.Control.Window.css
js/L.Control.Window.js

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

2-1で配置した css・jsファイルを読み込みます。

2−3.leaflet-control-windowの設定

L.control.windowオブジェクトを使用します。
L.control.windowオブジェクトを生成する際に、第二引数にオプションを指定することで、タイトルや内容を変更できます。

オプション
title:ウィンドウのタイトルを指定。(HTML使用可)
content:ウィンドウのコンテンツを指定。(HTML使用可)
modal:ウィンドウのモーダル表示。true / false (デフォルト:false)
position:ウィンドウの表示位置を指定。
※その他のオプションは、GitHubを参照してください。

これで、メッセージウィンドウを地図に表示できました。

3.その他のおすすめプラグイン

その他のメッセージ・ダイアログ表示のおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(メッセージ・ダイアログの表示)

すべてのおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン 

スポンサーリンク

シェアする

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

フォローする