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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!