0

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 .

gingie
  • 1

0 Answers0