Covid-19 Map: Complete Tutorial 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
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, ",");
};
En esta página del sitio puede ver el video en línea Covid-19 Map: Complete Tutorial using react leaflet, hooks and bootstrap - Choropleth map de Duración hora minuto segunda en buena calidad , que subió el usuario Coding With Adam 12 septiembre 2020, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 21,050 veces y le gustó 363 a los espectadores. Disfruta viendo!
