晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:KMLを表示。サンプルソース。Windy.comで表示も。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、KMLファイルのLeaflet地図表示を試した。JavaScriptライブラリ「leaflet-kml」を使った。

【プログラムソースサンプル】

<script src="js/L.KML.js"></script>

<script>
var map = L.map('map');
var tileLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {
	attribution: '<a href="https://developers.google.com/maps/documentation" target="_blank">Google Map</a>'
});
tileLayer.addTo(map);
var kml = 'kml/kyoto-fushimi.kml';
fetch(kml)
	.then(res => res.text())
	.then(kmltext => {
		const parser = new DOMParser();
		const kml = parser.parseFromString(kmltext, 'text/xml');
		const track = new L.KML(kml);
		map.addLayer(track);
		const bounds = track.getBounds();
		map.fitBounds(bounds);
	});
</script>

【サンプル】

≪Leaflet地図:KML版≫

https://ok2nd.github.ioleaflet/kml-sample-fushimi.html

f:id:art2nd:20210604140339p:plain

以下、同じ場所を別の方法で地図表示したサンプル。

Google マイマップ≫

https://www.google.com/maps/d/embed?mid=1v4-LE3lATbzB_MzjWKGbER8LrJ_zYMN3

f:id:art2nd:20210604140332p:plain

≪Leaflet地図:マーカー2種類版≫

https://ok2nd.github.io/leaflet/kyoto-fushimi.html

f:id:art2nd:20210604140336p:plain

≪Leaflet地図:KML版(URLファイル指定版)≫

https://ok2nd.github.io/leaflet/kml.html?kml=kml/kyoto-fushimi.kml&name=京都伏見

f:id:art2nd:20210612093927j:plain

「Windy.com」でも、KMLファイルをアップロードして地図表示できる。

≪Windy: Upload KML, GPX or geoJSON file≫

https://www.windy.com/uploader

アップロードして作成した地図サンプル。

≪Windy.com地図≫

https://www.windy.com/upload/60b9a4298c3f540012b6e6c3

f:id:art2nd:20210604140343p:plain