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:
github.com/Cod...
Demo working solution
codingwith-ada...
Bootstrap
getbootstrap.com/
Leaflet
leafletjs.com/
React Leaflet
react-leaflet....
GeoJson file datahub web page
datahub.io/cor...
GeoJson direct link to file
datahub.io/cor...
ISOA3 country codes
en.wikipedia.o...
Wikipedia GeoJSON
en.wikipedia.o...
formatNumberWithCommas = function (number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

[@CodingWithAdam]

Attention: (Attempted import error: 'Map' is not exported from 'react-leaflet'.) This tutorial was created with an older version of React leaflet version 2.7.0. To fix this error use MapContainer instead of the Map Component. For example
import { MapContainer, GeoJSON } from "react-leaflet"; instead of import { Map, GeoJSON } from "react-leaflet";
and in the JSX use

[@hassanganjavi3113]

I had the problem and I fixed it up with this new tag

[@leelonghui]

I find your tutorial very good in the sense that you explicitly explain concept and idea before starting to code. It's very helpful for newbies like me.

[@CodingWithAdam]

Thank you for the feedback! That is great to know. I'm glad that my explanations are helping you understand the concepts. I will continue to do more of the same :)

[@bhys570]

You really deserves millions of views for this awesome work

[@CodingWithAdam]

Thank you! I really appreciate the great feedback!!! 😁 I’m really happy you enjoyed the video.

[@sautante]

Thanks for such a clear concise video, I was struggling to add covid data separately onto each layer for the map but putting it into the feature properties made it so much easier to access!

[@CodingWithAdam]

That’s fantastic sh2345! I’m really happy the video helped.

[@0997udan]

Man! I subscirbed to you when you had 546 subscribers! i was the 547th! you are the best! I learned Javascript because of you. I'm a child: 10 years old! kids watch you to!

[@CodingWithAdam]

That’s awesome!!! I’m happy that I was able to help you learn JavaScript. Thanks for being subscriber number 547.

[@adithyakalivarapu3898]

Thanks for the tutorial Adam, really helped me. One question , that when we click on a country it should call some user written function.. is that possible?

[@CodingWithAdam]

You’re welcome! For sure you can use the onEachFeature method to invoke a user defined function for a geo.

[@jodyswartz7230]

Great Tutorial Adam! I would like to know how can you add state, that you can use the country data on parts of the map. legend, etc..

[@CodingWithAdam]

Thanks Soho, in the tutorial we manage state with hooks. This data is then used for the various parts of the application map legend etc.

[@corymarshman6657]

It looks like the Map component exported from react-leaflet has been changed to MapContainer.

[@CodingWithAdam]

Thanks Cory, the tutorial was created with react leaflet version 2. I plan to make a new tutorial using version 3 in the near future.

[@corymarshman6657]

@@CodingWithAdam I changed that one component and it all worked.

[@CodingWithAdam]

That’s great Cory. Glad you got it working! Also great tip for anyone else taking the tutorial.

[@Drususlau]

hey adam, thanks for your tutorial. i got an issue, is that when each country is clicked, the popup displays the country's name along with the infection count. but I cannot properly display the infection count, returning undefined instead of a number. i found out that solution is that If I add any lines to the code that throw an error, remove the lines, and re-render the page, the popup can return the values. However, subsequent re-renderings would introduce the same problem. do you have any idea?

[@shoorick77]

26:41 How did you quick reformat line of code into the block? I've tried to apply Format selection (Ctrl+K, Ctrl+F) but without any effect.

[@CodingWithAdam]

Great question I’m using a VS Code extension called prettier that formats on save. I have a video on how to install and configure it. th-cam.com/video/__eiQumLOEo/w-d-xo.html

[@deepakchacko5585]

Thank you so much !

[@CodingWithAdam]

You’re welcome! Glad the video helped!

[@deus3404]

GREAT TUTORIAL MAN! KEEP EM COMING!

[@CodingWithAdam]

Thank you Deus!

[@thango209]

Thank you very much

[@CodingWithAdam]

You’re welcome!

[@harryc9739]

Adam, Thanks for sharing. It is a good job.
What if I want to do is like the color change in real-time when the total cases are increasing?
How can I do? Will it re-render all countries or just certain countries with changed total cases?

[@CodingWithAdam]

Thank you Harry C. Yes it's possible to do this in real time and you can update only the ones that change. However sometimes the easiest solution is the best solution which is to click refresh or use a timer to refresh the page.
If you are interested in changing the color in real time you can do the following. When the onEachFeature method is called store the layer object as part of the country object state. You can then use the layer object to make changes to the color of the country. To update the case counts and color countries you could use setInterval to check for new case numbers every few minutes. I hope this helps :)

[@sherenreginapingkan5355]

Hi Adam, thanks for the tutorial!
I'm a newbie and had a question for this. Can we create a choropleth map with leaflet without using react? Only using html, css, bootstrap and php?

[@CodingWithAdam]

Yes you can. You can use the leaflet library. It’s a JavaScript library. There are also many other map libraries you can use. 😀

[@therodri595]

nice video adam, personally i have some problems with react-leaflet draw, hope i can contact you for any help plss

[@CodingWithAdam]

Thanks Rodrigo, feel free to ask any questions here and I'll do my best to answer them.

[@elvin7596]

nice video, thankyou sir..

[@CodingWithAdam]

You’re Welcome :)

[@RahulGupta-pj1ux]

Hey Adam great video.! I had a question, what if I want to filter the center prop of MapContainer based on Country selected by User? I mean suppose a user selects Canada from a drop down of countries, then Canada should be at center of viewpoint. I know, there are methods like panTo(), flyTo() but I don't know where/how to apply them. Please help.

[@CodingWithAdam]

Thanks Rahul. That is a great question! In your state you will have to have a list of features or coordinates of each country. I have not tried this yet but that’s the approach I would take. Let me know if you get it working.

[@pranav854]

43:00 color and country code

[@haythamaldamen3578]

Thank you

[@CodingWithAdam]

You’re welcome!

[@hardwired66]

coool.sir

[@CodingWithAdam]

Thanks!

[@chikkugeorge2871]

Hi adam...I want to know one thing whether we can implement wind animation on reactleaflet map using webGl...?have u done anything related to that so far...

[@CodingWithAdam]

Great question, I have never tried that. I did a little bit of googling for canvas wind animation. This might be useful www.npmjs.com/package/wind-js-leaflet

[@hassanganjavi3113]

Hi Adam Thanks for this great tutorial
I did the same steps you did and yeah definitely works
But now I want to take it further and the scenario is this:
I want when the user clicks on a particular country we redirect to a new page and drew the map of that specific country and write all Covid information that country has
Now : is there a way to drew the map of a particular country?
I have the country map JSON file and aware of the features
if you please help me☺☺

[@CodingWithAdam]

Hi Soma, good question. Were you able to solve it?
If you display a new component you could consider using the Country code to retrieve the country from another API or another GeoJSON file.

[@SRicPerry]

Hey, I might have missed it, but where did you get the data for the GeoJson for the Countries? Was it all open source?

[@houwayda9254]

how fix this error please Should not import the named export 'features' (imported as 'features') from default-exporting module (only default export is available soon)

[@CodingWithAdam]

Not sure if I understand the error message. Could you please paste the message here.

[@Lordaniel-K]

@@CodingWithAdam ERROR in ./src/tasks/LoadCountriesTask.js 32:28-43
export 'features'.'length' (imported as 'features') was not found in '../data/countries.json' (possible exports: 0, 1, 10, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 11, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 12, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 13, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 14, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 15, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 16, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 17, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 18, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 19, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 2, 20, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 21, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 22, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 23, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 24, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 25, 250, 251, 252, 253, 254, 26, 27, 28, 29, 3, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 4, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 5, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 6, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 7, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 8, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 9, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99)
ERROR in ./src/tasks/LoadCountriesTask.js 33:26-34
Should not import the named export 'features' (imported as 'features') from default-exporting module (only default export is available soon)
ERROR in ./src/tasks/LoadCountriesTask.js 48:22-30
Should not import the named export 'features' (imported as 'features') from default-exporting module (only default export is available soon)

[@houwayda9254]

@@CodingWithAdam ERROR in ./src/components/tasks/LoadCountriesTasks.js 8:15-23
Should not import the named export 'features' (imported as 'features') from default-exporting module (only default export is available soon)

[@souravytofc]

@@CodingWithAdam I am facing the same issue. Looks like the module you're importing from only offers a default export, not named exports like features. Please help resolve this issue.

[@allagillarbajs]

How do you upload your app to the internet so others can connect to it?
Any tutorial that you would recommend?

[@CodingWithAdam]

Good question B A. I created a tutorial that shows how you can deploy a react application to GitHub pages. Let me know if it helps! th-cam.com/video/laXUruhdX90/w-d-xo.html

[@Thomas-sl9vx]

What keyboard shortcut did you use to quickly line up your code at 18:52?

[@CodingWithAdam]

I use a VS Code extension called prettier to format code when I save a file. Checkout my video on how to setup and configure prettier th-cam.com/video/__eiQumLOEo/w-d-xo.htmlsi=XhftbEs5Y2THx35B

[@juanpablogil59]

Bro do you know why when i try to update a state in the On click function of leafletjs with the useEffect for the load, the update of the state works but not the color change of the layer?

[@iMaxSkate]

Hey Adam I get the following error at minute 36 when the map is implemented for the first time. Do you have any idea why this is happening?:
./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
> const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;

[@CodingWithAdam]

Instead of Map could you try using MapContainer. The tutorial was based on an older version of react leaflet. Let me know if this works

[@nikhildeepakkanyal9697]

how do i run this code? can u give comands to put to run the code?

[@Nat-mv4os]

hi, thanks for the tutorial. i want to ask what if the csv file has already been downloaded and no need to load from an URL? how should I amend the code? Would be nice if someone can help, thank you!

[@Nat-mv4os]

problem solved! Thank you so much for the tutorial, it was really really awesome!!

[@CodingWithAdam]

You’re welcome. Since it is a front end application it would need to come from a url. If it is a server side app or console app it could come from a location on disk.

[@lsagar]

Why do I get Map is not exported from 'react-leaflet' error.

[@CodingWithAdam]

Make sure map is in curly bracket import {Map} from “react-leaflet”

[@lsagar]

Found the cause of the error. react-leaflet 3.0.0 exports MapContainer instead of Map. I reverted back to 2.7.0 and it works fine. If anyone comes across this error, this might help

[@lsagar]

In your package.json, change version of react-leaflet from 3.0.0 to 2.7.0 and hit npm install

[@CodingWithAdam]

That’s right sagar version 3 of react leaflet was recently released and this is built with v2. Thanks for posting the information on how to use version 2 😁

[@marynakosiv3750]

using MapContainer helped me w 2.7.0 version