I'm trying to import multiple kml files and style them. That is my code as now:

  var uni = new Array();
  for (var i = nearbyuni.length - 1; i >= 0; i--) {
    var c = nearbyuni[i].colore;
    une = omnivore.kml(nearbyuni[i].kml);
    une.setStyle({color: c});
    uni.push(une);
  };
  var uniLayer = L.layerGroup(uni);

All variables are instanced correctly, the kmls are converted and successfully added to the map, but the fill and stroke colors are always the default blue. The "c" var contains an hex color code. What am I missing?

I'm trying to import multiple kml files and style them. That is my code as now:

  var uni = new Array();
  for (var i = nearby.uni.length - 1; i >= 0; i--) {
    var c = nearby.uni[i].colore;
    une = omnivore.kml(nearby.uni[i].kml);
    une.setStyle({color: c});
    uni.push(une);
  };
  var uniLayer = L.layerGroup(uni);

All variables are instanced correctly, the kmls are converted and successfully added to the map, but the fill and stroke colors are always the default blue. The "c" var contains an hex color code. What am I missing?

• javascript
• kml
• leaflet
• mapbox

Share Improve this question Follow asked Oct 9, 2014 at 9:43 Marek MaurizioMarek Maurizio 1,07822 gold badges1111 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I was kindly helped on github by https://github./tmcw

The setStyle code had to be called synchrounsly like this:

une.on('ready', function() {
        this.setStyle({color: "#FF0000"});
    });

Full example on fiddle: http://jsfiddle/oxdnpzcr/3/

//using leaflet
function intialthree(file)
{
    var highlightStyle1 = {
      fillColor: "00FFFFFF",
      weight: 1,
      opacity: 1,
      color: "#000000",
      fillOpacity:0.0
    };

    city = new L.KML("IndiaKML/"+file, {async: true });

    city.on("loaded", function(e) {
      this.setStyle(highlightStyle1);
      map.fitBounds(e.target.getBounds());
    });

    map.addLayer(city);
}