1

I would like to show my .kml file in my leaflet map.~

There is a plugin: https://github.com/windycom/leaflet-kml whixh unfortunately doesn't work. It show only a blank map in the coordinates provided. This issue has been risen here: https://github.com/windycom/leaflet-kml/issues/3 where the basic explanation refers to the:

.then( res => response.text() )

and

const track = new L.KML(kml)

provided in the example:

https://github.com/genomexyz/sigmet-map

I have already uploaded my L.KML.js file alongside with the code, which now looks like this:

 // Load kml file
        fetch('LotA.kml')
            .then(res => response.text())
            .then(kmltext => {
                // Create new kml overlay
                const parser = new DOMParser();
                const kml = parser.parseFromString(kmltext, 'text/xml');
                const track = new L.KML(kmltext, 'text/xml');
                map.addLayer(track);

                // Adjust map to show the kml
                const bounds = track.getBounds();
                map.fitBounds(bounds);
            });

But the blank map comes again. I believe, that the change is minor, although I don't know certainly where. Is anyone able to clarify?

  • Have you tried it with a very simple KML file that you're 100% sure the map can display correctly? If you try that and it doesn't work, then the issue is probably in your leaflet code (and hopefully someone else can help you with that). If that test does work, then you might have a KML file that's too big or complex, or has other issues which prevent it being displayed. If that's the case, please share the KML (or a representative sample) so that we can help debug the KML. – Christiaan Adams Aug 15 '19 at 9:35
  • One thing, that come to mind - the KML can be too heavy I believe. – MKR Aug 19 '19 at 9:03
1

You are calling a variable response that does not exist

Replace line .then(res => response.text()) with .then(res => res.text())

If you had a catch statement before doing my recommended change, you will see the error (see below sample code). You current code had an error but silently fails as you didn't catch it...

// Load kml file
fetch('LotA.kml')
  .then(res => response.text())
  .then(kmltext => {
    // Create new kml overlay
    const parser = new DOMParser();
    const kml = parser.parseFromString(kmltext, 'text/xml');
    const track = new L.KML(kmltext, 'text/xml');
    map.addLayer(track);

    // Adjust map to show the kml
    const bounds = track.getBounds();
    map.fitBounds(bounds);
}).catch((e) => {
  console.log(e);
});

I've made a working demo but using "leaflet-omnivore" library

| improve this answer | |
1

First thing if I would suggest is - run the code on localhost.

Keeping editor offline only leads to misleading conclusions, that code isn't working.

I tried this stuff on localhost and everything works fine.

| improve this answer | |

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.