DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

CodingWith-Adam
CodingWith-Adam

Posted on

Create a Covid-19 map using react leaflet, hooks and bootstrap - Choropleth map

I’m excited to be sharing this tutorial with you. We will be creating a Covid-19 Choropleth map using React Leaflet, React Hooks, GeoJson, Papa Parse, Bootstrap and flexbox. I will take you through every step of creating this application.

This Covid-19 map will display confirmed cases from around the world. Countries with the most cases are shown in dark red and those with fewer cases have a lighter color. This map is interactive and lets you click on each country for more details.

We will even be creating a nice legend to place at the bottom of the map. If you're wondering what this type of map is called, it’s called a choropleth map. It uses different shading and color to display some statistic, in this case we are using covid-19 confirmed cases.

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

Β 
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content