Section 08 - Add Restaurant Delivery Zones to Map with Shaded Regions
There's nothing like finding a restaurant, seeing they deliver, and getting excited about what you're going to order from their menu only to find out you're not in their delivery zone. It's not fun, but we can give our website visitors a better way to search by showing them each restaurant's delivery zone right on the map!
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!