Section 10 - Use Leaflet's Geolocation API to Find Locations Near You
In lesson 10, we are going to be focusing on how to add a marker to the map on button click to designate a location, create a button that finds and navigates to your location, add a marker to the map showing your location and add a radius to the map showing the accuracy of your location
Instructor: [0:00] Hey, mappers. Welcome to lesson 10. Now that we have our custom map, we want to start personalizing it for the person using the app. We ultimately want to set a marker programmatically on user interaction. To get started, we can learn how to do this with a click of a button.
[0:13] In exercise one, we're going to set up a button to add a marker to a specific location on click. Particularly, we're going to set a marker in the location of the National Geographic Museum. To do this, we'll use the event handler on the button and add our marker code to that handler. Next, we want to make this dynamic. We want to be able to find the current location of the person using the app.
[0:32] In exercise two, we'll learn how to use Leaflet's geolocation API to find the browser's location. Once that location is found, the map will move over to that location. Once we have that location, it doesn't do us a lot of good if we don't show that location.
[0:45] In exercise three, we'll add a marker using that location that we just found with Leaflet. To do this, we'll use Leaflet's geolocation event handlers. When the location is found, we'll add the marker.
[0:54] When finding the browser's location, it's not 100 percent accurate. We can't get 100 percent pinpointed accurate location of the browser. Instead, we get an estimate. That estimate comes with a radius that represents the margin of error.
[1:06] To show that margin of error, we'll add a shaded circle to the map. That way, we're letting the person know it's within that general area. For a little extra credit, when creating new event handlers, we want to always make sure that they get cleaned up when we're not using them.
[1:19] Since we're using React's useEffect hook to add the event handlers, we can add a return statement to clean them up. When the component unmounts, React will fire the function that the useEffect hook returns. We can take advantage of that and clean up our event handlers when the component unmounts.
[1:33] This lesson is all about personalizing the map for the person using the app. That way, we're doing everything we can to make it unique for that person. Ready to get started? Have fun and good luck.