架空の地図画像をLeafletを用いてWeb上でマップ表示する方法

ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホイールで拡大縮小したりとGoogleマップのように取り扱えるページを見かけた。どうやっているのかとソースコードを拝見するとLeafletで対応しているみたい。同じようなことを試してみたいので以下に実装方法をメモ。

サンプルページ

https://taitan916.info/sample/leaflet.js/fictitious_map/

上記サンプルページにて以下が確認できる筈。

• マーカーの設置
• マウスホールによる拡大縮小
• ドラッグ操作による移動

地図画像の用意

Inkarnate

ファンタジー系のマップを無料で生成できるInkarnateという以下サイトで地図画像を用意した。

https://inkarnate.com/

地図画像

以下が今回使用する地図画像になる。

Leaflet

公式サイト

https://leafletjs.com/

CDN

CDNで使う場合は以下を記述する。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/leaflet

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script>
//地図画像設定
const image = {
    url: './map.jpg',
    width: 1024,
    height: 768
};

const imageBounds = L.latLngBounds(
    [0, 0],
    [image.height/16, image.width/16]
);

//マップの生成
const map = L.map('map', {
    crs: L.CRS.Simple,
    maxBounds: imageBounds.pad(0.5)
});
map.fitBounds(imageBounds);

L.imageOverlay(image.url, imageBounds).addTo(map);

//マーカー生成
const mapData = [
    { 'lat' : '25.4375', 'lng' : '31.375', 'body' : '宝箱',}, 
    { 'lat' : '32.25', 'lng' : '8.3125', 'body' : '木',}, 
];
for( key in mapData ){
    makeMarker(mapData[key]);
}

function makeMarker( mapData ){
    L.marker([mapData.lat, mapData.lng])
    .bindPopup(mapData.body)
    .addTo(map);
}
</script>

解説等

地図画像設定のurlの部分で地図画像を指定する。

座標(経度緯度)を取得したい場合

現実の地図だとジオコーディングで経度緯度を取得できるが、今回のような架空の地図だとそのような方法は取られず、マーカー設置時の座標指定に困る筈。

以下ソースコードを追記することでマップ内をクリックすると、座標がアラート表示できる。

map.on('click', function(e) {
    lat = e.latlng.lat;
    lng = e.latlng.lng;
    alert(`lat:${lat}, lng:${lng}`);
});

参考サイト

https://lendl.sakura.ne.jp/journals/leaflet-image-overlay/