LeafletでのOpenStreetMapの表示

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

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

変更点は下記の2点。

• DokuWikiではHead要素の編集ができないためCSS・外部CSS・ライブラリーをBody要素内で読み込ませています。
• タイルサーバーをサードパーティーのmapbox.comから公式サイトのopenstreetmap.orgに変更、ライセンス表示も修正。

<div id="mapid" style="width: 500px; height: 400px;"></div>
 
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
 
<script>
  /* 外部CSSの読み込み用 */
  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://unpkg.com/leaflet@1.3.1/dist/leaflet.css");
</script>
 
<script>
  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>