Add a React Leaflet Marker to a Location when Clicking a Button
Most of us are able to identify where we're located on the map, but it can be hard to visualize that in context to other locations. To help, we can add a marker to the map to show our location.
To get started, we'll add a marker to a specific location to see how it relates to the restaurants that are on our map.
Colby Fayock: [0:00] In order to add a marker onClick, I already set up this button with an event handler. Here, when someone clicks button, we fire handleOnSetLocation, which right now, we're only defining a location.
[0:09] To add a marker, we can do what we did in previous exercises. We're going to create a const marker. We're going set that equal to a Leaflet marker. We're going to pass in our location of ('National Geographic').
[0:20] Since we already have our Leaflet map de-structured, we can specify that our marker will get added to our map. When we go back and click the button, we can see our marker. What if we're zoomed in on Foggy Bottom, and we click that button? Well, we can see that our marker was added. It's not centered in the map.
[0:34] After we add our marker, we can tell our map to set it to view to that same location. Next time we're not zoomed in on that location when we click the button, it's going to update its location to our marker.
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!