Create a multi-stop, bike route planner
By: Rafa Gutierrez
Recently, developers have been asking us about ways to use our Directions API for designing routes (think hiking routes, bike rides, and road trips). While it’s easy to point folks to our Directions plugin — a quick, plug-and-play solution — it doesn’t always have the features they’re looking for like custom line styling, tidying routes, and configurable instructions.
To help you get a feel for what’s possible with our Directions API, I built this interactive bike-route planner. I’m using open source draw tools and calling the Directions API to return a duration-optimized route-line between multiple points. It also returns the distance, as well as an ETA for each route. Try it yourself.
For an application like this, you’ll need a few tools to get started:
- Mapbox Access token — sign up for a free Mapbox account and get your token.
- GL JS JavaScript library — used to display your custom or template maps on a web page.
- GL Draw — the library that enables you to draw shapes on the map.
- Directions API — our routing API that can calculate optimal driving, walking, and cycling routes and produce turn-by-turn instructions
To get started, setup your HTML and create a basic map. You can always use our GL JS examples for boilerplate code. Next, add the GL Draw plugin to create the draw tools and add an info box where we’ll store some results from the Directions API:
Customize the draw tool
Once we can access the GL Draw plugin, we can take control of the look and feel of the lines we draw on the map. Right after we add the map and info box to the page, add the following code to initialize the Draw plugin and customize the style of the lines:
The GL Draw control is aware when you create, delete, or update features so we can call a few functions when this happens:
Now let’s make those functions to create, update, and remove routes.
Get Directions
Coordinates from any features you draw on the map are accessible and can be referenced for your Directions API request. We’ll grab the coordinates in our updateRoute function and then pass them to our getMatch function that makes the directions request.
The response from the getMatch function will pass the response back to the updateRoute function and update our info box at the same time.
Add the route
We can setup the function that adds the route layer, addRoute which is invoked back in our getMatch function.
Tidy it up
We also need a way to remove existing routes on the map so they don’t pile up. Let’s make a removeRoute function to remove the source, layer, and zero-out the info box.
Finally, let’s update those draw commands we started earlier with our new functions:
And that’s it! With only a couple tools, we can get an interactive route planner up and running. See the full map:
And as far as customization, this just scratches the surface of what’s available with the Directions API. You can change profiles (walk, bike, drive, or drive with traffic), set radiuses to improve accuracy, return steps for turn-by-turn navigation, and more. We can also make requests like this for other Mapbox APIs and present them on custom maps.
Keep experimenting
Follow our blog for more map hacks and hit up our support team via support@mapbox.com or @Mapbox if you have examples you’d like to see. Explore our help page for step-by-step tutorials covering our full suite of developer tools.
Map hacks: Directions API + Draw tools was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.