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:
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.
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:
So it looks like the radius changes aren't supported in Leaflet are they?