【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);

                var menuLeft = L.control({ position: "topleft" });
                menuLeft.onAdd = function (map) {
                    this.ele = L.DomUtil.create("div");
                    this.ele.id = "id_z";
                    this.ele.innerHTML = "Z:" + map.getZoom();
                    return this.ele;
                };
                menuLeft.addTo(map);

                map.on('zoomend', function () {
                    var box = document.getElementById("id_z");
                    box.innerHTML = "Z:" + map.getZoom();
                });
            }
        </script>
    </head>
    <body onload="init()">
        <div id="leaflet-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
    </body>
</html>

解説

地図にズーム処理の終了のイベントを追加する。

                map.on('zoomend', function () {
                    var box = document.getElementById("id_z");
                    box.innerHTML = "Z:" + map.getZoom();
                });

map.getZoom()関数で現在のズームレベルを取得してUIに表示する。

余談なんだけども、getMaxZoom()関数でズームレベルの最大値、getMinZoom()関数でズームレベルの最小値を取得できる。

デモ

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

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

まとめ（感想文）

ズームレベルを確認しながらオーバーレイで表示するものを調整する時に使えるかもね！