Covid-19 Map: Complete Tutorial using react leaflet, hooks and bootstrap - Choropleth map

Опубликовано: 24 Февраль 2025
на канале: Coding With Adam

20,737

362

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

If you enjoy my videos please subscribe, like and share.

Links

Github Project:
https://github.com/CodingWith-Adam/co...

Demo working solution
https://codingwith-adam.github.io/cov...

Bootstrap
https://getbootstrap.com/

Leaflet
https://leafletjs.com/

React Leaflet
https://react-leaflet.js.org/

GeoJson file datahub web page
https://datahub.io/core/geo-countries

GeoJson direct link to file
https://datahub.io/core/geo-countries...

ISOA3 country codes
https://en.wikipedia.org/wiki/ISO_3166-1

Wikipedia GeoJSON
https://en.wikipedia.org/wiki/GeoJSON

formatNumberWithCommas = function (number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};