【Leaflet】カスタム画像を使った地図の座標を取得する

Leafletで作ったカスタム画像を使った地図上のマウスカーソルの座標を取得したい！

概要

今回の記事では、Leafletで作ったカスタム画像を使った地図上のマウスカーソルの座標を取得する手順を掲載する。

仕様書

環境

Leaflet 1.7.1

手順書

今回は、Leafletで作ったカスタム画像を使った地図上にマウスカーソルの位置の座標を取得して、その座標を文字列で表示するUIを追加する。

コードは下記のようになる。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Leaflet Test</title>
        <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>
            function init() {
                var lat2xy = function (x, y) {
                    return map.project([x, y], 4);
                };

                var image = {
                    url: "https://blog.nekonium.com/wp-content/uploads/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);

                map.on("mousemove", onMapMousemove);

                var menuLeft = L.control({ position: "topleft" });
                menuLeft.onAdd = function (map) {
                    this.ele = L.DomUtil.create("div");
                    this.ele.id = "id_xy";
                    this.ele.onmousemove = function (e) {
                        e.stopPropagation();
                    };
                    return this.ele;
                };
                menuLeft.addTo(map);

                function onMapMousemove(e) {
                    var box = document.getElementById("id_xy");
                    var xy = lat2xy(e.latlng.lat, e.latlng.lng);
                    var html = "X:" + xy.x + "<br>" + "Y:" + xy.y;
                    box.innerHTML = html;
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div id="leaflet-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
    </body>
</html>

解説

緯度経度をピクセル座標に変換する関数。

                var lat2xy = function (x, y) {
                    return map.project([x, y], 4);
                };

地図にマウス移動のイベントを追加する。イベント発生時に実行されるonMapMousemove関数は後述する。

                map.on("mousemove", onMapMousemove);

座標を表示するUIを左上に追加する。

                var menuLeft = L.control({ position: "topleft" });
                menuLeft.onAdd = function (map) {
                    this.ele = L.DomUtil.create("div");
                    this.ele.id = "id_xy";
                    this.ele.onmousemove = function (e) {
                        e.stopPropagation();
                    };
                    return this.ele;
                };
                menuLeft.addTo(map);

イベント発生時に実行される関数。

                function onMapMousemove(e) {
                    var box = document.getElementById("id_xy");
                    var xy = lat2xy(e.latlng.lat, e.latlng.lng);
                    var html = "X:" + xy.x + "<br>" + "Y:" + xy.y;
                    box.innerHTML = html;
                }

デモ

CODEPENで動かしてみると下記のような感じ。

See the Pen
Leaflet Show XY Test by 108nen (@108nen)
on CodePen.

まとめ（感想文）

他にも様々なイベントがあるという。

引用・参考文献

下記のページを参考にさせていただきました。ありがとうございました。

Leafletの使い方|オープンソースWeb地図ライブラリ|谷謙二研究室