【Leaflet】マーカー(ピン)を後から移動する
2023-6-21 | JavaScript, Leaflet
Leafletでマーカー(ピン)を後から移動したい!
概要
今回の記事では、Leafletでマーカー(ピン)を後から移動する手順を掲載する。
仕様書
環境
- Leaflet 1.7.1
手順書
右上の「Change Position」ボタンをクリックするとマーカー(ピン)が別のランドマークに移動するサンプル。
<!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 marker;
var map;
var x = [827, 1716, 1236, 812];
var y = [515, 2508, 1196, 2008];
var cnt = 0;
var xy2lat = function (x, y) {
return map.unproject([x, y], 4);
};
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 = "<button onclick='changeMaker();'>Change Position</button>";
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],
});
marker = L.marker(xy2lat(x[cnt], y[cnt]), { icon: custom_pin }).addTo(map);
}
}
function changeMaker()
{
cnt += 1;
if (cnt >= x.length)
{
cnt = 0;
}
marker.setLatLng(xy2lat(x[cnt], y[cnt]));
}
</script>
</head>
<body onload="init()">
<div id="leaflet-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
</body>
</html>
解説
マーカーのインスタンスを変数に保存しておいて、後からsetLatLng
関数に座標を渡す。この地図はカスタムイメージを使ってるのでピクセル座標に変換して関数に渡してる。
marker.setLatLng(xy2lat(x[cnt], y[cnt]));
デモ
CODEPENで動かしてみると下記のような感じ。
See the Pen
Leaflet Change LatLng Test by 108nen (@108nen)
on CodePen.
まとめ(感想文)
インフォメーションを遷移するのに使えるかもね!