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

Version4.6.5時点のクイックスタートページを参考にDokuWiki用にアレンジしています。 http://openlayers.org/en/latest/doc/quickstart.html

Map data © OpenStreetMap

DokuWikiではHead要素の編集ができないためCSS・外部CSS・ライブラリーをBody要素内で読み込ませていますが、その他は変更していません。

<style>
  .map{height: 400px;width: 100%;}
</style>
 
<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://openlayers.org/en/v4.6.5/css/ol.css");
</script>
 
<div id="map" class="map"></div>
 
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
 
<script>
  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({source: new ol.source.OSM() })],
    view: new ol.View({center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
    })
  });
</script>

ここは旧トップページ＞日曜プログラミング