あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 OpenStreetMap_API OpenLayers}}
[[start]]＞[[programming_start]]

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

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

===== デモ =====
<html>
<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>
<p>Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a></p>
</html>

===== PR =====
<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>

===== ソースコード =====

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

<code javascript>
<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>
</code>

----
[[start]]＞[[programming_start]]
あちあち情報局

ユーザ用ツール

サイト用ツール

ページ用ツール
