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?

1 Answer 1

0

Using L.Circle instead of circleMarker allows you to set the radius as part of the pointToLayer fuction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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