アイコン設置 サンプル地図  

Leaflet を利用した地図でオリジナルアイコンを設置
= マーカー画像のカスタマイズ =

  • Leaflet を利用した地図でオリジナルアイコンを設置する方法を紹介します。
  • 「leaflet.sprite」というプラグインを使用してマーカーの色を変えることができますが、7 色に限定されているようなので、さらに多くの色を使いたいという場合に参考にしてください。
  • 前のページで紹介したアイコンを利用してマーカー画像をカスタマイズします。
  • このページのサンプルでは、シャドウ(影) のないアイコンにシャドウ(影) 画像を組み合わせて表示させています。シャドウ(影) 付きのアイコンを利用する設定方法はソースの部分で説明しています。
  • ここで表示している地図は「Open Street Map」です。
  • アイコンをクリックするとカラーネームなどが表示されます。
《CSS(ページに合わせて設定し、head部に書いてください)》
<style>
#map {
width: 100%;
height: 400px;
}
</style>
《head部に書いてください》
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
《HTML部》
<div id='map'></div>
《JavaScript(<div id='map'></div>の下に書いてください)》

<script>
// 地図中心点の緯度経度とズーム値
var map = L.map('map').setView([35.68747,139.769332], 12);

// 読み込む地図(ここでは、Open Street Map)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// アイコンサイズの設定など
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'icon/Shadow.png', // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
shadowSize: [41, 41], // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
shadowAnchor: [10, 41], // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
iconSize: [25, 41], // シャドウ付きアイコンを使う場合は、[41, 41]に設定
iconAnchor: [10, 41],
popupAnchor: [3, -40]
}
});

// 利用するアイコンの種類とURL
var GreenIcon = new LeafIcon({iconUrl: 'icon/Green.png'}),
RedIcon = new LeafIcon({iconUrl: 'icon/Red.png'}),
OrangeIcon = new LeafIcon({iconUrl: 'icon/Orange.png'}),
PurpleIcon = new LeafIcon({iconUrl: 'icon/Purple.png'});

// 各アイコンを表示させる座標。アイコンの種類。ポップアップの記述など。「title」は、アイコンにオンマウスで表示される内容。
L.marker([35.681091,139.767197], {icon: GreenIcon,title: '東京駅'}).bindPopup("東京駅<br>Green Iconです").addTo(map);
L.marker([35.658603,139.745428], {icon: RedIcon,title: '東京タワー'}).bindPopup("東京タワー<br>Red Iconです").addTo(map);
L.marker([35.710001,139.809951], {icon: OrangeIcon,title: '東京スカイツリー'}).bindPopup("東京スカイツリー<br>Orange Iconです").addTo(map);
L.marker([35.689483,139.691736], {icon: PurpleIcon,title: '東京都庁'}).bindPopup("東京都庁<br>Purple Iconです").addTo(map);
</script>


おすすめサイト・関連サイト…

Last updated : 2023/11/18