勉強したことのメモ

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

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

   2024/03/23  JavaScript

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し、それぞれマーカー別で画像を指定し表示させたい。また、マーカークリック時はフキダシが表示され、フキダシ内にはHTMLタグ含むテキストを表示させたい。以下に方法をメモ。

 

サンプル

https://taitan916.info/sample/osm/marker.php

 

CDNに注意(2024/01/12追記)

「http://cdn.leafletjs.com」のCDNがHTTP経由だと正常に取得できるがHTTPS経由だと取得できないため以下CDNを使う方がいいかも。

https://cdnjs.com/libraries/leaflet

具体的には以下のような形。

<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>

 

ソース

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
//マップを表示するID名を指定
var map;
map = L.map('map_canvas');

//経度緯度
var lat = '35.681236';
var lng = '139.767125';

//ズームレベル
var zoom = 10;

//マップの中心地とズームレベルを指定
map.setView([lat, lng], zoom);

//タイルレイヤの設定。今回だとOSMだが地理院やMapFanといった他のデザインに変更できる模様
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    maxZoom: 19
});
tileLayer.addTo(map);


var mapData = [
    { 'lat' : lat, 'lng' : lng, 'body' : '<b style="color:#f00;">マーカー</b>', 'icon' : 'marker01.png'}, 
    { 'lat' : (parseFloat(lat) + 0.05), 'lng' : (parseFloat(lng) + 0.05), 'body' : '<b style="color:#f00;">マーカー2</b>', 'icon' : 'marker02.png'}, 
    { 'lat' : (parseFloat(lat) + 0.1), 'lng' : (parseFloat(lng) + 0.1), 'body' : '<b style="color:#f00;">マーカー3</b>', 'icon' : 'marker03.png'}, 
];
for (var key in mapData){
    var marker_data = makeMarker(mapData[key]);
}

//マーカー作成用関数
function makeMarker( mapData ){

    //マーカー設定
    var icon = L.icon({
        iconUrl: mapData.icon,
        iconRetinaUrl: mapData.icon,
        iconSize: [32, 32],
    });

    L.marker([mapData.lat, mapData.lng], { icon: icon })
        .bindPopup(mapData.body)
        .addTo(map);

}
</script>

以前に書いたmakeMarker関数よりこっちの方が見やすい気がする。以前の方はjsonがどうのこうの書いていたが恐らくそっちは外部ファイルとかのjsonを読み込んで使う時に便利なんだろう。

 - JavaScript

  関連記事

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

ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...

Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)

GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...

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

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

Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法

LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリ ...

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...