DEV Community

CodingWith-Adam
CodingWith-Adam

Posted on

2

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)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay