Whether you are preparing for a marathon, renting an electric scooter on vacation, or driving your electric vehicle at half charge, there will be times when precise travel distance is critical. Isodistances offer realistic travel distances by considering roads and sidewalks, which can be the difference between a day at the beach and waiting for a tow truck.
There are a few ways to make an isodistance band using Mapbox. Get started by generating a point grid with Turf.js point-grid around your origin that extends as far as your desired travel range. For each point in your point grid, determine how far it is from your origin. This can be done by either using the Directions API, which returns a distance value, or the Distance API, which returns a duration value that can be back-calculated to distance, assuming an average travel speed.
Clean up your point grid by removing points where the distance from the origin is greater than your range. With the remaining points, use Turf.js concave or an algorithm like concaveman to produce a concave hull around the perimeter. Finally, style it with Turf.js hexgrid to clean up the edges and communicate a sense of approximation to your users.
Click on the maps below inside the District of Columbia to generate walking isodistance bands. You can select which distances appear using the check boxes in the upper-right corner of each map.
Made using the Directions API
Made using the Distance API
We’d love to hear what you’d use isodistances for! Tweet @Mapbox with your isodistance ideas.