こんにちはフロントエンドエンジニアのまさにょんです!
今回は、LeafletでMarkerのアイコンをオリジナルの画像に変える方法について解説していきます。
目次
Markerのアイコンをオリジナルの画像に変える
LeafletでMarkerを作成すると、次のようなピンのアイコンが立つのがDefaultです。
このピンのアイコンをオリジナルの画像に変えていきます。
Markerのアイコンを変更したい場合は、次のように icon({iconUrl: [ ‘画像ファイルパス’ ]}) といった形で、
iconインスタンスを作成して、それをMarkerインスタンスにセットする必要があります。
// [ MarkerのIconをオリジナルの画像に変える方法 ]
// 1. Original-Icon-Instance
const robotamaIcon = L.icon({
iconUrl: ['./robotama-icon.png'], // 画像ファイルパス
iconSize: [80, 50] // アイコンサイズ
});
// [ Markerのアイコンを変更したい場合 ]
// iconUrl: 画像ファイルパス
// iconRetinaUrl: モバイル用画像ファイルパス
// iconSize: アイコンのサイズ
// iconAnchor: 画像のオフセット位置
// popupAnchor: ポップアップの表示位置
// 2. Marker-Instance に Original-Icon-Instance をセットする!
L.marker(
[51.5, -0.09],
{ icon: robotamaIcon } // ここで、OriginalアイコンをSetする🔥
)
.addTo(map)
SampleCode全文 & HTML実行イメージ
SampleCodeを実行すると、次のようにIconがこのブログのマスコットキャラクター『ロボ玉』になっています。
<html style="height: 100%; margin: 0;">
<head>
<title>Leaflet</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
<script src="./node_modules/leaflet/dist/leaflet.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div id="map" style="height: 100%; width: 100%;"></div>
</body>
<script>
// MarkerのIconをオリジナルの画像に変える方法
const map = L.map('map',{
worldCopyJump: true, // 世界地図を移動してもMarkerが自動生成される
})
.setView([51.5, -0.09], 3);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png',
{
attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
minZoom:2,
maxZoom: 6,
}).addTo(map);
// 1. Original-Icon-Instance
const robotamaIcon = L.icon({
iconUrl: ['./robotama-icon.png'], // 画像ファイルパス
iconSize: [80, 50] // アイコンサイズ
});
// [ 表示させるアイコンを変更したい場合 ]
// iconUrl: 画像ファイルパス
// iconRetinaUrl: モバイル用画像ファイルパス
// iconSize: アイコンのサイズ
// iconAnchor: 画像のオフセット位置
// popupAnchor: ポップアップの表示位置
// 2. Marker-Instance に Original-Icon-Instance をセットする!
L.marker(
[51.5, -0.09],
{ icon: robotamaIcon } // ここで、OriginalアイコンをSetする🔥
)
.addTo(map)
.bindPopup('ロボ玉万歳!!!.<br> 神聖グンマー帝国、万歳!!.');
L.marker([38.9, -77.01], {icon: robotamaIcon}).addTo(map).bindPopup('アメリカ合衆国-Robotama');
// openPopup() をすると、Clickしなくても Popupが出現した状態(Open-状態)になる! => 1つだけ
L.marker([35.68, 139.69], {icon: robotamaIcon}).addTo(map).bindPopup('日本-Robotama').openPopup();
L.marker([-41.289, 174.7], {icon: robotamaIcon}).addTo(map).bindPopup('ニュージーランド-Robotama');
// [ 参考・引用 ]
// 【JavaScript】LeafLetのマーカーを任意の画像に変換する方法 => https://cpoint-lab.co.jp/article/201905/9485/
// Leaflet #010 – マーカーのアイコンを変更 => https://day-journal.com/memo/leaflet-010/
</script>
</html>
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!