1. 54
    Import and Add the Default React Leaflet Shadows back to our Markers
    28s

Import and Add the Default React Leaflet Shadows back to our Markers

Colby Fayock
InstructorColby Fayock
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

As we just noticed, we don't get the shadows to our markers by default. While we can add a custom one, we can use the default shadows which will work just as well with our custom markers.

Click here for exercise instructions

Colby Fayock: [0:00] Our markers are looking good, but we're missing one thing. The shadows. Those shadows aren't specified by default, so we have to add them back in. To do that, we're going to first import that image straight from Leaflet.

[0:09] We're here. We have our markers shadow right from the Leaflet distribution. Back to our icon, we're going to set a shadowUrl, which we're going to set to our marker shadow.

[0:17] If we look at the map, we can see the shadow images, but they're not quite in the right spot. To fix this, we can set a shadowAnchor, which for this I've already figured out that it's 13 by 28. With that positioning, when we look back on our map, we can see our shadows.