leaflet入門|プラグインでメニューを追加する(sidebar-v2)

leafletのプラグイン「sidebar-v2」を使用すると、地図にメニューを追加できます。

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

メニューの位置は、左右変更可能です。

また、メニューに表示する各アイテムは、HTMLで自由に定義することができます。

Demoを表示(左メニュー)

Demoを表示(右メニュー)

全体のコード(左メニュー)

解説

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

Step1:ファイルの配置

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

GitHub-sidebar-v2

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

index.html
css/leaflet-sidebar.min.css”
js/leaflet-sidebar.min.js

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

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

Font Awesome はメニューのアイコンに使用します。

Step3:sidebar-v2の設定(HTML)

メニュー部分は、HTMLで定義します。

「全体のコード」から最低限必要なコードを抜粋しました。

<div id=”sidebar” class=”sidebar collapsed”>

メニュー全体のdiv要素。このタグ内にメニューとして表示するHTMLを定義します。

<div class=”sidebar-tabs”>

各メニューを定義します。ここではメニューごとにアイコンを設定します。

<div class=”sidebar-content”>

メニュークリック時の詳細なコンテンツを定義します。

Step4:sidebar-v2の設定(Script)

メニューを左寄せ

デフォルトのズームコントローラーが左上に表示されるため、そのままメニューを表示するとズームコントローラーと被ってしまいます。

そのため、ズームコントローラーの位置をを右上に変更します。

メニューを右寄せ

右寄せの場合、メニューをマップに追加するだけです。

これで、メニューを表示することができます。

スポンサーリンク

シェアする

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

フォローする