As a beginner in coding, I must apologize if a similar question has already been asked. I've spent days searching but haven't found the right combination of terms to find examples for my scenario.
I am exploring various small use cases of different web-mapping services to create color-coded maps of parcels based on land use. Specifically, I am working with Leaflet to map parcel data stored as a JSON object named downtownParcels_all.json. This file contains geometry and attributes for each parcel 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...
I intend to color the parcel polygons based on properties.LandUse. Using this example as a guide, I encountered issues adapting the styling function from quantitative to qualitative data. The parcels appear without conditional styling despite not receiving an error message.
Below is my code attempting to style parcel polygons based on the Land Use data stored within a JSON object. Please note that I have kept the term "state" in variable names for reference 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: '© <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 you have any suggestions on improving my current code or can help me achieve categorical symbolization more efficiently, I would greatly appreciate it. I'm happy to clarify anything if needed. Thank you!