KML is not loading on MapBox map?

Question

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);

Answer 1

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:

1. IDs can not contain spaces (only letters, numbers, dash and underscore; start with a letter), so fix <Document id="Weed Pressure">.
2. Document tag shouldn't contain xml namespaces & schemas... only the kml tag needs those.
3. In your last Style <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)
4. Screen Overlays are not supported by all KML renderers... you'll want to confirm that MapBox supports them, or try without it.
5. Your placemark IDs are all "ID_00000"... they should all be unique.
6. Your geometries all appear to be single polygons, yet they are all wrapped in MultiGeometry tags. While most renderers should ignore this, some may not handle MultiGeometries, so you might try removing the tags as you're not actually using them.