Client work · Product builder, mapping and Shopify
Trail Maps
We built the tool that turns the route on your watch into a poster for your wall.
See it live at trailmaps.com
The brief
Let customers design their own print.
Trail Maps sells posters of real routes. Customers wanted their own ride, run or hike on the wall, designed by them.
That means taking a route from wherever it lives, drawing it on a map that looks good enough to frame, and letting someone change the style, size and words without ever seeing a blank page. Then it has to go in the Shopify cart like any other product.
Key features
From your watch to your wall.
Connect with Strava
Sign in with Strava and choose an activity. No exporting, no files to find.
Upload a GPX file
Drop in a GPX, TCX or KML file from a watch or bike computer, or try a sample route first.
Save and share
Save a design to come back to later, or send the link to someone so they can see it, change it or buy it as a gift.
The technology
Next.js, Mapbox, Shopify and a backend of our own.
- Next.js
- The builder is a Next.js app. Each step (route, style, size, text, labels and position) works on one design, with undo and redo and a full-screen preview.
- Mapbox
- Mapbox GL draws the map live as you design it. Nine custom map styles, from Midnight and Blueprint to Satellite and Old World, all sit under the same route line.
- Custom backend
- Our own backend reads each route, works out the distance and climb, and stores every design so it can be opened again, shared or sent to print.
- Shopify
- The builder lives on the Trail Maps Shopify store. A finished design goes into the Shopify cart as a real product, at the size and price chosen, and checks out like everything else in the shop.
- APIs
- The Strava API brings activities straight in, and the Shopify APIs connect the builder to the store’s products, cart and orders.