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

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

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

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-Messagebox

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

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

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

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

2−3.Mapの設定

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

2−4.Messageboxの設定

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

map.messagebox.setPosition(‘bottomright’);

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

map.messagebox.options.timeout = 10000;

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

map.messagebox.show(message);

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

2−5.Messageboxのカスタマイズ

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

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

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

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

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

スポンサーリンク

シェアする

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

フォローする