あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[: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倍サイズだったります。

<html>
<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.css");

  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }  

var mymap;

addOnload(function(){
  mymap = L.map('mapid'); 
  L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
  }).addTo(mymap);


  //アイコン設定
  var icon1 = L.icon({
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png',  
    iconSize:     [34, 34],
    iconAnchor:   [17, 17],
    popupAnchor:  [0,  -10]
  });  
  var icon2 = L.icon({
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c2.png',  
    iconSize:     [68, 34],
    iconAnchor:   [34, 17],
    popupAnchor:  [0,  -10]
  });  
  var icon3 = L.icon({
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c3.png',  
    iconSize:     [68, 68],
    iconAnchor:   [34, 34],
    popupAnchor:  [0,  -20]
  });    
  

  //自作アイコンのマーカー表示
  L.marker([35.6896, 139.6918],{icon:icon1}).addTo(mymap).bindPopup("東京都");
  L.marker([35.6050, 140.1234],{icon:icon2}).addTo(mymap).bindPopup("千葉県");
  L.marker([35.8572, 139.6490],{icon:icon3}).addTo(mymap).bindPopup("埼玉県");


  mymap.setView([35.6896, 139.6918], 8);
});
</script>
</html>


<html>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- respon_0 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9251612436023685"
     data-ad-slot="1409739163"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>


----
===== ソースコード =====
<code javascript>
<div id="mapid" style="width: 100%; height: 400px;"></div>
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css"); 
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid'); 
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 

    //アイコン設定
    var icon1 = L.icon({
      iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c1.png',  
      iconSize:     [34, 34],
      iconAnchor:   [17, 17],
      popupAnchor:  [0,  -10]
    });  
    var icon2 = L.icon({
      iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c2.png',  
      iconSize:     [68, 34],
      iconAnchor:   [34, 17],
      popupAnchor:  [0,  -10]
    });  
    var icon3 = L.icon({
      iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/c3.png',  
      iconSize:     [68, 68],
      iconAnchor:   [34, 34],
      popupAnchor:  [0,  -20]
    });    

    //マーカー表示(自作アイコン使用)
    L.marker([35.6896, 139.6918],{icon:icon1}).addTo(mymap).bindPopup("東京都");
    L.marker([35.6050, 140.1234],{icon:icon2}).addTo(mymap).bindPopup("千葉県");
    L.marker([35.8572, 139.6490],{icon:icon3}).addTo(mymap).bindPopup("埼玉県");


    mymap.setView([35.6896, 139.6918], 8);
  });
</script>
</code>


<html>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- respon_0 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9251612436023685"
     data-ad-slot="1409739163"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</html>


----
===== 説明 =====
マップの基本部分は[[map]]をご覧ください。マーカー部分は[[marker]]をご覧下さい。

1.L.iconで使用するアイコンのURL・大きさ(iconSize)・アイコンの中心位置(iconAnchor)・ポップアップの表示位置(popupAnchor)をセットします。
<code javascript>
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を指定するとアンカ位置からポップアップが表示されます
  //これ以外にもシャドー(影)などのオプションがあります
});
</code>

2.L.markerで使用するアイコンを指定します 
<code javascript>
L.marker([35.6896, 139.6918],{icon:icon1}).addTo(mymap).bindPopup("東京都");
//L.marker([ 緯度,経度 ],{icon:アイコン変数}).addTo(マップ変数).bindPopup(ポップアップ表示内容);
</code>
あちあち情報局

ユーザ用ツール

サイト用ツール

ページ用ツール
