1

I am trying to style geoJSON objects by its feature properties (Capacity). I tried 2 ways:

1:

function getWidth(Capacity) {
return Capacity >= 40 ? 12 :
       Capacity >= 30 ? 8 :
       Capacity >= 20 ? 6 :
       Capacity >= 10 ? 3 :
       0;
       }

function getSize(h) {
return h >= 40 ? 12 :
       h >= 30 ? 8 :
       h >= 20 ? 6 :
       h >= 10 ? 3 :
       0;
       }

  function mystyle(feature) {
  if (currentZoom <= 12) {
    return {
      weight: 1, 
      opacity: 0.5,
    };
  }
  else {
    return {
      weight: getWidth(feature.properties.Capacity),
      radius: getSize(feature.properties.Capacity)
    };
  }
}

var johnlewis = L.geoJSON(jl, {
 style: mystyle,
 pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng);
},
  }).addTo(map);

and as a result I got something like this:

enter image description here

where only weight changed, although the zoom level 12 set in function (map.getZoom() doesn't work at all.

In my 2nd example:

  function style2(feature) {
return {
    fillColor: setColor(feature.properties.Type),
    fillOpacity: 0.5,
    weight: 2,
    opacity: 1,
    color: '#ffffff',
    dashArray: '3'
};
}   

var johnlewis = L.geoJSON(jl, {
style: function(feature) {
                    if (feature.properties.Capacity >= 5) {
                        return {
                            weight: 1,
                            radius: 4
                        };
                    }
                    if (feature.properties.Capacity >= 10) {
                        return {
                            weight: 2,
                            radius: 6
                        };
                    }
                    if (feature.properties.Capacity >= 20) {
                        return {
                            weight: 3,
                            radius: 8
                        };
                    }
                    else style2
                },

    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng);
    },
  }).addTo(map);

It looks slightly better, because the records has been distinguished both by weight and radius, however there is no default situation shown, that was descriubed in the else value. Although only 1st if responded. Another ones didn't contribute into this view, hence I have only 2 types of radius instead of 4.

enter image description here

Does anyone know how to solve this issue?

I want to have a full styled geoJSON by properties, but now I am suffering for a lack of default style.

I saw a few similar examples, but basically they doesn't match my situation.

EDIT:

Recently I tried stuff like this:

 function mystyle(feature) {
 var rad;
 if (feature.properties.Capacity = 3) {
   rad = 4;
    } else if (feature.properties.Capacity = 5) {
    rad = 6;
    }
    else if (feature.properties.Capacity = 18) {
    rad = 8;
    } else {
    rad = 1;
    }
    return {
    fillColor: '#ff4d4d',
    fillOpacity: 0.5,
    weight: 0,
    opacity: 1,
    radius: rad,
    color: '#ffffff',
    dashArray: '3'
   };
}   

 var johnlewis = L.geoJSON(jl, {
 style:mystyle,
    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng);
    },
   }).addTo(map);

but instead of the radius I have got changes with the border weight (weight). See the result on the map below: enter image description here

So it looks like the radius changes aren't supported in Leaflet are they?

Your Answer

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

Browse other questions tagged or ask your own question.