Replace the Marker with Custom HTML and Style with CSS
Not only can we use the Leaflet Icon instance to add a custom image, we can create completely custom HTML! This opens the door to a lot of possibilities that you can't do with only an image like using CSS to add effects.
For this extra credit, use a different Leaflet icon type called DivIcon to transform our markers into custom HTML, which you can then style with CSS.
Instructor: [0:00] These markers are cool, but what if you wanted to do something completely custom that doesn't use images? We're going to get rid of this icon that we just created. We're going to add a Leaflet div icon. If we look at our map, we can see that it has some default stylings. It's these white squares, but we can do a lot more with a little HTML and CSS.
[0:15] To start, we're going to create a new options object and we're going to add a property of HTML. To test out, we're going to set as a div with the word Hi. If we look back, we can already see our changes.
[0:24] First, instead of Hi, I'm going to add this emoji that basically shows a fork and a knife with a plate. If we look back, we can already see our change.
[0:31] I also want to style that a little differently. I'm going to add a class to that div and I'm going to call it locationMarker. If we look at the source, we can see that this white background and this border gets applied to this Leaflet div icon.
[0:41] The first thing we're going to do is we're going to copy that selector and we're going to paste it into our CSS where we're going to specify a rule. We're going to say background: none and border: none. When we look back, we can see that those are no longer there.
[0:52] Next, I'm going to add a new rule for my locationMarker class where I'm going to set up background-color to blue violet. We can see our background color.
[0:59] To change the size of our marker, we need to do that with the Leaflet API because it's setting it right on the element. Back on our div icon configuration, we're going to set an icon size property. Let's set that to 26 by 26. If we look back, we can see our new size.
[1:11] We want our div to take up the entire space inside. We're going to set a width: 100%. We're also going to set a height: 100%. Now we have our square. Next, we can set a border-radius: 100% and we have a circle. To center it, we're going to say display: flex, we're going to justify the content to center, and we're going to align the items to center.
[1:31] If we look, it's mostly centered, but it's a little offset. With us using the emoji, the font size is messing up the alignment. We're going to set a font size of 1 rem. We can see that it's centered, but it fills up all the space now.
[1:41] As a last trick for this div, we're going to set a box-sizing to content-box. We're also going to set a padding of .2 rem. While it could probably still use some adjustments, we now have our markers.