Replace the Default React Leaflet Location Markers with a Custom Image
Now's the fun part! With our configuration, we can now substitute the default markers with our own custom ones.
For this lesson, I've provided you with a custom image that you can use:
src/assets/images/utensils-marker.png
Colby Fayock: [0:00] Now that we've recreated our markers using the pointToLayer property, we can set up a custom image. On our Leaflet marker instance, we're going to create a new options object.
[0:07] Right here, we're going to specify an icon property and we're going to set that equal to a new Leaflet icon. Inside of that icon, we're going to create an options object where we're going to specify an icon URL, which is going to be where we're going to specify our marker image.
[0:19] Our marker exists in assets shared in utensil marker. We're going to import our image in as utensils icon from that location. As our icon URL, we can specify that variable. If we look at the map, we can see that we see our images but they're not quite the right size.
[0:33] We want to set the images to be the same size as our previous markers. We're going to set an icon size and we're going to set it to a value of an array of 26 by 26.
[0:41] If we look at our markers, we can see that they're back at the right location. If we try to click them, we can see that the popup covers up the markers, not like they did before. Since the height is a little bit different, we need to change our popupAnchor. We're going to set up a popupAnchor property, which we're going to set to an array of and -15.
[0:58] If we look back at our map and click our marker, we can see that our popup moved up 15 pixels.