Leaflet入門|プラグインでスライドメニューを表示する(SlideMenu)

Leafletのプラグイン「SlideMenu」を使用して、地図にメニューを表示します。

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

 このボタンをクリックすると、スライドメニューが表示されます。

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-Leaflet.SlideMenu

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

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

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

2-1で配置した jsファイルを読み込みます。
また、今回はツールバーのアイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

2−3.SlideMenuの設定(HTML)

スライドメニューの内容は、HTMLで記述します。
今回は、ヘッダ部分と、コンテンツ部分に分けたメニューを作成しました。
HTMLで記述できるので、リンクやボタンを配置することもできます。

2−4.SlideMenuの設定(CSS)

Step3のHTMLにスタイルを設定します。

2−5.SlideMenuの設定(Mapに追加)

L.control.slideMenuオブジェクトをL.mapオブジェクトに追加します。

オプション
width:スライドメニューの幅を設定します。
height:スライドメニューの高さを設定します。
※ この他にも多数のオプションがあるので、詳細はGitHubを参照してください。

これで、スライドメニューを地図に表示できました。

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

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

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

スポンサーリンク

シェアする

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

フォローする