Section 07 Add Restaurant Info to GeoJSON Documents and Display it in a Tooltip on the Map
Now that we have successfully added our restaurants to our map, we want to be able to display some information about each of our restaurants. That way, when our visitors know whether or not the restaurant will be open or so they can have a better idea of what kind of food they provide!
We'll extend the GeoJSON we've already worked on adding new properties to store our restaurant location information and provide that information in a tooltip on our existing markers.
Colby Fayock: [0:00] Hey, mappers. Welcome to lesson seven. We're finally going to get to some of the more interesting bits. We have our data, and we already see it on the map. When working with locations, being able to see them on the map is cool, but that doesn't really give us much context.
[0:11] For exercise one, we're going to learn how we can use the GeoJSON spec to add restaurants info to our data. This will include setting up custom properties that we'll later be able to use. Now that we have our restaurant data, we'll need something that we can add it to.
[0:23] For exercise two, we're going to learn how to create popups for each of our markers where we'll later add our restaurant data. Leaflet makes this really easy with the popup instance and some custom GeoJSON functions. We'll attach it to our marker, and then we'll show it on the map. Once our popups are ready to go, we'll be able to add our restaurant data.
[0:39] For exercise three, we're going to use our restaurant information that we configured in our GeoJSON and add it to our popups. This will be super helpful for the people using our app, so they can more easily get the information for each location.
[0:51] For exercise four, we're going to update the look-and-feel of our popups. The default styles of our header and the list element inside of the popup make the restaurant info a little bit hard to read. It also makes it feel a little bit bloated. We can fix that by tweaking some of the CSS.
[1:05] For some extra credit. Exercise four was about improving readability. I know at least some of you are wondering how we can make that popup look a little bit cooler. This is your chance to go wild.
[1:13] While these styles won't carry on through the next lessons, now is your chance to play with the CSS and make the popups look exactly how you want. At a minimum, try seeing if you can change the background color.
[1:23] For some second extra credit, we added some information for each of our restaurants. What else can be helpful? Try to think what other details might be helpful for a person trying to look up a restaurant. Are there other ways to contact or find them? Are there any other food descriptions that can help someone? Try adding it to the GeoJSON and using it to add to the popup.
[1:39] This lesson is all about getting the people using our app the information they need. Without more information than a marker, there's not really a point of showing it on the map. Good luck with this lesson, and have fun.