leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
2024/03/23
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を読み込んで使う時に便利なんだろう。
関連記事
-
架空の地図画像を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呼び ...