React Leaflet Tutorial using GeoJSON to Create a Map - For Beginner and Intermediate Developers
Вставка
- Опубліковано 28 сер 2024
- A React Leaflet tutorial to build a world map using GeoJson data. Through this video we will build functionality to display different colors for the countries on the map. You will learn how to style the various elements of the map. How to display a leaflet popup or tooltip and add events for click and mouseOver.
This tutorial uses version 2 of react leaflet.
React leaflet allows react developers to use components to build a leaflet map. We will be using the Map component, GeoJSON component to build a map.
To generate random colors for each country we will use 2 different approaches. One will be to set the opacity level i.e transparency level to show lighter and darker colors. The second will be to use an array of colors and utilize Math.random javascript utility function.
We will learn how to change the style of the map at different levels. At the css level to change the background color with .leaflet-container. Second is setting the map size on the Map component. Third, globally apply country colors on the GeoJSON component. Lastly change the color of individual countries drawn on the screen.
You will also be introduced on how to add click and mouse events to layers using react leaflet. This will be demonstrated by changing the country(layer) colors and displaying a pop with (bindPopup)
Github project from the video
github.com/Cod...
Snippets
Ocean background color
background-color: rgb(178, 210, 222);
Links
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...
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
How to get continousworldmap feature for geojson map created in this demo??
Thank Adam. This is the best tutorial for React-Leaflet-GeoJson.
You’re welcome! Glad you enjoyed the tutorial!
Great tutorial, thanks for this. I know this is a late comment but really appreciate your map tutorials!
Thank you. You’re welcome! I’m glad you enjoyed the tutorial 😁
omg, this is gold. this channels needs a million subs!! 😀😀
Thank You! sagar lama. I really appreciate your comment!
Thank you so much for this video! You couldn't even imagine how helpful it was.
You’re Welcome! I’m happy the tutorial helped :)
Thank you so much for this tutorial, helped me out a lot!!
Your welcome! Happy the tutorial helped!
one of best tutorials ever, thanksa lot for this!!
Thank you! 😁 You’re welcome!
omg , i likethe way how he is explaining everything !!!
Thanks! Darina :)
Thanks Adam! Video was very explanatory and objective! It helped me a lot in a real work problem :). Successfully subscribed to the channel.
You’re Welcome! Awesome, I’m happy to hear that the tutorial helped with a real work problem. Thanks for the subscribe Emerson.
Thank you for the video mate, is exactly what I was looking for.
You’re welcome! Glad it helped
Awesome tutorial! Help me a lot
Thank you! Happy it helped!
I really anjoyed this tutorial, i dont have a good level of english but i can understand you , thanks!
Thanks Fernando I'm glad you enjoyed the tutorial!
Best tutorial video about React Leaflet as long as i try to find !! After following this video i try some experiment, so when i click some layer it do this.setState, but i got a problem, my current color from mouseover is gone ! i already also adding setStyle when on click but it also still gone! had you meet this problem?
Much apreciate if i can get any advice from you sir
HI Deddy, glad you enjoyed the tutorial. When the state changes it might be reloading the react leaflet map. You could try and solve this by keeping track of the different colors for each layer. When the state changes i would check if the onEachFeature is called again. If it is I would try and set the color again from state that is tracked. This could be a global js variable instead of using react state. I hope this helps.
@@CodingWithAdam i got your points, thanks, i will try it soon
Amazing tutorial. Thank you so much.
You’re welcome! Happy the tutorial helped!
Dude thank you so much this was great! For me I couldn't change my background color by changing the .leaflet-container css so I had to instead add a "style" property to my component and pass in an object with background: "transparent". Anyway, super helpful video. Learned a lot
You’re welcome! Happy to hear you learned a lot. Also that’s great you were able to solve that issue. This video was made with an older version of react leaflet.
Thanks for this tutorial! Was looking for exactly something similar :D
You’re welcome! Happy the tutorial helped!
Awesome tutorial..... understood everything....... can anyone you me a hint on how can i show the map of that place when i click on it... like if i click on Usa i want to show the map of usa only with all its cities. thanks
Thank you. The geo json we use in the tutorial only has the countries without any child data like cities. One approach could involve using different geojson files that have more detail and are only for one country. So when you click a country you look up the file to use and then display a new page just with that country.
Thanks, Adam! Interesting topic and comprehensive tutorial
Thanks Serhii, I really enjoyed creating the tutorial.
Thanks for the video. It's very useful. My problem is I have around 20000 features and a scenario where I have to add or remove some of them, let's say 100. In that case, it rerenders all 20100 features instead of rendering only the new ones (unlike what any React component generally does). I am using key here to update the data (otherwise GeoJSON will not update the data) which is generated randomly. e.g.
{geoJSONData.length > 0 && (
)}
You’re welcome. That’s a great question. You could try and work around react by updating the features directly. As the features are created store them in an array and update them directly instead of going through react.
Thanks, Adam. You deserve a subscribe! 😄
i thought this was a hard thing to make: leafletjs.com/examples/choropleth/
Thanks Kevin
If your interested I create a choropleth map in my Covid19 react leaflet tutorial ua-cam.com/video/4cliojOu3as/v-deo.html
That's awesome, thank you so much! I'm gonna watch this one for sure 😎
thank you for this tutorial!
You’re Welcome! Katya
awesome tutorial. your data seems to be rendering very fast. I am working with a 12 MB file and it takes seconds for the map to render. 1) what do you suggest to do to render faster? 2) can you make a tutorial using React-Leaflet and mapbox/supercluster? thank you for making this video. great work
Thanks Kainoa. You are correct my data does seem to load fast. I have checked and my file is 24mb. It's possible that something else might be causing your app to load slow. My data is on the same server as my web app which will make it much faster. If your data is on another slower that could be a cause. Making it local i.e part of your project could help. I hope this helps.
Thanks I will look into mapbox and supercluster it sounds interesting.
Dear Adam, nice to follow your instruction, I am struck on 21:12, it doesn't tell any error but it can't sight the map like you do. Do you have any idea?
I had the same thing. If you downloaded the data from the link, it was as a geojson. However, in the tutorial he is using './../data/countries.json', so it was not detecting the file. I changed the name of the data from countries.geojson to countries.json and it worked.
What if i want to add a search button in it and when i search a country by its name , that particular country gets unique color?
That’s possible to do. You would have to store all the countries layers. Then when you want to change the color find the layer for the country it represent and change the color.
How to show country name in the layer background. now showing as a popup or on click. I wanted to show the country name by default.
Good question. I believe this could be done by adding a tile layer to the map. I don’t have the details on how as I have not tried this yet. I hope that this helps :)
@@CodingWithAdam thanks for your advise
Very helpful!
Thanks Franchyze923
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;
i just dont understand what i need to do with this now ....this error is not going
Hello, really a helpful video, thanks a lot! Can you also a bit help with unusual case? So when we click new country we set style to it and color. And how can I achieve such functionality -> when I click new country, I get it colored, but previous country style sets to default one. So I mean I have only 1 colored country in 1 time, not many.
Thank you Roman. Great question. when on each feature is executed capture all the layers in an array and store in the state. Then when the click event is fired for a layer loop over all the layers and set it to the default color. Lastly set the color for the current layer. I hope this helps.
Hey Adam! Great video and very useful. I am currently using this in a school project, but i need to change the color of a specific country when i click anywhere on the screen or press a button. Any ideas on how to select a country and add a event to it?
nice work.....but why class??? you could used functional component
Thanks, great to have practice with both functional and class based components :)
Its awsome..
Thanks Sharon!
Hi Adam, I have an issue when i add react-leaflet-heatmap-layer in Map with GeoJson, the zIndex of map is overlay heatmap layer. But it work correctly with TileLayer . How can I fix it? Thank you very much for sharing.
That’s a great question however I have not used the heat map layer and cannot not answer that at this time. I hope you find your answer.
Thanks for the tutorial. Just a few questions. Is there a way to disable double click to zoom and is there a way to save modified GeoJson and later import it?
You’re welcome Johnny. I have not tried this yet but you can try and add doubleClickZoom={false}. As for saving a file that is much more complicated. This would typically be done on the server side. All the code here in the tutorial is client side. This stack overflow post might help with trying to do that work on the client side stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
You could also consider storing the application state locally in local storage. That way if you refresh the browser or close and open the browser it could load the state from local storage.
I hope this helps!
@@CodingWithAdam Will take a look into it! Thank you!
You’re Welcome! Glad to help
@@CodingWithAdam When the country is changed color, which data should be accessed to retrieve that data? The data in 'data = {countries.features}' is changed right?
Good stuff, subbed
Thanks! Trace Tidings
Hi! How to change the whole map fillColor by selecting input color? I did it, but it works only one time and doesn't apply next changes
Fantastic question, in order to achieve this you will have to make a list of layers. Then when the state changes you will have tell each layer to set its color. To do this define a array in your component and store each layer in that array when oneachfeature is called. I might make a video on this as it’s a common question and not easy todo. I hope that helps
Hello Adam. I have a doubt. I'm importing the map from an API, but it is an API from Python, using flask. So I can´t import mapData, I don1t know how to proceed with this, could you help me?
Hi Gustavo, as long as the map data is in the correct format you should be able to pass it to react leaflet as geoJson. I have not used flask but you should be able to make an endpoint that you can call from react that gets the data from the python api.
Hello Adam, great tutorial.! I want to display name of country as annotation but not using marker/popup. It should look like the country/district name on OSM basemap. Is there a way to do this??
Thanks Rahul, I have not tried that yet but you might want to look at adding a TileLayer to display country names.
Is is a wonderful lesson, I have tried to follow you, but on 8:59 it said missing semicolon (3:5). I don't know where is that. can you instruct me please, here is my code
import React, { Component } from "react";
class MyMap extends Component {
state = { };
render () {
return (
May Map
);
}
}
export default MyMap;
Thanks Yav Net. This codes looks ok. The error might be on a different page like index.is or app.is. If you can post the full error message here I can have a look.
@@CodingWithAdam Thanks, now I have fixed, but other trouble is coming, my developer tools said error, and I don't know how to fix, do you have any idea?
That’s great. Please post the error. Is the error in chrome developer tools or visual studio code?
@@CodingWithAdam I don't know why, can do you have any ideas with this error: [HMR] Waiting for update signal from WDS...
MyMap.jsx:8 Object
localhost/:1 Uncaught (in promise) Object
index.js:1 Uncaught (in promise) Object
DevTools failed to load SourceMap: Could not load content for chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/intercom-link-expand-loader.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
I have followed a long with you but it is said like below, so how I fixed it?
./src/index.js
Module not found: Can't resolve './reportWebVitalsreportWebVitals.js' in 'C:\Users\Admin\leaflet-map\src'
Bro youre so great
Thank you! 😊
Hi Adam, thank you for the video, was really helpful. I just have a question, how can I recenter the map if the map isn't more centered?
You’re welcome! Great question. When you first render the map you can pass in the center prop. However it can not be changed after the map is drawn to the screen. You can do it programatically. This article might help. stackoverflow.com/questions/64665827/react-leaflet-center-attribute-does-not-change-when-the-center-state-changes
Thank you for this tutorial! Though I am having trouble in the 17:34 mark of this video. I had encountered error in the 'Map' (imported as 'Map') was not found in 'react-leaflet'. Hope somebody can help me with this
Here is the solution.
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
@@CodingWithAdam Thank you sir! It worked! :)
Awesome! That’s great!
Nice one. do you have any examples using MapContol (the latest version does not support Map), in this example refer to Map, also I am not getting proper zoom any suggestions
Thanks I plan to make a new video for the later at version of react leaflet. If your is not working you might be missing the css styling
Hi Adam, is it possible to change color of the countries based on the data fetched from another api
Yes it’s possible to change the color based on values from an api.
Bro very good tutorial, i have two questions, how can i just show one country? for example i just one to show USA. And the other is can i have something like active? if you click in one layer it changes the color but if i click in other it go back to the previous color and the one that i clicked change to the color,i don't know if you can understand me. Thanks for the video of course.
Your welcome Juan. Great questions. I have not tried to display one country yet. When I try this I will let you know. Having active color could be done. During on each feature you would have to store an array of layers. Then when you select one country you can loop through all layers and set them to the default color then set the color on the selected country. I hope this helps :)
@@CodingWithAdam click: (event)=>
{
if(counter>0){layerBe.setStyle({fillOpacity:0.5})}
event.target.setStyle({fillOpacity:0.8});
layerBe=event.target;
counter=1;
}
});
Without needing the array this works perfectly, do you think that is better like this or with the array? and let me know ;) thanks.
And if you wanna do with colors, just need to put it in the setStyle({fillColor:layerBe.fillcolor})
That’s perfect, your way is better. Great job! Juan
Hey can you explain, how can I create water supply map???
thanks Adam, it's really useful! Do you have any idea how to show the country name on the map? i was trying to use the bind as you did with Popup window, but it didn't work...
Hi Maggie, I’m glad you enjoyed the tutorial!
Is the pop up window showing? If it is showing and it is blank it sounds like you have typo when getting the country name. it should look something like this:
const countryName = country.properties.ADMIN;
console.log(countryName);
layer.bindPopup(countryName);
Also you can take a look at the complete solution on github: github.com/CodingWith-Adam/geoJson-map-with-react-leaflet
If you any more questions let me know.
Keep on coding :)
@@CodingWithAdam Thanks Adam, ya there was a small typo ... now it fixed. I'm wondering if there's a way that can connect the map with the chart.js in react, that really bothers me a lot tbh...
@@shunshundd That's fantastic I'm glad you solved it :)
For sure you could also add chartJS. In a previous video I used ChartJs and Covid-19 data. Here is the video: ua-cam.com/video/t3RKOrNBWFM/v-deo.html
I'm also working on a new video that will use the same GeoJSON to display Covid-19 data on a react leaflet map.
@@CodingWithAdam Cool I'll go check it, thnx a million Adam!
@@shunshundd You're Welcome! :)
I have this error in typescript for using mapData.features: "Property 'features' does not exist on type '{}' " . who knows how can I solve that
hey adam i am able load map with your data but not able to load map with my geojson data :(
Hi Bikram, sorry to hear that, it’s possible that your geojson file might be in a file that is not supported.
Can we display text on the country instead on the click?
Hi TruthSeeker, I have not tried this yet but you need to use something called a div icon in leaflet. I found this npm package www.npmjs.com/package/react-leaflet-div-icon
this stack overflow post might also be helpful
stackoverflow.com/questions/50856182/add-text-inside-leaflet-rectangle
how can I get the geojson data from leaflet map in react js ?
can you do a project on how to make markers from a SQL database
Hi Mega, I will consider that as a future project.
Dont know why I am getting "Attempted import error: 'GeoJson' is not exported from 'react-leaflet'." After I tried to import GeoJson.
Have you also imported leaflet?
Also make sure to put GeoJson in {} brackets in the import
@@CodingWithAdam Hi it is working now, I was trying to use GeoJson instead of GeoJSON. lol
Fantastic! Glad you got it working :)
@@CodingWithAdam Subscribed! Never seen anyone replied this fast. Hope you get more views and subscribers.
Thanks TruthSeeker! If you can, let your developer friends know about my channel! :)
Is this using hooks?
This tutorial does not but my other tutorial does ua-cam.com/video/4cliojOu3as/v-deo.html
how to use topojson , it is not being rendered properly
Great question, React leaflet does not support topojson by default. Here is a stackoverflow question that shows how it could be added to react leaflet. stackoverflow.com/questions/42149718/react-leaflet-adding-a-topojson-layer
@@CodingWithAdam thanks for the instant reply bro.
You’re welcome!
Hi Adam great explanation, i have few questions regarding react-leaflet what if i want to show a single country layer with that data not the whole world countries layers. How can we achieve that. I have asked a question about this where i have explained the problem in detal
stackoverflow.com/questions/63343429/how-to-show-a-single-polygon-on-react-leaflet-as-i-am-able-to-draw-the-whole-sha
Great question!
First it looks like there might be a typo in stackoverflow. You could try changing this line to use an array for the data attribute
// notice district is in an array.
Here is a little demo of just displaying part of a USA state that is a multiPolygon
const usa = features.find((x) => x.properties.ISO_A3 === "USA");
const usaPart = {
type: "Feature",
geometry: {
type: "Polygon",
coordinates:
usa.geometry.coordinates[usa.geometry.coordinates.length - 1], // choose the last item in the list
},
};
this.setState({
countries: [usaPart],
});
I hope that helps.
@@CodingWithAdam Thanks for your response but unfortunately it is not working in my condition since i am making an api call
const usa = features.find((x) => x.properties.ISO_A3 === "USA");
this part is working fine and find the targeted polygon but in USAPART cooridnates are throwing error of undefined.
I know it sounds weird but i will be really grateful if you can do a video with some geojson data with api call to show the procedure of how we can show single states separately from each other.
Because my detail api geojson is working perfectly with simple leaflet and Jquery but there's seems to be some issue with react-leaflet. Hope you don't mind asking for the video :).
Hi @@umairramay8041 Thanks for the video suggestion. The GeoJson file I'm currently using is just countries. USA has multipolygons since it's made of a few parts that are not connected together like Hawaii but it does not distinguish between states just shapes. Using a GeojSON file that has the states would be your best option. The hard part is finding a good GeoJSON file. Which GeoJSON file are you using now?
@@CodingWithAdam Thanks. I am from Pakistan so i was using Pakistan district level shapefile which i downloaded from www.diva-gis.org/
But format is .shp so i had to make an API with django rest framework that's how i got this to work. You can download data for any country with different layers like country level, city or maybe provincial. Even road networks and many other types from divagis. This is the link to download administrative area of USA .shp
www.diva-gis.org/datadown
Let me know if you have trouble finding suitable datasets for video. I might be able to help.
That's awesome. I appreciate all the information. After I complete a few other videos I'm going to try and make a video using this information :)