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)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay