leaflet-kmz
Version:
A KMZ file loader for Leaflet Maps
126 lines (108 loc) • 3.25 kB
HTML
<html>
<head>
<title>leaflet-kmz</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Leaflet (JS/CSS) -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/leaflet-ui@0.4.5/dist/leaflet-ui-src.js"></script>
<script src="../dist/leaflet-kmz-src.js"></script>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = L.map('map', {
center: [43.5978, 12.7059],
zoom: 5,
mapTypeId: 'topo',
gestureHandling: false,
searchControl: false,
locateControl: false,
pegmanControl: false,
fullscreenControl: false,
minimapControl: false,
preferCanvas: true,
plugins: [
"@raruto/leaflet-elevation@1.3.x/dist/leaflet-elevation.css",
"@raruto/leaflet-elevation@1.3.x/dist/leaflet-elevation.js"
]
});
// Instantiate KMZ parser (async)
var kmz = L.kmzLayer(null, {
// geometryToLayer: function(data, xml) {
// let layer = this._geometryToLayer(data, xml);
// let el = xml.getElementsByTagName('GroundOverlay');
// for (let k = 0; k < el.length; k++) {
// l = _.parseGroundOverlay(el[k], data.properties);
// if (l) {
// layer.addLayer(l);
// }
// }
// return layer;
// }
}).addTo(map);
kmz.on('load', function(e) {
control.addOverlay(e.layer, e.name);
// e.layer.addTo(map);
});
// Add remote KMZ files as layers (NB if they are 3rd-party servers, they MUST have CORS enabled)
kmz.add('./test-encoding.kml');
kmz.add('../examples/regions.kmz');
kmz.add('../examples/capitals.kmz');
kmz.add('../examples/globe.kmz');
kmz.add('../examples/multigeometry.kmz');
kmz.add('../examples/etna.kmz');
// var opts = {
// elevationControl: {
// url: "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx",
// options: {
// theme: "lightblue-theme",
// collapsed: false,
// detached: false,
// summary: "inline",
// followMarker: false,
// position: 'bottomleft',
// collapsed: true,
// },
// },
// layersControl: {
// options: {
// collapsed: false,
// },
// },
// };
// var controlElevation;
// map.on('plugins_loaded', function() {
//
// controlElevation = L.control.elevation(opts.elevationControl.options);
// var controlLayer = L.control.layers(null, null, opts.layersControl.options);
//
// controlElevation.addTo(map);
// controlLayer.addTo(map);
//
// controlElevation.on('eledata_loaded', function(e) {
// controlLayer.addOverlay(e.layer, e.name);
// });
//
// controlElevation.load(opts.elevationControl.url);
//
// });
var control = L.control.layers(null, null, {
collapsed: false
}).addTo(map);
</script>
<a href="https://github.com/Raruto/leaflet-kmz" class="view-on-github" style="position: fixed;top: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
width="163"> </a>
</body>
</html>