https://ja.wikipedia.org/wiki/OpenLayers
https://openlayers.org/
OpenLayersは、JavaScriptで組まれたオープンソースライブラリ。
Google Mapsのような、Webブラウザ上で動作するリッチな地図アプリケーションを構築するためのAPIを提供している。
KMLにも対応している。(ただしクリックしてもバルーンは出ないし、BalloonStyleには対応していない？)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>OpenLayersSample</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><!-- IE11対応 -->
<script>
function init() {
// 地図表示
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", // 国土地理院の地図を利用
projection: "EPSG:3857"
})
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([132.4553011, 34.3986543]),
zoom: 14
})
});
// KML表示
var kmlLayer = new ol.layer.Vector({
source: new ol.source.Vector({ url: 'sample.kml', format: new ol.format.KML() })
});
map.addLayer(kmlLayer);
kmlLayer.once("change", function() { // 以下のようにイベント処理に入れないと，データが読まれずにうまくいかない
// すべてのポイントが表示されるように表示変更
var view = map.getView();
view.fit(kmlLayer.getSource().getExtent(), map.getSize());
if (view.getZoom() > 18) { view.setZoom(18); }
});
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:100%;position:fixed;"></div> <!-- 画面いっぱいに表示するにはposition:fixedが必要 -->
</body>
</html>
