Styling categorical json data with Leaflet

Question

Because of my novice coding level, I apologize in advance if a question similar to the one below has been asked. I've searched a couple days and have been unable to put the correct combination of terms together to find examples of the scenario described below.

I am trying to demonstrate various small use cases of several web-mapping services (I'm using the term services very generally). For each service I'm trying to make a map of parcels that are color-coded based on land use. In this instance I am trying to use Leaflet to map the parcel data. I have this data formatted as a json object called downtownParcels_all.json. It contains the geometry and attributes for each parcels. It looks like this:

{ "type": "FeatureCollection", 
"features": [ { 
    "geometry": 
        { 
            "type": "Polygon", 
            "coordinates": 
                [ 
                    [ 
                        [ -84.55903531544767, 38.20711817093237 ], 
                        [ -84.55905917105294, 38.20683120640012 ], 
                        [ -84.55925392867115, 38.20684358736447 ], 
                        [ -84.55922953052168, 38.2071413284724 ], 
                        [ -84.55903531544767, 38.20711817093237 ] 
                    ] 
                ] 
        }, 
"type": "Feature", "properties": 
    { 
        "Complete_A": "121 E JACKSON ST", 
        "MailAddres": "121 E JACKSON STREET", 
        "ParcelID": "123-45-6", 
        "GIS_MapID": "123-45-678.000", 
        "Acres": 0.13, 
        "Name2": null, 
        "MailAddr_1": "GEORGETOWN KY 40324", 
        "Name1": "SMITH JOHN", 
        "LandUse": "11-1 Single Family" } 
},

...etc...

Based on properties.LandUse I'd like to color the parcel polygons. If been using this example as my guide because it works very much the way I'd like my final product to work. There is a bit of difference, because while the example from which I'm drawing inspiration uses quantitative data (% vaccination claims rate), mine uses categorical, qualitative data (land use). In creating my version of the map, adapting the styling function to move from quantitative to qualitative data seems to be causing me problems. I don't receive an error message, but the parcels are drawn without the conditional styling.

Below is my code for trying to style the parcel polygons based on land use data stored within a json object. Please note that I've maintained term "state" in my variable and function names just for general ease in referencing back to the inspiration example:

var map = null;
var state_layer = null;
var states_geo_json = null;
var states_data = null;

// Loads data, initializes map, draws everything.
function start(){
  $.getJSON("data/downtownParcels_all.json",function(us_states){
    states_geo_json= us_states;
    initialize_map();
    draw_states();
  });
}
start();
/* Create map, center it */
function initialize_map(){
  map = new L.Map("map", {})
    // Lebanon, KS, Zoom level 4.
    .setView(new L.LatLng(38.212, -84.556), 15)
    .addLayer(new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }));
}
// Draw all the states on the map
function draw_states(){
  state_layer = L.geoJson(states_geo_json,{
    style: state_styles,
    //onEachFeature: state_features,
    updateWhenIdle: true
  });
  state_layer.addTo(map);
}

// Styles each state, populates color based on data
function state_styles(feature){
  return{
    stroke: true,
    fillColor: state_color,
    fillOpacity: 0.7,
    weight: 1.5,
    opacity: 1,
    color: 'black',
    zIndex: 15
  };
}

function state_color() {
  for (var i = 0; i < us_states.length; i++) {
    var landUse = us_states[i].properties.LandUse;
    switch(landUse) {
      case "11-1 Single Family": return "#ffffb2";
      case "11-2 Multi-Family": return "#fed976";
      case "11-3 Apartments": return "#993404";
      case "12-1 Commercial retail": return "#b30000";
      case "12-2 Commercial wholesale": return "#fe9929";
      case "12-3 Services": return "#e34a33";
      case "12-5 Government": return "#f768a1";
      case "12-6 Institutional": return "#045a8d";
      case "12-7 Educational": return "#a6bddb";
      case "16-1 Mixed use": return "#810f7c";
      case "21-1 Agricultural": return "#31a354";
      case "99-1 Vacant": return "#f7f7f7";
      case "99-4 Parking": return "#636363";
    }
  }
}

If anyone has any guidance on what I'm missing in my current code or advice on how to better accomplish this categorical symbolization I would much appreciate it. If I've been unclear about anything, I'm happy to clarify. Thank you in advance.

Answer 1

Okay, so tracking back in the code, you have the line

fillColor: state_color,

This says fillColor is the function state_color. This should be changed to

fillColor: state_color(feature),

Which says fillColor is the color returned by the function state_color, for this feature.

Then, in the state_color function, you don't take an argument. You should: it should be

function state_color(layer) {

And you would get rid of the for loop in the state_color function, since it is getting one feature, not many, and where it says var landUse = us_states[i].properties.LandUse;, it would be something like layer.feature.properties.LandUse.

That should get you started.