How to create a choropleth map with GeoJSON and Google Maps- 6 mins
Choropleth maps are straight up awesome at displaying statistical information for a given area. To paraphrase wikipedia, they are thematic maps which have areas shaded or patterned in proportion to a statistical value for that area. We will walk through Google Maps and GeoJSON to create and display a choropleth map like this one.
The GeoJSON file will use the geometry guidelines for each given area displayed. Plus, the file should have the statistical info you are going to represent in the properties field of each area. For example, I am using a GeoJSON file that has all the US states and I have added the property of COLI (Cost of Living Index) to each state. The object for Arizona in the array of state objects that I am using looks like this:
Setting up Google Maps
First, make sure to add the Google Map api script with all your other scripts in your index html file. Now you will need to create a div on the html view you want to display the map and give that div an id (I typically give it an id of map-canvas). You will want to give this div a height and width value in your css file. Next, you will want to setup the map options. Google Maps has bunch of map options so please read their documentation to configure the map to your liking. Finally, you will set the map by calling the Map function with the google maps api and pass in the ID of the html element and the map options.
Adding the GeoJSON Data Layer
After Google Maps is beautifully displaying on your html, you will want to add the GeoJSON data layer to get the choropleth map. First, create a variable that will hold the data and call the google maps Data function. Next, you will call the function loadGeoJson on that variable that was just created. After that you will want to the set the map with the variable of the layer that has your GeoJSON data. Note that the final step of setting the data layer by calling setMap will need after any styling you want to add which will be described in the next section.
Styling the GeoJSON Data Layer
Now we will want to style or GeoJSON to show the awesomeness of the choropleth map. First we are going to call the setStyle function on the data layer variable. In this function we will return the styling, for the fillColor property we will call another function that we create (lets call this getColor) that will return a color to style that area based on the value of the property.
Adding Listeners for More Styling
Google Maps has cool functionality that allows us to add listeners to each property of our GeoJSON file. We can add mouseover, mouseout, click, and more. Here is an example.