Leaflet(leafletjs.com/)使いやすい。
<div id = "map"></div>
で表示(位置決め)。
表示させる内容は、以下のJavaScript。
<script>
var map = L.map('map').setView([34.50 , 150.00] , 3);
L.tileLayer(
'https://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{attribution: 'Map data © <a href="https://openstreetmap.jp">OpenStreetMap</a>'})
.addTo(map);
L.control.scale()
.addTo(map);
L.marker([13.47 , 144.75])
.addTo(map)
.bindPopup("ぐあむ")
L.circle([34.50 , 131.47] ,100000,{
color :'red'
})
.addTo(map)
.bindPopup("あぶ")
var marker2 = L.icon({
iconUrl:'fune.png',
iconSize:[25,25]
});
L.marker([39.72 , 140.10],
{icon:marker2})
.addTo(map)
.bindPopup("あきた")
L.polyline([[13.47 , 144.75],[34.50 , 131.47]],{ "color": "green", "weight": 10, "opacity": 0.5})
.addTo(map);
L.polyline([[21.31 , 202.15],[39.72 , 140.10]],{ "color": "green", "weight": 10, "opacity": 0.5})
.addTo(map);
L.polyline([[13.47 , 144.75],[43.73 , 124.63]],{ "color": "red", "weight": 4, "opacity": 0.5})
.addTo(map);
L.polyline([[21.31 , 202.15],[43.73 , 124.63]],{ "color": "red", "weight": 4, "opacity": 0.5})
.addTo(map);
</script>
オープンストリートマップ OpenStreetMapにプロット、線引き →
スクリプトの上から順に
表示位置セット。ズームレベル3。
タイルレイヤー L.tileLayer()で地図の種類指定。引用元も記載。
OpenStreetMapの他、国土地理院の地図など色々選べる。
---追)GoogleMapのタイルレイヤー利用はダメとのこと---
GoogleMap(衛星画像)にプロット、線引き →
GoogleMapはタイルレイヤーの部分が、
L.tileLayer(
'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
{maxzoom:20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: 'Map data © <a href="https://www.google.com">GoogleMap</a>'})
.addTo(map);
s,h&x={x}&y={y}&z={z}’のs,h&xが、
m&xで標準的な地図、
s&xで衛星画像の地名なし、
p&xで地形(レリーフ)。
GoogleMapはLeafletやPythonで呼び出して使うというより、GoogleMapで完結している感じ。色々な情報がのっているので、お店など検索用途で使うのに適している。
---ダメ---
L.control.scale()でスケール追加。
L.marker()でマーカーをプロット。クリックすると「ぐあむ」と表示。
L.icon()を使って別のアイコン(ここではfune.png)に変えることもできる。
L.circle()で赤色の円をプロット。中心の緯度・経度の次の値は半径(m)。100000(=100km)は大きすぎた。
L.polyline()で線引き。opacityは透明度。
赤色の延長線は、2直線の方程式から交点の座標を計算して……なんてスマートな方法ではなく、このへんかな、とあたりをつけて緯度、経度の値をいじっただけ。
緯度1°の距離と経度1°の距離は同じではないし、球面なので2地点の距離も三平方の定理で、というわけにはいかない。
オンライン地図は、埋め込みすぎると重いページになる。
Leafletはサクサク動くが、JavaScriptの処理次第では重いページになる。
重い場合、結果だけ表示できればよいので、Pythonをいじってみたり、模索中。