【Leaflet】複数のカスタム画像を使った地図で画像を切り替える

Leafletで作った複数のカスタム画像を使った地図で画像（レイヤー）を切り替えたい！

概要

今回の記事では、Leafletで作った複数のカスタム画像を使った地図で画像（レイヤー）を切り替える手順を掲載する。

建物のフロアガイド的な感じ。

仕様書

環境

Leaflet 1.7.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 image1 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-1f.png',
                width: 352,
                height: 287
            };
            var image2 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-2f.png',
                width: 352,
                height: 287
            };

            var map = L.map('leaflet-container', {
                crs: L.CRS.Simple,
                minZoom: -1,
                maxZoom: 5
            });

            var imageBounds = L.latLngBounds([
                map.unproject([0, image1.height], 4),
                map.unproject([image1.width, 0], 4)
            ]);

            map.fitBounds(imageBounds);
            map.setMaxBounds(imageBounds.pad(0.5));

            L.control.layers({
                "1F": L.imageOverlay(image1.url, imageBounds).addTo(map),
                "2F": L.imageOverlay(image2.url, imageBounds)
            }).addTo(map);
        }
    </script>
</head>
<body onload="init()">
    <div id="leaflet-container" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>

解説

レイヤー毎の画像の設定してる部分。

            var image1 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-1f.png',
                width: 352,
                height: 287
            };
            var image2 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-2f.png',
                width: 352,
                height: 287
            };

レイヤーを登録してる部分。

            L.control.layers({
                "1F": L.imageOverlay(image1.url, imageBounds).addTo(map),
                "2F": L.imageOverlay(image2.url, imageBounds)
            }).addTo(map);

連想配列のキーの文字列（"1F"と"2F"の部分）が、レイヤーの名前になる。コントロールでレイヤを選択する際に表示される。

"1F": L.imageOverlay(image1.url, imageBounds).addTo(map)の.addTo(map)でページの読み込み時に最初に表示するレイヤーを設定する。この場合は、1Fが表示される。

デモ

CODEPENで動かしてみると下記のような感じ。
右上のアイコンを左クリックして表示したいレイヤーのチェックを入れると、その画像に切り替わる。

See the Pen
Untitled by 108nen (@108nen)
on CodePen.

まとめ（感想文）

この画像の元ネタは、ファミコン版のドラゴンクエストIIIの受信後（勇者）の実家っぽい見取り図です。