And the code with leaflet-kml
:
<script type="text/javascript">
// Make basemap
const key = 'xxx';
const map = L.map('map').setView([0, 0], 1);
const gl = L.maplibreGL({
style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
}).addTo(map);
map.attributionControl.setPrefix('');
// Load kml file
fetch('doc.kml')
.then(res => res.text())
.then(kmltext => {
// Create new kml overlay
const parser = new DOMParser();
const kml = parser.parseFromString(kmltext, 'text/xml');
const track = new L.KML(kml);
map.addLayer(track);
// Adjust map to show the kml
const bounds = track.getBounds();
map.fitBounds(bounds);
});
</script>
This is the map loaded with leaflet-omnivore
:
And the code with leaflet-omnivore
:
<script type="text/javascript">
// Make basemap
const key = 'xxx';
const map = L.map('map').setView([0, 0], 1);
const gl = L.maplibreGL({
style: `https://api.maptiler.com/maps/1cc7120b-9404-449d-8aca-dfcde7b44b89/style.json?key=${key}`
}).addTo(map);
map.attributionControl.setPrefix('');
// Load kml file
var geoJsonLayer = L.geoJSON(null, {
// Filter desidered number
// filter: function(feature) {
// return(feature.properties.name == 'Territorio 050');
// },
onEachFeature: function(feature, layer) {
if (feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
});
var kmlLayer = omnivore.kml('doc.kml', null, geoJsonLayer)
.on('ready', function() {
map.fitBounds(kmlLayer.getBounds());
})
.addTo(map);
</script>
The KML file:
Full KML file: https://pastebin.com/LuNLcArN