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

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を読み込んで使う時に便利なんだろう。