Leaflet layer with Points and Polygons

Question

I have this code to add a geoJSON layer to a map. The data contains both Points and Polygons, and I want both types to update their colors.

var AgentLayer = L.geoJSON().addTo(Lmap)

var geojsonMarkerOptions = {
    radius: 2,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }

this.render = function (data) {
    AgentLayer.remove()
    console.log(data)
    AgentLayer = L.geoJSON(data, {
        // style: function (feature) {
        //   return {color: feature.properties.color};
        // }
      pointToLayer: function (feature, latlang) {
        return L.circleMarker(latlang, {radius:feature.properties.radius, color: feature.properties.color});
      }
    }).addTo(Lmap)
  }

All the features are drawn, but the Polygons take the default blue color, which is not the one they actually have assigned. The Points update properly. The three commented lines with style update the color of the Polygons (and not the Points) only if I don't have the three pointToLayer lines.

Is it possible handle both color updates in the same layer (because the data is coming mixed with Points and Polygons)?

I tried creating two different layers and trying to separate the data processed by each by using instanceof, but I didn't succeed even making the map show up in the browser...

ghybs ghybs · Accepted Answer · 2020-04-23T02:29:18

I suspect there is just a typo:

AgentLayer = L.geoJSON(data, {
      style: function (feature) {
           return {color: feature.properties.color};
      }, // probably misses the comma to separate the object properties
      pointToLayer: function (feature, latlang) {
        return L.circleMarker(latlang, {
          radius:feature.properties.radius,
          color: feature.properties.color
        });
      }
    }).addTo(Lmap)

Leaflet layer with Points and Polygons

1 Answers