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

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.