【Leaflet】指定のマーカー（ピン）にズームする
2023-6-15 | JavaScript, Leaflet
Leafletで指定のマーカー（ピン）にズームしたい！
概要
今回の記事では、Leafletで指定のマーカー（ピン）にズームする手順を掲載する。
仕様書
環境
- Leaflet 1.7.1
手順書
右上にランドマークの一覧を表示して、クリックするとそのランドマークのマーカー（ピン）にズームインするサンプル。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Leaflet Test</title>
<style>
.menu-right {
border: solid 1px;
background-color: #ffffff;
border-radius: 4px;
padding: 8px;
color: #000000;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var markers = [];
var map;
function init()
{
var xy2lat = function (x, y) {
return map.unproject([x, y], 4);
};
var image = {
url: "https://blog.nekonium.com/wp-content/uploads/catacombs_of_the_cursed_witch.png",
width: 2030,
height: 2730,
};
map = L.map("leaflet-container", {
crs: L.CRS.Simple,
minZoom: -1,
maxZoom: 5,
});
var imageBounds = L.latLngBounds([map.unproject([0, image.height], 4), map.unproject([image.width, 0], 4)]);
map.fitBounds(imageBounds);
map.setMaxBounds(imageBounds.pad(0.5));
L.imageOverlay(image.url, imageBounds).addTo(map);
var menuRight = L.control({ position: "topright" });
menuRight.onAdd = function (map) {
this.ele = L.DomUtil.create("div", "menu-right");
this.ele.id = "id_menu_right";
return this.ele;
};
menuRight.addTo(map);
document.getElementById("id_menu_right").innerHTML = "<div>flyTo:</div>"
+ "<button onclick='map.flyTo(markers[0].getLatLng(), 4);'>Water room</button><br />"
+ "<button onclick='map.flyTo(markers[1].getLatLng(), 4);'>Boss room</button><br />"
+ "<button onclick='map.flyTo(markers[2].getLatLng(), 4);'>Great hall</button><br />"
+ "<button onclick='map.flyTo(markers[3].getLatLng(), 4);'>Altar</button><br /><br />"
+ "<div>setView:</div>"
+ "<button onclick='map.setView(markers[0].getLatLng(), 4);'>Water room</button><br />"
+ "<button onclick='map.setView(markers[1].getLatLng(), 4);'>Boss room</button><br />"
+ "<button onclick='map.setView(markers[2].getLatLng(), 4);'>Great hall</button><br />"
+ "<button onclick='map.setView(markers[3].getLatLng(), 4);'>Altar</button><br />";
var custom_pin = L.icon({
iconUrl: 'https://blog.nekonium.com/wp-content/uploads/custom-pin.png',
iconSize: [32, 32],
iconAnchor: [16, 31],
popupAnchor: [0, -31],
});
markers.push(L.marker(xy2lat(827, 515), { icon: custom_pin }).addTo(map).bindPopup('Water room'));
markers.push(L.marker(xy2lat(1716, 2508), { icon: custom_pin }).addTo(map).bindPopup('Boss room'));
markers.push(L.marker(xy2lat(1236, 1196), { icon: custom_pin }).addTo(map).bindPopup('Great hall'));
markers.push(L.marker(xy2lat(812, 2008), { icon: custom_pin }).addTo(map).bindPopup('Altar'));
}
}
</script>
</head>
<body onload="init()">
<div id="leaflet-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
</body>
</html>解説
右上のランドマークの名前が表示されてるボタンをクリックするとそのランドマークのマーカー（ピン）にズームする。
マーカー（ピン）にズームする関数はflyToとsetViewの2パターンがあり、flyToはぬるりとスムーズに、setViewもスムーズだがflyToよりも早い時間でズームする。
map.flyTo(markers[0].getLatLng(), 4);flyTo関数（setViewも同様）の第1引数に座標を渡す。やり方はいろいろあるが、今回はマーカー（ピン）のインスタンスから座標を取得して渡してる。第2引数はズームの近さで数値が大きいほどズームする。
デモ
CODEPENで動かしてみると下記のような感じ。
See the Pen
Leaflet Set View Test by 108nen (@108nen)
on CodePen.
まとめ（感想文）
インフォメーション的に使えるかもね！
