The Leaflet mapping library is a great way to make interactive maps. If you've already completed Make a Web Map with Leafet then you might want to try something a little more advanced - like creating an interactive choropleth map!
The World Health Organzation recently released data showing the incident rates of measles in countries around the world. We can use this data to create a map which visualizes the incident rates of measles in European countries. The map below colors individual countries in Europe by the 12 month rolling incidence of measles per 1 million total population (the data was released in 2019).
The first step is to create a simple Leaflet map. If you need help doing this then you can use the Leaflet Quick Start Guide tutorial on the Leaflet website. Your index.html file needs links to the Leaflet JavaScript file and the Leaflet CSS file. You will also need to add a div element with a 'map' id where you want your map to be. (If you are following the Leaflet Quick Start Guide you don't need to add the "Markers, circles and polygons")
We are now ready to add some data to our choropleth map. You might want to read the Interactive Choropleth Map tutorial on the Leaflet.js website if you've never made a choropleth map before..
Once we have created a simple Leaflet map we need to add our data. We need the data to add European country polygons to our map. We also need the measles incidence rate in each country (which we will use to color each country). The European country polygon data used in my map is Natural Earth Data. I downloaded the GeoJSON file with this data from geojson.xyz (listed as 'admin 0 countries'). The measles incidence rate data comes from the World Health Organization.
The GeoJSON file from geojson.xyz includes a lot of data that we don't need so I deleted all that data using geojson.io. In the 'table' section of geojson.io I deleted all the columns that we don't need and then added a column where I added the measles incidence rate for each country. The fininished GeoJSON data for the map is held in the countries.js file. We need to add a link to this file in our index.html You can see how that is done in Line 15 in the embeded code above.
To load the country polygons from our data file we add the countriesData to our map
L.geoJson(countriesData).addTo(map);
If you look at line 60 in the code above you can see how we have also applied a little styling to the country polygons.
L.geoJson(countriesData, {style: style}).addTo(map);
This style is defined in the 'style' function in our code. The colors for the individual countries is defined in the 'getColor' function based on the data in the 'density' value in the countries.js file.
Our map is still very basic. It would be nice if our map users could hover over a country on the map to view the actual incidence rates of measles in that country.
1. To improve the map try to add an event handler which displays the measles incidence rate when you hover over a country.
2. Add a legend to the map to show the values of the different colors used.
If you need help to do this refer to the Interactive Choropleth Map tutorial.
If you want you can also take a sneak peak at the finished map