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, ",");
};
Watch video Covid-19 Map: Complete Tutorial using react leaflet, hooks and bootstrap - Choropleth map online without registration, duration hours minute second in high quality. This video was added by user Coding With Adam 12 September 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 20,737 once and liked it 362 people.