1

I'm using Leaflet.js in a Vue project.

When I create the counties within a US State my GeoJSON looks like:

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "GEO_ID": "0500000US45045",
            "STATE": "45",
            "COUNTY": "045",
            "name": "Greenville",
            "CENSUSAREA": 785.12,
     },
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  -82.193006,
                  34.686303
                ],

And the code to generate the map

this.geoJsonLayer  = L.geoJson(this.geoSC, {
         style: this.statestyle,
         preferCanvas: true,
         onEachFeature: this.onEachFeature,
       }).addTo(this.map);

And

   statestyle(feature) {
      return {
      fillColor: this.getColorBrewer(feature.properties["CENSUSAREA"])     
    
    };
    },

getColorBrewer is a function to select a color based upon the value of the this.geoSC CensusArea data.

This all works fine IF the Census data is on the original GeoJSON object.

How do I use a separate object such as

 var Countydata = [{
        "GEO_ID": "0500000US45045",
        "STATE": "45",
        "COUNTY": "045",
        "name": "Greenville",
        "LSAD": "County",
        "CENSUSAREA": 785.12,       
      },
    {
        "GEO_ID": "0500000US45047",
        "STATE": "45",
        "COUNTY": "047",
        "name": "Greenwood",
        "LSAD": "County",
        "CENSUSAREA": 454.726,
       
      },
 

Currently I'm doing:

   statestyle(feature) {
    let newCensus = this.Countydata.find(el => el.GEO_ID=== feature.properties.GEO_ID);

      return {
      fillColor: this.getColorBrewer(newCensus ["CENSUSAREA"])   
    };
    },

Is there a standard that I should be following?

1
  • It would be probably more economic to do this in onEachFeature function and store value in some feature property, so search would be executed only once for each feature at load time, and not at each feature styling call.
    – TomazicM
    Feb 3, 2023 at 17:23

0

Your Answer

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

Browse other questions tagged or ask your own question.