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.