【Leaflet】地図にカスタム画像を使ったピンを表示する
2022-7-27 | JavaScript, Leaflet
Leafletで作ったカスタム画像を使った地図にカスタム画像を使ったピンを表示したい！
概要
今回の記事では、Leafletで作ったカスタム画像を使った地図にカスタム画像を使ったピンを表示する手順を掲載する。
仕様書
環境
- Leaflet 1.7.1
手順書
今回は、過去の記事で作った任意の画像ファイルを使ったオリジナルの地図の上に任意の画像ファイルを使ったオリジナルのピン（アイコン）を表示してみる。
ピンに使う画像はAffinity Designerで1分で作った下記の画像を使う。
コードは下記のようになる。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Custom Image Map Test</title>
<link rel="stylesheet" href="/libs/leaflet/leaflet.css" />
<script src="/libs/leaflet/leaflet.js"></script>
<script>
function init() {
var xy2lat = function (x, y) {
return map.unproject([x, y], 4);
};
var image = {
url: '/img/catacombs_of_the_cursed_witch.png',
width: 2030,
height: 2730
};
var 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 custom_pin = L.icon({
iconUrl: '/img/custom-pin.png',
iconSize: [32, 32],
iconAnchor: [16, 31],
popupAnchor: [0, -31],
});
L.marker(xy2lat(827, 515), { icon: custom_pin }).addTo(map).bindPopup('Water Room');
}
</script>
</head>
<body onload="init()">
<div id="leaflet-container" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>過去の記事から追加した部分について説明する。
xy2lat関数は、画像の左上を始点としたピクセル座標を経度・緯度の座標に変換して返す。ピンを表示する座標を設定する際に使う。
var xy2lat = function (x, y) {
return map.unproject([x, y], 4);
};アイコンを作ってる部分。
iconAnchorは、地図に表示する始点（ピンの先の部分）を設定する。
popupAnchorは、ピンをクリックした際に表示するポップアップ（フキダシ）の始点を設定する。iconAnchorで設定した場所を始点とした位置になるので注意。
var custom_pin = L.icon({
iconUrl: '/img/custom-pin.png',
iconSize: [32, 32],
iconAnchor: [16, 31],
popupAnchor: [0, -31],
});xy2lat(827, 515)でピンを表示する地図の座標を設定する。
bindPopup('Water Room')で、ピンを左クリックした際に表示するテキストの内容を設定する。
L.marker(xy2lat(827, 515), { icon: custom_pin }).addTo(map).bindPopup('Water Room');CODEPENで動かしてみると下記のような感じ。
See the Pen
Leaflet Custom Image Map Test by 108nen (@108nen)
on CodePen.
まとめ（感想文）
ピンがあるとちゃんとした地図アプリっぽく見えるね！
引用・参考文献
下記のサイトを参考にさせていただきました。ありがとうございました。
