Leaflet leafletjs.com/
ダウンロードしたleaflet.js、leaflet.cssにリンク
<link rel="stylesheet" href="leaflet.css">
<script type="text/javascript" src="leaflet.js"></script>
もしくは
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
@1.2.0はバージョン
スタイルでサイズ指定
<style>
#MAP{
width:900px;
height:900px;
}
</style>
位置決め
<div id = "MAP"></div><script>
var mp = L.map("MAP").setView([31.30 , 130.50] , 8);
L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
{attribution: "<a href = 'https://maps.gsi.go.jp/' target = '_blank'>国土地理院</a>"}
).addTo(mp);
L.control.scale()
.addTo(mp);
</script>L.map()
L.map(“MAP”)の"MAP"はID名（div id） ・・・ 任意
.setView([31.30 , 130.50] , 8);で表示位置セット
31.30は緯度、130.50は経度、8はズームレベル
緯度・経度は60進法（分・秒）ではなく10進法
L.tileLayer() ↓
.addTo(mp)でmpへ追加
L.control.scale()
スケール
L.marker()
プロット － 目印（マーカー）
L.marker([31.59 , 130.66])
.addTo(mp);
L.circle()
円（サークル）
L.circle([31.59 , 130.66] ,1000,{
color :'red'
})
.addTo(mp)
.bindPopup("さくらじま");
・・・ 円の半径：1000[m]、色：red
.bindPopup()でクリック（タップ）時、テキストがポップアップ
L.icon()
デフォルトのマーカーを他のイメージに変える
var marker2 = L.icon({
iconUrl:'fune.png',
iconSize:[25,25]
});
L.marker([29.64 , 129.71],
{icon:marker2})
.addTo(mp);
L.polyline()
線
mp.fitBounds(group.getBounds());
L.control.layers()
レイヤーコントロール
L.control.layers(baseMaps,overlay,{position:'topleft'})
.addTo(mp);
ベースマップ baseMaps
ベースマップの切り替え
オーバーレイ［マップ］ overlay
レイヤーの切り替え
繰り返し文 for文
var point = [
['十勝岳' , 43.42 , 142.69],
['雌阿寒岳' , 43.45 , 144.16],
['口永良部島' , 30.44 , 130.22],
['諏訪之瀬島' , 29.64 , 129.71],
];
for(var i=0;i<point.length;i++){
L.circle([point[i][1] , point[i][2]] , 1000 ,{
color:'red'
})
.addTo(map)
.bindPopup(point[i][0]);
}
データファイルからの読み込みも可 →
L.geoJson()
地図の種類指定
attributionで引用元も記載
'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png'
国土地理院の白地図
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
国土地理院の標準地形図
国土地理院のその他の地図および詳細は一覧のページ参照 → maps.gsi.go.jp/development/ichiran.html
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
オープンストリートマップ OpenStreetMap
・
・
・
● https://www.mitsumatado.com/Memo/…
map.html?…
'http://tile.openstreetmap.jp/{z}/{x}/{y}.png'
オープンストリートマップ OpenStreetMapの.jp → openstreetmap.jp/
map2.html?…
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
国土地理院の標準地形図
map3.html?…
'http://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'
国土地理院の空中写真（最新）
map4.html?…
'http://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg'
国土地理院 空中写真（1974～1978年）
map5.html?…
'http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png'
Thunderforest → www.thunderforest.com/
map6.html?…
'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'
OpenTopoMap → opentopomap.org/
mapR.html?…
'http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png'
国土地理院 色別標高図（レリーフ）
タイルレイヤーではなく、緯度・経度を渡しただけ
mapG.html?…
GoogleMap
mapK.html?…
KTGIS.net 今昔マップ on the web － データセット選択
mapV.html?…
半径１[km]、２[km]、４[km]
データURI ・・・ URLで値を渡す
map.html?ido=+31.59&kdo=+130.66
の?以降
Leafletで図に凡例を付ける
Leafletのレイヤー
・
・
・
３ Leafletでプロットいっぱい －最高気温40℃－
２ Leafletでプロットいっぱい －GeoJSON－
１ Leafletでプロット、線引き