I am facing issue while loading the KML file on the mapbox map. For loading KML, I am using leaflet-omnivore https://github.com/mapbox/leaflet-omnivore library.
For reference purpose I am using this example https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-kml/
It is working fine for the KML who has the single Placemark tag. But is not working for the multiple Placemark tags.
Can any please let me know how can I load the KML with multiple placemarks?
Or is there any other issue.
Here is my sample code
var runLayer = omnivore.kml('kmlfiles/sample.kml', null, customLayer)
.on('ready', function() {
runLayer.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.description);
});
})
.on('error', function(e) {
console.log("Error loading KML: ", e);
})
.addTo(map);
Best Answer
I can't help with the MapBox side, but there are a number of things to check about your KML file.
First, it's nearly 3MB, which is starting to get big for an online map (Google Maps API currently supports 3MB file size, 10MB uncompressed KML (docs), but looks like MapBox supports KMLs upto 260MB (docs), so that shouldn't be the issue.
Below are some things which make your KML schema-invalid, or are not best practices. Most KML renderers should be able to ignore these issues (Google Earth loads it fine), but I'm not sure what the MapBox renderer might be strict about:
<Document id="Weed Pressure">
.<Style id="PolyStyleWhite">
you have some colors defined with six characters. KML colors are defined with eight characters, where the first two are alpha/transparency and the RGB is in reverse order from HTML colors (HTML color: #rrggbb; KML color: aabbggrr)