While Mapbox movement data is showing a strong decrease in vehicle movement across the globe, one mode of transportation has been rapidly picking up speed — cycling. Given the compelling combination of physical wellbeing and the ability to explore one’s surroundings, potentially with others while still practicing social distancing, it’s no surprise that bike shops across the United States are working to keep up with the newfound demand.
Using the knowledge we learned in the Mapbox Lunchtime series talk on Isochrones (shoutout to John and Caren for the talk), we created an interactive map that allows cyclists to visualize their nearby trails and bike lanes. Built with React and the react-map-gl package, this web app offers a unique opportunity to highlight routes within a specified time radius of your location.
For example, we can head to Washington, D.C. and view all of our biking options one hour from our marker (calculated based off location in Adams Morgan, DC).
We can toggle our travel time parameter, using the slider in the top right-hand corner:
Adjust desired travel time with the input slider
At 15 minutes, we can expect a 30-minute round-trip ride, while at one hour ( maximum travel time), we can expect a more difficult two hour trip.
With Mapbox Geocoding enabled, we can navigate to different areas of the world with a quick search:
— — —
Steps to Creating App:
We’ve broken down the process of creating this cyclist map in two components: the creation of the map itself and the styling in Mapbox Studio.
App:
The app itself was built using React, the react-map-gl package, and the community-supported react-map-gl-geocoder package to initialize the geocoder.
The code is relatively straightforward, with six primary components:
MapGL for rendering our map,
Geocoder for our Mapbox Geocoder,
Marker for our blue marker in the center of the page,
Source for fetching our data live-time via the Isochrone API,
Layer for using our Source data and displaying it as a low-opacity polygon,
Input for allowing the user to change Isochrone time.
Style:
We leveraged Mapbox Studio to 1) create a unique style and 2) highlight bike-friendly routes. The first step was to start with a blank slate and use the Components update to add on a few core features, such as major landmarks, terrain, and geographical features. We then added on cyclist specific layers using “paths”, “cycleways”, and “bike lanes.”
We ran into an interesting challenge when it came to visualizing a few of the larger, rural routes that designate some of the more popular bike paths such as Washington, D.C.’s Capital Crescent Trail. Listed as “cycleways” in Mapbox’s layers, they are programmed to show up on the map only at Zoom Level 14 or higher, the point at which you can comfortably look at a few neighborhoods or suburbs. While this is done to keep Mapbox highly performant, we wanted our viewers to be able to see these routes even when further zoomed out. In order to circumvent this, we leveraged the Mapbox tutorial: “Add OpenStreetMap data to your Mapbox project”.
We used overpass-turbo to identify several cycle-friendly layers, import them into Mapbox as tilesets, and then restrict them to Zoom Level 14 and below, so that there wouldn’t be any unnecessary overlap with the Mapbox layers. As we were able to specify exactly which layers we wanted to import, the data-join was seamless.
We hope this app will be valuable to cyclists who are looking for new paths during this challenging time. Thanks for reading and feel free to comment below. The link to the map can be found here and the code can be found on Github.
Written by Stefan Gouyet and Andre Gouyet
This post was originally published on Medium on May 27, 2020.
Comments