内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
programs
»
LeafletでのOpenStreetMapの表示
programs:osm_lf1
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== LeafletでのOpenStreetMapの表示 ====== OpenStreetMapをLeafletライブラリーを使って表示します。 Ver1.3.1時点のクイックスタートガイドを参考にDokuWiki用にアレンジしています。 http://leafletjs.com/examples/quick-start/ ===== デモ ===== <html> <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 © <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> ===== 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> ===== ソースコード ===== 変更点は下記の2点。 * DokuWikiではHead要素の編集ができないためCSS・外部CSS・ライブラリーをBody要素内で読み込ませています。 * タイルサーバーをサードパーティーのmapbox.comから公式サイトのopenstreetmap.orgに変更、ライセンス表示も修正。 <code javascript> <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 © <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> </code>
programs/osm_lf1.txt
· 最終更新: 2018/03/30 22:29 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ