[[:programming_start]] ====== Leaflet マーカーに自作アイコン使用 ====== Leaflet v1系を使用しマーカーに自作アイコンを表示します注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 標準マーカーの替わりに {{https://www.achiachi.net/blog/_outside/mapicon/c1.png}} {{https://www.achiachi.net/blog/_outside/mapicon/c2.png}} {{https://www.achiachi.net/blog/_outside/mapicon/c3.png}} の自作アイコンが表示されます。大きさは横長だったり2倍サイズだったります。

---- ===== ソースコード =====

---- ===== 説明 ===== マップの基本部分は[[map]]をご覧ください。マーカー部分は[[marker]]をご覧下さい。 1.L.iconで使用するアイコンのURL・大きさ(iconSize)・アイコンの中心位置(iconAnchor)・ポップアップの表示位置(popupAnchor)をセットします。


var icon1 = L.icon({
  iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png',  
  //↑アイコン画像のURL
  iconSize:     [34, 34], //アイコンの表示サイズ(幅,高さ)
  iconAnchor:   [17, 17], //アンカー位置：0,0を指定するとアイコンの左上が地図座標と一致します
  popupAnchor:  [0,  -30] //ポップアップの表示位置：0,0を指定するとアンカ位置からポップアップが表示されます
  //これ以外にもシャドー(影)などのオプションがあります
});

2.L.markerで使用するアイコンを指定します


L.marker([35.6896, 139.6918],{icon:icon1}).addTo(mymap).bindPopup("東京都");
//L.marker([ 緯度,経度 ],{icon:アイコン変数}).addTo(マップ変数).bindPopup(ポップアップ表示内容);