2

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.

  • 1
    The comparison operator should be == like in d == 'Vivienda saludable' ? ... – xmojmr Dec 7 '16 at 7:13
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.