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
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.
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 :)
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!
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!
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?
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. ua-cam.com/video/__eiQumLOEo/v-deo.html
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?
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?
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 :)
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?
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.
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.
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 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)
@@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.
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 ua-cam.com/video/__eiQumLOEo/v-deo.htmlsi=XhftbEs5Y2THx35B
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...
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
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?
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! ua-cam.com/video/laXUruhdX90/v-deo.html
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☺☺
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.
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;
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!
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.
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
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 😁
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
I had the problem and I fixed it up with this new tag
You really deserves millions of views for this awesome work
Thank you! I really appreciate the great feedback!!! 😁 I’m really happy you enjoyed the video.
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.
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 :)
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!
That’s awesome!!! I’m happy that I was able to help you learn JavaScript. Thanks for being subscriber number 547.
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!
That’s fantastic sh2345! I’m really happy the video helped.
Thank you so much !
You’re welcome! Glad the video helped!
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?
You’re welcome! For sure you can use the onEachFeature method to invoke a user defined function for a geo.
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.
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. ua-cam.com/video/__eiQumLOEo/v-deo.html
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?
GREAT TUTORIAL MAN! KEEP EM COMING!
Thank you Deus!
coool.sir
Thanks!
Thank you very much
You’re welcome!
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..
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.
It looks like the Map component exported from react-leaflet has been changed to MapContainer.
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.
@@CodingWithAdam I changed that one component and it all worked.
That’s great Cory. Glad you got it working! Also great tip for anyone else taking the tutorial.
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?
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 :)
nice video, thankyou sir..
You’re Welcome :)
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?
Yes you can. You can use the leaflet library. It’s a JavaScript library. There are also many other map libraries you can use. 😀
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.
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.
Thank you
You’re welcome!
Hey, I might have missed it, but where did you get the data for the GeoJson for the Countries? Was it all open source?
43:00 color and country code
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)
Not sure if I understand the error message. Could you please paste the message here.
@@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)
@@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)
@@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.
What keyboard shortcut did you use to quickly line up your code at 18:52?
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 ua-cam.com/video/__eiQumLOEo/v-deo.htmlsi=XhftbEs5Y2THx35B
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...
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
nice video adam, personally i have some problems with react-leaflet draw, hope i can contact you for any help plss
Thanks Rodrigo, feel free to ask any questions here and I'll do my best to answer them.
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?
How do you upload your app to the internet so others can connect to it?
Any tutorial that you would recommend?
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! ua-cam.com/video/laXUruhdX90/v-deo.html
how do i run this code? can u give comands to put to run the code?
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☺☺
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.
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;
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
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!
problem solved! Thank you so much for the tutorial, it was really really awesome!!
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.
Why do I get Map is not exported from 'react-leaflet' error.
Make sure map is in curly bracket import {Map} from “react-leaflet”
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
In your package.json, change version of react-leaflet from 3.0.0 to 2.7.0 and hit npm install
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 😁
using MapContainer helped me w 2.7.0 version