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

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

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

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-leaflet-control-window

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

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

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

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

Step3:leaflet-control-windowの設定

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

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

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

スポンサーリンク

シェアする

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

フォローする