3

I have to load a KML layer on a Leaflet app. After some browsing I found a library called leaflet-kml that does this. There are two ways that I can load the KML layer: either by the KML layer's URI or a KML string. The KML is stored in a server and I have backend code that retrieves both the URI and string representation.

Here is the approach using the URI.

function LoadKML(containerName, name)
{
     let kmlURL = GetKmlURI(containerName, name);  
     let kmlLayer = new L.KML(kmlURL);
     map.addLayer(kmlLayer);
}

Here is the approach using the kml string.

function LoadKML(containerName, name)
{
     let kmlString = GetKmlString(containerName, name);  
     let kmlLayer = new L.KML.parseKML(kmlString);
     map.addLayer(kmlLayer);
}

I could not get a URL with the first method due to the CORS restriction. The second method returns a string, but could not be parsed correctly.

KML.js:77 Uncaught TypeError: this.parseStyles is not a function
    at new parseKML (KML.js:77)
    at LoadKML (Account:470)
    at Account:461

How should I call the function in leaflet-kml? Are there any libraries that can easily load KML into leaflet?

Improve this question
3
  • I don't know that plugin, but my instinct would be to get the kml into GeoJSON which Leaflet speaks natively.
    – peeebeee
    Commented Aug 2, 2019 at 8:33
  • 2
    Are you sure that you are loading the library correctly? The error is not a parse error but an type error from the code you are executing. The L.KML.js file on Github clearly has this.parseStyles defined as a function. Could you share a minimal reproduction of the issue through JSfiddle or a similar service?
    – Abbe
    Commented Aug 2, 2019 at 8:43
  • The kml file could only be accessed by communicating with the backend. Are there any online KMLs that I can refer so that I can reproduce the error?
    – disguisedtoast
    Commented Aug 2, 2019 at 9:38

4 Answers 4

Reset to default
6

You can use leaflet-omnivore. It is the best plugin for loading KML files (https://github.com/mapbox/leaflet-omnivore)

var kmlData = omnivore.kml('data/kmlData.kml', null, customLayer);
Improve this answer
0
0

There is the plugin leaflet-kml

https://github.com/windycom/leaflet-kml

using it you can write your code like this:

<head>
<script src="L.KML.js"></script>
</head>


<script type='text/javascript'>

// Make basemap
const map = new L.Map('map', {center: new L.LatLng(58.4, 43.0), zoom: 11},)
, osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')

map.addLayer(osm)

// Load kml file
fetch('Coventry.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 )
      })

  </script>
 </body>

It should work, rgds

Improve this answer
0

You were close! The parseKML requires a parsed DOM xml. The result is a list of features, which you have to wrap as a layer too.

function LoadKML(containerName, name)
{
     let kmlString = GetKmlString(containerName, name);  
     const domParser = new new DOMParser();
     const parsed = parser.parseFromString(userLayer.kml, 'text/xml');
     let kmlGeoItems = new L.KML.parseKML(parsed); // this is an array of geojson
     const layer = L.layerGroup(L.KML.parseKML(parsed));
     map.addLayer(layer);
}
Improve this answer
0

you can used the embedMap webapp too: https://www.owlapps.net/modules/owlapps_apps/embedmap/

It's based on leafletjs

Improve this answer

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