Leaflet マーカーとポップアップ表示

Leaflet v1系を使用してマーカーとポップアップ(情報ウインドウ・バルーン)を表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

マーカーを3つ表示します。マーカーをクリックと吹き出し(ポップアップ)に都道府県名が表示されます。

<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);
 
 
    //マーカー表示
    L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
    L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
    L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");
 
 
    mymap.setView([35.6896, 139.6918], 9);
  });
</script>

マップの基本部分はLeaflet - OpenStreetMap表示をご覧ください。

マーカーを表示するには、L.markerに、緯度・経度・表示するマップ・ポップアップの内容を登録します。何個でも追加できます。

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

1.ポップアップが不要な場合は bindPopup() を削除します。

L.marker([35.6896, 139.6918]).addTo(mymap);
//L.marker([ 緯度,経度 ]).addTo(マップ変数);

2.表示した際にポップアップを開いた状態にする場合は、setViewより後で openPopup() オプションを付けて記述して下さい。

openPopupの注意

• setViewより前にあると無視されます
• 地図の座標が自動的にポップアップが見える位置まで自動で移動するのでsetViewの座標設定は無視されます。
• ポップアップをは1つだけしか表示できないので複数使用した場合は最後に指定したものが表示されます。

L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");
 
mymap.setView([35.6896, 139.6918], 9);
L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都").openPopup();