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>