Section 04 - Adding a Marker Component to a Map to Point to a Location with React Leaflet
Maps with imagery alone can be fun to look at, but what makes them useful is when we add location data. While you can use any shape or format, markers are a really common way to designate a specific location.
We're going to walk through using React Leaflet to add a map marker to our favorite location and applying a conflict that prevents our marker from showing when using Leaflet with React Leaflet.
Colby Fayock: [0:00] Hey, mappers. Welcome to Lesson Four. Now that we've set up and customized our map, let's add something to it.
[0:05] To get started, we're going to go simple. Let's pick out a location. It's not just about picking out a location. We'll need a latitude and longitude of that location. Those coordinates are how Leaflet can understand where we want our marker. We'll use those to add it to our map. With our coordinates, we're ready to add our marker.
[0:19] The marker is one of the most common ways to point out an area on a map. You'll see it anytime you search for something on Google Maps. Luckily, react-leaflet ships with a marker component by default. We'll use that component along with our latitude and longitude to add a marker to our map.
[0:33] Spoilers. After adding that marker, we'll notice that it didn't work. When using tools like create-react-app, there's conflicts between leaflet and react-leaflet's libraries and how they load. It leaves us with an invalid request to the map marker icon image.
[0:45] To fix this, we'll override the map marker configuration to fix it up. We'll actually still use the files right from Leaflet. Once they're fixed, we'll have our marker. Adding the marker to the map is helpful, but what if somebody doesn't know what you're pointing to?
[0:56] For exercise four, we'll add a popup tooltip that will include the name of the location. React-leaflet also ships with a popup component. We can nest that popup right inside our marker component. That way, anytime you click the marker, the popup will show.
[1:08] If one marker wasn't enough, for some extra credit, we'll add a second. Find another location that you enjoy. It doesn't even have to be in the same area. If you want to see them all at the same time, you should try to keep them somewhat close. Try to add another marker and try to add a popup with it.
[1:20] Ready to get started? Let's dig in.