leaflet入門|プラグインで地図にメッセージボックスを表示する(Messagebox)

leafletのプラグイン「Messagebox」を使用すると、地図にメッセージボックスを表示することができます。
メッセージボックスは、指定した時間が経過すると非表示になります。

実装すると以下のようになります。
右下に表示されているのがメッセージボックスです。

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-Messagebox

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

index.html
css/leaflet-messagebox.css
js/leaflet-messagebox.js

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

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

Step3:Mapの設定

L.mapオブジェクト作成時に、オプションで「messagebox: true」にします。

Step4:Messageboxの設定

表示内容や、表示位置などの設定を行います。

map.messagebox.setPosition(‘bottomright’);

表示位置を指定します。
位置は、’topleft’, ‘topright’, ‘bottomleft’, ‘bottomright’ から選択できます。
デフォルトは、’topright’ が設定されています。

map.messagebox.options.timeout = 10000;

メッセージボックスの表示時間をミリ秒で設定します。
デフォルトは、3000 ミリ秒で設定されています。

map.messagebox.show(message);

表示するメッセージを引数で設定します。
メッセージは、HTMLで書くことができるため、<a>タグを使ってリンク表示することもできます。

Step5:Messageboxのカスタマイズ

表示するメッセージボックは、cssを上書きしてカスタマイズすることができます。
例えば、メッセージボックスの枠を青に変更する場合は、以下のようにします。

これで、メッセージボックスを表示することができます。

スポンサーリンク

シェアする

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

フォローする