Dude! You won't believe how helpful this video has been. I have read half of Stack Overflow, trawled through the Leaflet docs with no luck. Your video has got me out of a deep rabbit hole. Thank you!
After trying following your tutorial and the leaflet-react web I can't get it to work. I got this error: Compiled with problems:X ERROR in ./src/components/Emap.js 70:22-43 export 'features'.'map' (imported as 'parkData') was not found in './data/Skateboard_Parks.json' (possible exports: 0, 1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 2, 20, 21, 22, 23, 24, 25, 26, 27, 28, 3, 4, 5, 6, 7, 8, 9) Please help!
If I have two items/names for a single co-ordinate on a map then how do I show it ? Basically what is happening in the data is, the data that comes last in the dataset is showing in the map, and the recent one is not showing.
After trying following your tutorial and the leaflet-react web I can't get it to work. I receive always: You may need an appropriate loader to handle this file type. | style, | whenCreated, | ...options | }) { | const mapRef = useRef(null); Don't know why. Any Suggestions?
How do we center the map only once, when the page first loads? I am receiving new lat / lon updates every minute and it always recenters to my original position.
Thanks! I’ve been attempting to use the react-leaflet GeoJSON component without success. The GeoJSON file that I have works with the non-react leaflet’s GeoJSON, but not the react one. The react-leaflet GeoJSON expects a GeoJsonObject as the value for the data property, whereas the non-react GeoJSON component will accept data={stringOfJson}. Have you any idea how to get this to work properly?
As always, great video Leigh! One question is have you figured out how to handle larger datasets? Think of a bus app with a few hundred bus stops. Is there a way to load only what is in view or do you have another suggestion?
This is really well done. Thank you! My onlick isn't working. Anyone have any thoughts? My points are rendering on the map. But the click doesn't do anything.
If I cut and paste your code exactly, the onClick doesn't work for me there either. Inititally I had to change Map to MapContainer to get the points to render. Is the onClick different in MapContainer vs Map?
@@blusanders I'm having the same problem. Can you explain what you mean by this solution? Did you move the Popup tag inside the Marker tag? If so, what happens to {activePark && ( that comes before the Popup tag?
@@RadicalMycology I changed the marker code to: {park.properties.NAME} {park.properties.DESCRIPTIO} I skipped everything about the activePark and onclick stuff. The code like that allows you to click on the skateparks and the popup will show the park info.
Thanks for this tutorials Now please how can i make the Marker to move when i'm scrolling map and how can i get a name of a place automatically just with latitude and longitude ? Thanks
Thanks so much for this! Can you do a video on how to use react-leaflet marker cluster for points that overlap when zoomed out? edit: it was easier than I thought, just had to place all the markers in the tag which was imported from the npm package.
Hey Leigh, first of all, thanks for your videos on all the differnt kinds of maps and their implmentations in react projects. I can not get it to work "the react way" as you put it. so my popup cannot have its own state. is this kind of implementation no longer valid or did it change somehow bc i unfortunately cannot figure it out. so if you or anybody who knows sth about that issue could/would help me out here that would be immensely appreciated!
if you dont want to do the "React way" then just put the info here inside the marker component and it will work on its own, and Popup component is imported from the react-leaflet library
@@cience yes i ened up doing it like that, but i would rather do it like leigh does to get separate state of the popup. if i do it like him, i dont get an error, its juist that the popup isnt showing up at all
solution for everybody interested: onClick is not longer supported and has to be exchanged for: eventHandlers={{click: () => {console.log('marker clicked')}, }}
Dude! You won't believe how helpful this video has been. I have read half of Stack Overflow, trawled through the Leaflet docs with no luck. Your video has got me out of a deep rabbit hole. Thank you!
Jkkkk
Skate and Programming, best video EVERRR!!! haha thanks man!
Can't thank you enough! I have been struggling with google maps api and you saved me.
Clear and straight to the point explanation!
Thank you so much for the video! I was having a lot of problems with the react-leaflet documentation.
Thanks a lot man! Thats the video i was looking for! A big thumbs up to you.
This was of great value. Really
how do we find previously marker using search bar
in react leaflet
After trying following your tutorial and the leaflet-react web I can't get it to work. I got this error:
Compiled with problems:X
ERROR in ./src/components/Emap.js 70:22-43
export 'features'.'map' (imported as 'parkData') was not found in './data/Skateboard_Parks.json' (possible exports: 0, 1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 2, 20, 21, 22, 23, 24, 25, 26, 27, 28, 3, 4, 5, 6, 7, 8, 9)
Please help!
If I have two items/names for a single co-ordinate on a map then how do I show it ?
Basically what is happening in the data is, the data that comes last in the dataset is showing in the map, and the recent one is not showing.
After trying following your tutorial and the leaflet-react web I can't get it to work.
I receive always:
You may need an appropriate loader to handle this file type.
| style,
| whenCreated,
| ...options
| }) {
| const mapRef = useRef(null);
Don't know why. Any Suggestions?
Thanks, Man! That's so much helpful!
How do we center the map only once, when the page first loads? I am receiving new lat / lon updates every minute and it always recenters to my original position.
Thanks! I’ve been attempting to use the react-leaflet GeoJSON component without success. The GeoJSON file that I have works with the non-react leaflet’s GeoJSON, but not the react one.
The react-leaflet GeoJSON expects a GeoJsonObject as the value for the data property, whereas the non-react GeoJSON component will accept data={stringOfJson}.
Have you any idea how to get this to work properly?
As always, great video Leigh! One question is have you figured out how to handle larger datasets? Think of a bus app with a few hundred bus stops. Is there a way to load only what is in view or do you have another suggestion?
You need to render the markers to canvas and switch the circle markers.
How to get tilelayer attributes link
Hi bro, How to do cross section in the map of react leaflet?
How do you collect the json files? I am trying to collect some data from google map but I could not.
You are a lifeasaver man.
This is really well done. Thank you! My onlick isn't working. Anyone have any thoughts? My points are rendering on the map. But the click doesn't do anything.
If I cut and paste your code exactly, the onClick doesn't work for me there either. Inititally I had to change Map to MapContainer to get the points to render. Is the onClick different in MapContainer vs Map?
Scratch that I just used inside the initial Marker tag.
@@blusanders I'm having the same problem. Can you explain what you mean by this solution? Did you move the Popup tag inside the Marker tag? If so, what happens to {activePark && ( that comes before the Popup tag?
@@RadicalMycology
I changed the marker code to:
{park.properties.NAME}
{park.properties.DESCRIPTIO}
I skipped everything about the activePark and onclick stuff. The code like that allows you to click on the skateparks and the popup will show the park info.
Any idea about react leaflet canvas v3?
Thanks for this tutorials Now please how can i make the Marker to move when i'm scrolling map and how can i get a name of a place automatically just with latitude and longitude ?
Thanks
Thanks so much for this! Can you do a video on how to use react-leaflet marker cluster for points that overlap when zoomed out?
edit: it was easier than I thought, just had to place all the markers in the tag which was imported from the npm package.
Hey Leigh, first of all, thanks for your videos on all the differnt kinds of maps and their implmentations in react projects. I can not get it to work "the react way" as you put it. so my popup cannot have its own state. is this kind of implementation no longer valid or did it change somehow bc i unfortunately cannot figure it out. so if you or anybody who knows sth about that issue could/would help me out here that would be immensely appreciated!
if you dont want to do the "React way" then just put the info here inside the marker component and it will work on its own, and Popup component is imported from the react-leaflet library
@@cience yes i ened up doing it like that, but i would rather do it like leigh does to get separate state of the popup. if i do it like him, i dont get an error, its juist that the popup isnt showing up at all
solution for everybody interested: onClick is not longer supported and has to be exchanged for: eventHandlers={{click: () => {console.log('marker clicked')}, }}
Awesome 👍
What's the name of this VS Code theme?
Euuuuh Dark ?
Love It.
Thanks a lot
thank you !!
great
Thanks :-)
you are awsome
🦕
Thank you so much!