I want to render different fillcolor in the different state of geojson . html
<l-geo-json :geojson="geojson" :option="geojsonOptions" :options-style="styleFunction"></l-geo-json>
JavaScript vue2
//the "geojson.features[statesNumbers].properties.totalDeath "is every state data of US
computed:{
geojsonOptions(){
return {
onEachFeature: this.onEachFeatureFunction
}
},
styleFunction(){
const fillColor=this.getColorRed(this.geojson.features[statesNumbers].properties.totalDeath);
return () => {
return {
weight: 2,
color: "#ECEFF1",
opacity: 1,
fillColor: fillColor,
fillOpacity: 1
};
};
},
onEachFeatureFunction(){
}
},
different fillerColor
methods:{
getColorRed(d){
return d >84000 ? '#800026' :
d > 70000 ? '#BD0026' :
d > 56000 ? '#E31A1C' :
d > 42000 ? '#FC4E2A' :
d > 28000 ? '#FD8D3C' :
d > 14000 ? '#FEB24C' :
d > 7000 ? '#FED976' : '#FFEDA0';
},
}
I want to render different fillcolor in the different state of geojson .