Leaflet地図：JavaScriptライブラリを使わずにKMLを表示。URLでKMLファイル指定。サンプルソース。

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

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

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

KMLファイルはURLで任意のファイルを指定できるようにした。

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

【KML形式サンプル】

<Placemark>
	<name>松竹梅</name>
	<description>34.9377292058504,135.747129321098</description>
	<styleUrl>#icon-1603-FF5252-labelson</styleUrl>
	<Point>
		<coordinates>
	135.747129321098,34.9377292058504,0
		</coordinates>
	</Point>
</Placemark>

【プログラムソース抜粋】

let arg = new Object;
let pair = location.search.substring(1).split('&');
for (var i=0; pair[i]; i++) {
	let kv = pair[i].split('=');
	arg[kv[0]] = kv[1];
}
fetch(arg.kml)
.then((response) => {
	if(response.ok) {
		return response.text();
	} else {
		throw new Error();
	}
})
.then((text) => {
	kml2map(text);
})
.catch((error) => {
	.....
})
function kml2map(kmlStr) {
	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 iconMarkers = L.featureGroup();
	// ---------------------------------------------------
	var parser = new DOMParser();
	var kml = parser.parseFromString(kmlStr, 'text/xml');
	var elements = kml.getElementsByTagName('Placemark');
	// ---------------------------------------------------
	for (var i=0; i<(elements.length); i++) {
		let pos = kmlParse(elements.item(i));
		var divIcon = L.divIcon({
			html: '<div class="divicon">' + pos['name'] + '</div>',
			iconSize: [0,0]
		});
		var popStr = '<a href="http://www.google.com/search?q=' + encodeURI(pos['name']) + '" target="_blank">' + pos['name'] + '</a>';
		iconMarkers.addLayer(L.marker([pos['lat'], pos['lng']], {icon: iconRed}).addTo(map).bindPopup(popStr));
		L.marker([pos['lat'], pos['lng']], {icon: divIcon}).addTo(map);
	}
	map.fitBounds(iconMarkers.getBounds());
	.....
}
function kmlParse(Placemark) {
	let latLng = Placemark.getElementsByTagName('coordinates')[0].textContent.split(',');
	return {
		name: Placemark.getElementsByTagName('name')[0].textContent,
		lat: parseFloat(latLng[1]),
		lng: parseFloat(latLng[0])
	}
}

以下の「重要伝統的建造物群保存地区マップ」でも使用。