差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- osm_lf1 [2018/09/11 10:19]
管理者
+++ osm_lf1 [2018/09/11 10:21] (現在)
管理者
@@ ライン 1: / ライン 1: @@
+~~NOCACHE~~
+{{tag>プログラミング関連 OpenStreetMap_API Leaflet}}
+[[start]]＞[[programming_start]]
+====== Leafletのデモ ======
+Leafletライブラリーを使ってOpenStreetMapを表示します。
+----
+===== デモ =====
+Ver1.3.1時点のクイックスタートガイドを参考にDokuWiki用にアレンジしています。
+http://leafletjs.com/examples/quick-start/
+<html>
+<div id="mapid" style="width: 100%; height: 400px;"></div>
+<script src="https://www.achiachi.net/blog/_outside/leaflet/134/leaflet.js"></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://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>
+</html>
+<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用に変更した場所は [[leaflet:map]] をご覧ください
+<file javascript>
+<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>
+</file>
+----
+[[start]]＞[[programming_start]]

あちあち情報局

ユーザ用ツール

サイト用ツール

差分

ページ用ツール