Leafletのデモ

Leafletライブラリーを使ってOpenStreetMapを表示します。

Ver1.3.1時点のクイックスタートガイドを参考にDokuWiki用にアレンジしています。 http://leafletjs.com/examples/quick-start/

Leafletライブラリをインストールし下記ソースコードなど地図を表示するJavaScriptを書くだけ。地図データはOpenStreetMapや国土地理院など条件付きだが無料で使えるタイルサーバーを利用する。

DokuWiki用に変更した場所は Leaflet - OpenStreetMap表示 をご覧ください

<div id="mapid" style="width: 100%; height: 400px;"></div>
 
<script src="https://www.achiachi.net/blog/_outside/leaflet/134/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/134/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 エラー');
    }
  }
 
  addOnload(function(){
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
 
    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);
 
    L.marker([51.5, -0.09]).addTo(mymap)
      .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
 
    L.circle([51.508, -0.11], 500, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");
 
    L.polygon([
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047]
    ]).addTo(mymap).bindPopup("I am a polygon.");
 
    var popup = L.popup();
 
    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
    }
 
    mymap.on('click', onMapClick);
  });
</script>