As we know, since the WIndy Leaflet-kml plugin has been developed we are able to input our KML files into the Leaflet map.
However I have one query regarding this:
How we can input a huge (at least several).kml files into this map?
Comparing it i.e with Google MyMaps, where we can place 8 single .kml layers (like 8 single .kml files). Could we do it the same in Leaflet using this plugin?
I tried this code, which works:
// Load kml file
fetch('lotA.kml')
.then( res => res.text() )
.then( kmltext => {
// Create new kml overlay
parser = new DOMParser();
kml = parser.parseFromString(kmltext,"text/xml");
console.log(kml)
const track = new L.KML(kml)
map.addLayer(track)
// Adjust map to show the kml
const bounds = track.getBounds()
map.fitBounds( bounds )
})
fetch('lotB.kml')
.then( res => res.text() )
.then( kmltext => {
// Create new kml overlay
parser = new DOMParser();
kml = parser.parseFromString(kmltext,"text/xml");
console.log(kml)
const track = new L.KML(kml)
map.addLayer(track)
// Adjust map to show the kml
const bounds = track.getBounds()
map.fitBounds( bounds )
})
... 2 files more, and last one:
fetch('LotD.kml')
.then( res => res.text() )
.then( kmltext => {
// Create new kml overlay
parser = new DOMParser();
kml = parser.parseFromString(kmltext,"text/xml");
console.log(kml)
const track = new L.KML(kml)
map.addLayer(track)
// Adjust map to show the kml
const bounds = track.getBounds()
map.fitBounds( bounds )
})
Despite the code, which is valid, it can look awkward, when inpuit more files.~
I believe, it must be some solution with the fetch()
reference. I was searching some info, but everywhere the fetch()
option is related to some url address, on top of that, a single one:
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://github.github.io/fetch/
https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
I was trying to do sth like this:
fetch(['lotA.kml'].['lotB.kml']), but this way is not good.
Do you know how to refactorize this code to make it more confined?