【Leaflet】カスタム画像を使ってオリジナルの地図を表示する

Leafletでカスタム画像を使ってオリジナルの地図を表示したい！

概要

今回の記事では、Leafletでカスタム画像を使ってオリジナルの地図を表示する手順を掲載する。

「Leaflet」は、WEB上の地図サービス（Google Map的な）でよく使われてるライブラリで、国土交通省国土地理院で公開されてるタイル画像を使うことも可能。（利用のルールについてはリンク先のサイトを確認するべし）

仕様書

環境

Leaflet 1.7.1

手順書

今回は、任意の画像ファイルを使ったオリジナルの地図を表示してみる。

画像は、こちらの記事で紹介させて頂いた
「One Page Dungeon Generator」で生成した下記の画像を使う。

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

<!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 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);
        }
    </script>
</head>
<body onload="init()">
    <div id="leaflet-container" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>

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

See the Pen
Leaflet Custom Image Map With Custom Image Pin Test by 108nen (@108nen)
on CodePen.

まとめ（感想文）

オリジナルの地図を作って、WEBに載せたい時に便利かもね！

引用・参考文献

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