Using Turf alongside the rest of the stack, we built a tool to demonstrate how quickly you can build a transportation app with Mapbox. In this case, we're using data from Washington, D.C.'s Capital Bikeshare system, which has stations throughout the city.

To begin, drag the marker around to explore nearby stations.

Explore more here.

I knew I wanted a cohesive experience with a base map tailored to its context, so I began by styling an understated map that highlights DC's bike lanes. To do this, I first found a bike network shapefile provided by DC's Department of Transportation. I then created a source in Studio and added it to a lightly manipulated version of Emerald.

After uploading the basemap, I used Mapbox.js to load the dataset and Turf's 'within' function to find bike share stations that are a 5 minute walk away. Turf's 'nearest' function came in handy as I highlighted the station closest to the marker.

From there, I sent the start and end coordinates to our Directions API. This returns the optimal route in GeoJSON, which I then use in a Surface API call to query our terrain data layer. By combining the functionalities of these APIs, I can build a route profile that lets a cyclist know what type of elevation gains (or drops) to expect.

Have you combined our products in awesome ways? If so, we'd love to hear how!