In just a few hours, I built a driver app for a food delivery business using the Mapbox Navigation SDK for iOS. It combines contextual information and navigation in a single app. A courier can view routes for multiple deliveries and seamlessly transition into navigation mode to receive turn-by-turn instructions. Finally, the app launches a task checklist upon arrival to each destination. I’ll explain how all the pieces fit together.
Displaying the map
The first screen is an interactive map with a list of all the deliveries in the queue. The deliveries are displayed on the map, and the route-line is color-coded by the order the deliveries should occur (darkest first, lightest last).
For the map, I customized our Mapbox Streets map style in Studio to display necessary contextual information for the courier. For example, I color-coded building types in purple, yellow, and green based on whether they are an office, apartment, or university. Using a zoom function, the map reveals nearby restaurants when a user hones in on an area.
Calculating a route
To calculate each route I use the following function and pass an origin and a destination waypoint.
The NavaigationRouteOptions allows me to specify the information I want to get back, which in this case is:
- The route’s geometry
- The turn by turn steps
- A route for driving (as opposed to walking or cycling)
From the route’s geometry, I can then draw a polyline on the map. For more information on this, check out an example you can use from our library.
Adding turn-by-turn navigation
When the courier taps the Start button, the application launches the navigation screen right inside the app so they don’t have to kick out to third-party applications.
Using the drop-in Navigation UI makes it easy to add navigation with just a few lines of code. In this view, I’ve made a few tweaks to the off-the-shelf interface. I wanted the route-line and the instructions to be easy to read. For this reason I chose a predominantly light background to signal that the driver is in navigation mode, while also allowing my custom-branded route-line and custom-marker to stand out.
To customize the route-line and the marker I used the available delegate methods:
- navigationMapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage?
- navigationMapView(_ mapView: NavigationMapView, routeStyleLayerWithIdentifier identifier: String, source: MGLSource) -> MGLStyleLayer?
- navigationMapView(_ mapView: NavigationMapView, routeCasingStyleLayerWithIdentifier identifier: String, source: MGLSource) -> MGLStyleLayer?
Creating the arrival checklist
With in-app navigation, we’re able to monitor progress and detect specific events such as when the courier arrives at a specific waypoint. In this example, when the user arrives, we kick off the delivery workflow and provide step-by-step checkboxes for completing the delivery.
When the workflow is complete, the courier returns to the first overview screen, where the delivery is removed from the list and the finished route is removed from the map. The courier then views only the routes that have yet to be completed.
To achieve this, I tie into the navigationViewController(_ navigationViewController: NavigationViewController, didArriveAt waypoint: Waypoint) delegate method and present a brand new UIViewController containing the workflow’s logic.
Create a seamless user experience
Don’t kick your users out to third-party nav apps; it’s easy to implement a custom navigation experience using our Navigation SDK. The SDK ships with map styles optimized for navigation, live traffic data, and a drop-in UI to get moving quickly. Facing more sophisticated routing problems? Take a look at our Navigation APIs. They can handle complex routing calculations like ETAs based on live-traffic conditions for a large matrix of waypoints and route optimization for multiple pick-ups and drop-offs.
To dive in deeper, watch our recent webinar on building a ridesharing app, and explore the tutorials on our help page. Have questions? Reach out to our sales team or ask me on Twitter, @ericdeveloper_.
Add nav into your on-demand delivery app was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.