Section 09 - Customize Restaurant Location Markers with Custom Images
In a lot of cases, not every marker is the same. Sometimes we have a restaurant, but other times we might have a museum, so we should be able to visually represent that type of location to make our map easier to use.
We'll learn how to create custom markers by using a new configuration option with our Leaflet GeoJSON instance.
Instructor: [0:00] Hey, mappers. Welcome to lesson nine. One of the great things about Leaflet is there's a ton of options to customize our map. One of those options are configuring custom images for our markers. This can be super helpful if you want to provide context clues for what each location represents.
[0:13] For exercise one, we're going to recreate adding all of our markers with a custom GeoJSON configuration. In order to add our customization, we need to use a custom property. That custom property requires us to manually set up our markers for those locations.
[0:26] At this point, nothing should change visually on the map. Once we've done that, we'll be ready to add our custom images. Now that we have our custom property, we're going to set up our custom marker images in exercise two.
[0:36] The default marker image is pretty simple. It's a blue marker and that's about it. A lot of cases that's OK because that's all you need. What if you're trying to show something like a restaurant versus a hotel or a gas station?
[0:46] Here, we'll update our marker to use a custom image that we already have available for us in the code repo. Once we add our custom image, we'll notice an issue with our custom markers. They're all missing shadows.
[0:56] In exercise three, we'll learn how to add back our shadows by setting up the marker configuration. We'll be able to import the exact same images that the original markers use right from Leaflet. While we can also customize those as we want, we'll use the default Leaflet shadows as they work for our use case.
[1:11] For some extra credit, how about some advanced markers? Using custom images is relatively simple way to add a new look to our marker, but images are very dynamic. They require being loaded and depending on how big you make them, can get fuzzy if enlarged.
[1:23] For some extra credit, try to use Leaflet's documentation to add a custom marker using HTML and CSS. Leaflet provides a div icon that allows us to inject custom HTML, which at that point, we can style it however we'd like.
[1:36] Adding custom marker images is mostly about adding context. While it can definitely be fun to add a custom image, normally, we'll want to provide those images to help people more easily identify locations.
[1:45] Ready to build out your custom markers? Let's dig in.