Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法
Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ「sidebar-v2」プラグインを導入することで簡単に実装できる模様。以下にサンプル及びソースコードをメモ。
GitHub
https://github.com/turbo87/sidebar-v2/
デモページ
https://turbo87.github.io/sidebar-v2/examples/
CDN
CDNで使う場合は以下を記述する。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/sidebar-v2@0.4.0/css/leaflet-sidebar.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/sidebar-v2@0.4.0/js/leaflet-sidebar.min.js"></script>
font-awesomeについてはアイコンを使用するため呼び出す必要あり。
尚、異なるバージョンを使用したい場合は以下から探す。
https://www.jsdelivr.com/package/npm/sidebar-v2
サンプル
https://taitan916.info/sample/leaflet.js/plugin/sidebar-v2/
実装方法
ソースコード
<div id="sidebar" class="sidebar collapsed"> <div class="sidebar-tabs"> <ul role="tablist"> <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li> <li><a href="https://taitan916.info/blog/" role="tab" target="_blank"><i class="fa fa-home"></i></a></li> </ul> <ul role="tablist"> <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li> </ul> </div> <div class="sidebar-content"> <div class="sidebar-pane" id="home"> <h1 class="sidebar-header"> サイドバー <span class="sidebar-close"><i class="fa fa-caret-left"></i></span> </h1> <p> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> </p> </div> <div class="sidebar-pane" id="settings"> <h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1> </div> </div> </div> <div id="map" class="sidebar-map"></div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/sidebar-v2@0.4.0/css/leaflet-sidebar.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/sidebar-v2@0.4.0/js/leaflet-sidebar.min.js"></script> <script> let map; map = L.map('map'); //中心の経度緯度 const center = ['35.681236', '139.767125']; //ズームレベル const zoom = 12; //マップの中心地とズームレベルを指定 map.setView(center, zoom); const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 19 }); tileLayer.addTo(map); //サイドバー表示 const sidebar = L.control.sidebar('sidebar').addTo(map); </script>
アイコンについて
アイコンについてはこちらのページから探す(v4の場合)。
関連記事
-
Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法
Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時 ...
-
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...
-
Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
leaflet.jsとOSMでマップ表示及びマーカー設置方法
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法
leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...