1. 49
    Only Showing the Delivery Radius in React Leaflet on Marker Hover using DOM Events
    54s

Only Showing the Delivery Radius in React Leaflet on Marker Hover using DOM Events

Colby Fayock
InstructorColby Fayock
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

We were able to show all of our delivery zones, but it's a little overwhelming and it can be hard to determine which zone is associated with which marker.

Click here for exercise instructions

Colby Fayock: [0:00] These circles are helpful to show the delivery zone, but it's confusing and overwhelming because we have a lot of overlapping circles. Instead, we're going to set it up so that we only show those delivery zones when you hover over a marker. Our layer that we're binding this pop up to is actually our marker.

[0:12] We're going to set up an event on our layer. We're going to say onMouseover. We want to fire a function. Since we want to add it to the map, I'm going to remove this addTo(map) line here. Instead, I'm going to do it inside of the mouseover, but I only want to add it if that delivery's on exists.

[0:25] Since we're dynamically defining that based on the delivery, I'm going to wrap that with an if statement that says, "If that delivery circle actually exists, then we're going to add it to the map." Now, if we go to the map, we can see when I hover over marker, it's going to add it to the map, but when we hover off of it, it doesn't also remove it.

[0:39] How can we set that up? We're going to create another event for that layer. This time we're going to say onMouseout. We're going to fire a function, and we're going to copy that same block from before. Instead of "Add to," we're going to say, "Remove from." Now, we can see when we mouse over a marker, we see our circle. When we mouse out, it gets removed.

egghead
egghead
~ 41 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today