勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

ゲーム攻略サイト等でゲーム内の地図を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/

 - JavaScript

  関連記事

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...

Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法

Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあ ...