Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む」「戻る」ボタンで履歴を実行できるようにしたい。何とかならないか調べたところ「Leaflet.NavBar」ライブラリを使用することで実装できる模様。以下にサンプルとソースコードをメモ。

Leaflet.NavBar

GitHub

https://github.com/davidchouse/Leaflet.NavBar

デモページ

http://davidchouse.github.io/Leaflet.NavBar/

サンプル

https://taitan916.info/sample/leaflet.js/plugin/Leaflet.NavBar/

マップ移動やズームを行った後に「→」「←」ボタンで前後のアクションが実行できる筈。

実装方法

プラグインの導入

CDNは用意されていないっぽいのでこちらのページより丸ごとダウンロードしsrcフォルダ内のファイルをサーバにアップロードする。

ソースコード

<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 rel="stylesheet" href="Leaflet.NavBar.css"/>
<script src="Leaflet.NavBar.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);

//プラグインの実行
L.control.navbar().addTo(map);
</script>