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 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! 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?
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!
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.
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.
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')}, }}
