Section 08 - Add Restaurant Delivery Zones to Map with Shaded Regions

Instructor: [0:00] Hello, mappers. Welcome to lesson eight. This is the first lesson of our third lesson group. Here, we're going to add delivery zones to our map. That way, people can have an idea of what areas each restaurant delivers to.

[0:09] Starting with exercise one, we're going to add the distance as a radius to our data. In order to programmatically get our delivery zone, we need to be able to access it. We're going to add this data right alongside the rest of our restaurant metadata. We'll add this numeric value in our GeoJSON properties.

[0:24] Next is in exercise two, we'll make use of this radius. The goal will be for someone to see what that zone looks like on a map. We'll use Leaflet circle shape to add a shaded region to the map. This will make it super easy to see where they deliver.

[0:36] In exercise three, we're going to make sure that our delivery zones only show when you hover over location. If we just show the shaded region at all times, it can get a little confusing to see. Especially if some locations are right next to each other, you might not be able to tell which zone refers to which location. We'll only show each location delivery zone when hovered over that location's marker.

[0:55] For some extra credit, we're going to change the color of that delivery zone. Some colors are easier to see than others. Maybe the default blue can be hard to see on an already-blue map. We'll learn how to change the color of our shape to show our region in a different color.

[1:07] Our goal with this lesson will be able to help people find the locations that delivered to their area. It can be awfully disappointing when you found a restaurant that you really like and just find out that they don't deliver to you.

[1:17] Ready to set up our delivery zones? Let's get started.