Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるため他者にURLを共有しやすいが、これをLeafletで実装したい。何とかならないか調べたところ「leaflet-view-meta」というプラグインで実装できた。以下にサンプルと実装方法をメモ。

leaflet-view-meta

GitHub

https://github.com/rwev/leaflet-view-meta

デモページ

https://rwev.github.io/leaflet-view-meta/

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-view-meta/

マップを移動するとURLに「?lat=37.71&lng=140.784&nb=39.356&sb=36.027&eb=144.02&wb=137.549」のようなGETパラメータが自動で付与される筈。

実装方法

プラグインの導入

CDNは用意されていないっぽいのでこちらのページより「leaflet-view-meta.css」「leaflet-view-meta.js」をダウンロードし、サーバにアップロードする。

ソースコード

<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-view-meta.css"/>
<script src="leaflet-view-meta.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.viewMeta({}).addTo(map);
</script>

右上の座標情報を非表示にしたい場合

以下CSSを追記する。

.leaflet-view-meta{
    display: none;
}