Let us Build a Choropleth Map using React-Leaflet Together.
Are you a beginner in GIS web development? Are you interested in building web map applications using geospatial data? worry not , here is a simple step by step guide to get you started.
- What's React-leaflet?
React is a JavaScript framework used to create interactive user interfaces using components. Leaflet on the other hand is an open-source JavaScript library for creating interactive web map applications. React-leaflet combines the two, we use React components to create Leaflet maps.
- What's a Choropleth Map?
It is a type of thematic map whose statistical data is shown by different color ranges mostly the darkest color indicating greater amounts of data while the least dark colors indicating the least amount of data being quantified. The colors used on the map are in relation to a data variable, sometimes patterns and different shades are used.
- Project definition
We shall build a web map using Kenya population national census 2019 data , our map will be interactive, the user should be able to hover or click on a county to know the number of each gender in that county and its total population.
Here is the link to the geoJSON file used in this project(Click here)
- Project setup
A basic understanding of JavaScript ES6+ and ReactJS is needed, we will use high order functions eg map and arrow functions.
- Building our application
creating a react app — create a folder in a location of your choice on your computer, I shall create mine on my desktop and name it kenya-2019-census-web-map, then I will create a react app within this folder
> cd Desktop
> mkdir kenya-2019-census-web-map
> cd kenya-2019-census-web-map
> npx create-react-app .
> npm start
this is what you should see in the browser when the server runs
We shall delete all the other files within our src folder, keep the App.js and App.css but remove all the code within App.css. In the src folder create a components folder, in the components folder lets create two files Map.js and Legend.js. Still in the src folder lets create a folder called data to hold our geojson file which should be saved with a .json extension not .geojson. This is how your app should look like.
to run the application successfully, make sure to import and return our child components(Map.js and Legend.js) in the parent component(App.js)
import React from 'react';
import './App.css';
import Map from './components/Map';
import Legend from './components/Legend';const App = () => {
return(
<div className='container'>
<Map/>
<Legend/>
</div>
);
};export default App;
Installing dependancies — Since we are using leaflet and react leaflet, we should have them installed.
> npm i leaflet
> npm i react-leaflet
Displaying maps — Within our Map.js file we import Tilelayer, MapContainer and GeoJSON from react-leaflet, we should also import the leaflet styling as leaflet/dist/leaflet.css or have the leaflet cdn link in our index.html file in the public folder
> import 'leaflet/dist/leaflet.css';
> import {MapContainer, GeoJSON, TileLayer} from 'react- leaflet';Within Map.js file, we first set up our JSX code using our imports from react-leaflet. JSX basically helps us write HTML code within react apps. This is how your code should appear.
MapContainer , takes up several attributes the most important being style, the map should have a set height to display it is also important to set width , zoom, each map should have a set zoom value, higher zoom levels means that the map can show details of a smaller area eg a town, while lower zoom levels means that the entire globe extent displays on our map, and center to determine what location the layer should focus on when the map loads, our interest is Kenya thus we pick coordinates that fall at the center of Kenya.
TileLayer is the base map , in this case we are using a layer from Carto, there are a variety of layers to choose from. At this point when you save your code the application output should be as below.
Using our data — Our TileLayer is displaying as expected, now we should display our data too. First we import our data into the Map.js file, we can either import the whole data or destructure and import features only. Destructuring enables us to import the desired items from the data, in our case features holds all the data we need to display on our map. Our data looks as below when opened in a browser. Some of the properties include county, male, female, total etc. these are some of the attributes that should be displayed when each feature is either clicked or hovered over .
> import {features} from './data/data.json';or> import data from '.data/data.json';
To make use of our imported data. We use GeoJSON that we imported from react-leaflet earlier on. GeoJSON takes up several attributes but in our case we only require data(which returns data), style(for styling ) and an onEachFeature, onEachFeature helps us write a function to dictate what happens for instance when a feature on our map is hovered over. GeoJSON tag is placed in the MapContainer tags. The code below shows how our GeoJSON tag should look like.
{features && (
<GeoJSON data={features}
/>)}With the above code inserted in Map.js our updated output should be as below.
The next step is to set up fill color for our features basing on the density property as well as create onEachFeature function. The code below shows Map.js file with the above mentioned functionalities, each function has a comment to explain what the code does.
within the Legend.js file we give each legend item a style in relation to the assigned colors to the density ranges, this is how your code should look like.
At this point we are have achieved our goal, but a little bit of styling will make our application more presentable. we shall create new files within our components folder Map.css and Legend.css, all these files should be imported in our JavaScript files Map.js and Legend.js respectively. We shall also add some background color to our App.js file within the App.css, the codes below show how the styling files should look like.
After adding these styling to your application, your expected map output should appear as below.
I went ahead and hosted the application on netlify here is a live link to the app Kenya population web map
- Conclusion
I hope you have managed to build your application too, there are better practices of displaying our applications colors to make the application more dynamic, we shall practice this on my next article on map data filtering, in the meantime be sure to check on the react documentation just to have a clue on how to go about it, also checkout both the leaflet and react-leaflet websites to learn more about what you can do with them, this is just but the beginning to building your mega web map application. Ciao ciao😊😊
