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

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

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

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

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

Demoを表示(左メニュー)

Demoを表示(右メニュー)

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

2.解説

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

2−1.ファイルの配置

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

GitHub-sidebar-v2

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

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

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

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

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

2−3.sidebar-v2の設定(HTML)

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

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

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

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

<div class=”sidebar-tabs”>

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

<div class=”sidebar-content”>

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

2−4.sidebar-v2の設定(Script)

メニューを左寄せ

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

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

メニューを右寄せ

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

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

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

その他のメニュー系のおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(メニュー表示)

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

スポンサーリンク

シェアする

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

フォローする