[GIS] Change style of GeoJSON circle marker by feature properties

geojsonleaflet

I have GeoJSON Feature Collection of points with a text property 'Proyecto' and I want to change the color of the circle marker for each point to vary by that property.

I've created a function to get the color based on the five unique values for the 'Proyecto' property:

function getColor(d) {
  return d = 'Vivienda saludable' ? '#a6cee3' :
         d = 'Programa OPAS- 1969, Prevención de conflictos, desarrollo de acuerdos y construcción de la paz en comunidades con personas internamente desplazadas en Chiapas, México'  ? '#1f78b4' :
         d = 'Familias fuertes, amor y límites'  ? '#b2df8a' :
         d = 'e-Health, acceso a servicios médicos de telemedicina en comunidades indígenas en extrema pobreza'  ? '#33a02c' :
         d = 'Casas maternas'   ? '#fb9a99' :
             '#FFEDA0';
         }

I then create the GeoJSON layer, call pointToLayer, create a circle marker and call the getColor function, and create a popup from the properties of the GeoJSON file.

var puntos = L.geoJson(puntos_chiapas, {

    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.85, color: getColor(feature.properties.Proyecto)});
    },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(
                "<b>Proyecto: </b>" +
                feature.properties.Proyecto + 
                "</br>" + 
                "<b>Ubicación: </b>" +
                feature.properties.Ubicación +
                "</br>" +  
                "<b>Sector: </b>" +
                feature.properties.Sector +
                "</br>" + 
                "<b>Esquema: </b>" +
                feature.properties.Esquema
            )
            }

    });

The resulting map and points all show only the color of the first 'Proyecto' text from the getColor function. What am I doing wrong?

I've included the JSFiddle here. You may need to toggle off the polygon layer to see the points.

Best Answer

The problem lay in the getColor function. You need to use == as the comparison operator and not the assignment operator (single =). With respect, stacking ternary operators like that does not make for readable code. Simply rewriting the function with a switch statement solves your problem:

function getColor(d) {
  switch (d) {
    case 'Vivienda saludable':
      return '#a6cee3';
    case 'Programa OPAS- 1969, Prevención de conflictos, desarrollo de acuerdos y construcción de la paz en comunidades con personas internamente desplazadas en Chiapas, México':
      return '#1f78b4';
    case 'Familias fuertes, amor y límites':
      return '#b2df8a';
    case 'e-Health, acceso a servicios médicos de telemedicina en comunidades indígenas en extrema pobreza':
      return '#33a02c';
    case 'Casas maternas':
      return '#fb9a99';
    default:
      return '#FFEDA0';
  }
}

See revised JSFiddle (I swapped the order of your layers merely for my convenience - but it's the switch statement you're interested in anyway).

Related Question