0

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?

0

Basing on the answer placed here:

https://codereview.stackexchange.com/questions/229225/loading-kml-files-into-leaflet-javascript-map/229289#229289

I would like to show the shorter code, that can be applied for this solution:

const addTrackAndBoundsFromKml = kmltext => {

// Create new kml overlay
 const parser = new DOMParser();
 kml = parser.parseFromString(kmltext,"text/xml");

 const track = new L.KML(kml);
 map.addLayer(track);

 // Adjust map to show the kml
 map.fitBounds( track.getBounds() );

};

// load KML file
fetch('lotA.kml')
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);

fetch('lotB.kml')
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);

fetch('lotC.kml')
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);

fetch('lotD.kml')
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);

 fetch('Schematic.kml')
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);


const files = ['lotA.kml', 'lotB.kml', 'lotC.kml', 'lotD.kml', 'Schematic.kml'];
for ( const file of files ) {
fetch(file)
  .then( res => res.text() )
  .then( addTrackAndBoundsFromKml);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.