- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-12-02T13:05:05+09:00;2021-12-02T12:10:42+09:00","default:inoue.ko","inoue.ko")
#author("2023-08-29T16:43:38+09:00;2021-12-02T12:10:42+09:00","default:inoue.ko","inoue.ko")
*Leaflet
https://leafletjs.com/
~
Leaflet は Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。モバイルでも使えるインタラクティブな地図をWebページ上に簡単に表示できます。
~
//#iframe(https://koichi-inoue.github.io/JS_Leaflet/, 100%,75%)
//~
***サンプルコード
シンプルな地図表示の例
-DEMO:https://koichi-inoue.github.io/JS_Leaflet/
-CODE:https://github.com/koichi-inoue/JS_Leaflet
~
***サンプルコード2
スマートフォンで現在位置を表示する例
-DEMO:https://koichi-inoue.github.io/YouAreHere/
-CODE:https://github.com/koichi-inoue/YouAreHere
~
***Leaflet を利用するには
CDNから CSS と JS を読み込むだけで利用できます。
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" >
<script src ="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
~
***スクリプトの概説
-HTML上の地図を配置する div要素の id を設定
var map = L.map('map');
-地図の中心の緯度・経度とズームレベルを指定
map.setView( [35, 136] , 5);
-タイルレイヤーの指定(OpenStreetMap を利用)
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
-マーカーを指定(九州産業大学の座標を指定)
L.marker([ 33.66983627668292, 130.44487416744232 ] ).addTo(map)
.bindPopup('Kyushu Sangyo University')
.openPopup();
~
***参考|緯度・経度情報の取得
-GoogleMap を使う
地図上で目的の場所をダブルクリックすると、マーカーが表示されるとともに住所と緯度・経度が表示されます。
-GeoJSON.io を使う
https://geojson.io/
地図上でマーカーツールを選択して目的の場所をクリックすると右サイドに GeoJSON形式のデータが表示されます。"coordinates" として表示される最初の数字が経度、次の数字が緯度になっています。
~
~
~