Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法

Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ「sidebar-v2」プラグインを導入することで簡単に実装できる模様。以下にサンプル及びソースコードをメモ。

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の場合)。