Bill Parker Mapping

Creating a Leaflet Map

Part 3 - Symbology

Intro

My map now has 2 base maps and an overlay layer, along with the ability to switch between basemaps and turn the overlay layer on and off. But the overlay layer has just the standard symbology that comes with the layer and no popups to show you the data details. I need to add those so the user can find out more about the data.

Symbology

Again a good place to start on adding symbology is the Interactive Choropleth Map. It shows how to create symbology for a layer based on breakpoints,and how to add in a legend. The ESRI Leaflet example on styling polygons is also a useful place to look. I will show the code that I use to create the choropleth map using breakpoints.

Since I am using the L.esri.featureLayer method we will use the style option associated with that. Which means I need to define the value that goes with the style property. If I just wanted to pick a single color I could just define that in the by pushing an object to the style property.

L.esri.featureLayer({
	url: . . .,
	style: {color: ‘red’},

But that is too simple for this data as it shows no difference across the data. I want to have a color scheme that shows the differences in the percent positives in the zipcodes. I will need to create a function that takes the field from the feature layer and assigns a color to it. I can create the function inside the style option of the L.esri.featuerLayer() function as the ESRI Leaflet styling polygons example shows. That would look like this.

style: function(feature){
	if(feature.properties.PercentagePostiveTests >= 5){
		return {color: ‘#b30000’, weight: 1};
	} else if (feature.properties.PercentagePositiveTests >=4) {
    		return {color: "#e34a33", weight: 1}
  	} else if (feature.properties.PercentagePositiveTests >= 3){
     		return {color: "#fc8d59", weight: 1}
   	} else if (feature.properties.PercentagePositiveTests >=2) {
     		return {color: "#fdcc8a", weight: 1}
   	} else {
     		return {color:'#fef0d9', weight: 1 }
   	}
 };

The function is taking the feature layer from the API, which has its own properties that we can access, and get information from each of the different attributes. In examining the data tab on the Alameda County COVID-19 Percentage Positive Tests by Zip Code I can see the names of the different attributes and the data in each. Since I want to show the difference in COVID-19 percentage positive tests across the zipcodes I will use that attribute, feature.properties.PercentagePostiveTests, which will return that value for each zipcode feature in the function. I have chosen 5 ,4, 3, and 2 as my break points as anything above 5 is considered high and I want to see the levels below 5. My hex colors were chosen by going to colorbrewer2.org and picking a 5 class, sequential, color blind safe scheme.

This works great for displaying a choropleth map color ramp. And by using a color ramp that goes from light to dark red the viewer will get the idea that the darker red zipcodes have worse numbers. But still a legend would really help to show what those colors mean. To do that I need to go back to the Leaflet Interactive Choropleth map sample to see how to put in a legend.