Add a React Leaflet Circle to the Map Designing the Accuracy of the Browser's Location
Now that we can pinpoint our location, we noticed that it's not exactly the most accurate indication of where we're at. To help, Leaflet provides an accuracy indicator in meters that we can use to show on the map the margin of error for that location.
Instructor: [0:00] When Leaflet finds your location, it's not 100 percent accurate. Spoilers, this isn't where I actually live. If I console log out this event, we can see that in addition to our lat and long, it also gives us an accuracy. This accuracy is the radius in meters of how accurate it thinks it is.
[0:14] In addition to our marker, let's show a circle that shows the accuracy radius. First, I'm going to define my radius as event accuracy. I'm going to create a new circle and set it equal to a Leaflet circle where the position is going to be that latitude and longitude. I'm going to define a custom options object and set its radius to that accuracy.
[0:32] I'm also going to set a color, so it's different from our delivery zones. Just like our other shapes, I'm going to tell that circle to add to our map. Now, when I click find my location, we can see the circle that represents the accuracy.