Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl＋スクロール」、スマホだと「2本指でピンチアウト」という風にジェスチャーハンドリングがついており、この機能をLeafletのマップにも実装したい。「Leaflet.GestureHandling」というプラグインで実装できる模様。以下に対応方法をメモ。

Leaflet.GestureHandling

GitHub

https://github.com/elmarquis/Leaflet.GestureHandling/

デモページ

https://elmarquis.github.io/Leaflet.GestureHandling/examples/

CDN

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

<link rel="stylesheet" href="https://unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css" type="text/css">
<script src="https://unpkg.com/leaflet-gesture-handling"></script>

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-gesture-handling/

ソースコード

<div class="contents">サイトコンテンツ</div>

<div id="map"></div>

<div class="contents">サイトコンテンツ</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="https://unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css" type="text/css">
<script src="https://unpkg.com/leaflet-gesture-handling"></script>

<script>
let map;
map = L.map('map', {
    gestureHandling: true, //ジェスチャーハンドリングを有効化
});

//中心の経度緯度
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);

</script>

オプションで「gestureHandling:true」を指定すると有効になる。