Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法

Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時や再表示時にマップ状況を復元して表示したい。何とかならないか調べたところ「Leaflet.RestoreView」というプラグインで実現できる模様。以下にサンプルと実装方法をメモ。

Leaflet.RestoreView

GitHub

https://github.com/makinacorpus/Leaflet.RestoreView

デモページ

https://makinacorpus.github.io/Leaflet.RestoreView/docs/example.html

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/@bagage/leaflet.restoreview@1.0.1/leaflet.restoreview.min.js"></script>

サンプル

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

マップ移動やズームした後、ページリロードしても操作後のマップが表示される筈。

ソースコード

<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>

<script src="https://cdn.jsdelivr.net/npm/@bagage/leaflet.restoreview@1.0.1/leaflet.restoreview.min.js"></script>

<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//データが保存されていない場合
if( !map.restoreView() ) {
    //マップの中心地とズームレベルを指定
    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);
</script>

注意点

localStorageに保存されるため、削除された場合は復元できない点に注意。