New maps for REI’s Adventure Projects
Faster performance, more interactivity, and custom data styling
By: Joe Gomez
Adventure Projects, which encompasses the outdoor activity guides for Mountain project, MTB project, Hiking project, Trail Run project, and Powder project, just redesigned their web maps using our tools, and they‘re awesome.
Adventure Projects began in 2005 as a grassroots effort to crowd-source data on climbs, mountain bike trails, hikes, and skiing routes. Before its network of websites and mobile apps, much of that information was fragmented. If you were a climber, you probably owned a library of guidebooks, scoured obscure internet forums, and regularly weighed advice from strangers on the trail with your own intuition.
While some of that hasn’t changed, Adventure Projects has grown into a definitive resource with location and metadata for thousands of trails and climbing routes. It has a thriving community of contributors, and its website sees millions of unique visitors per month. REI, the nation’s largest outdoor retailer, purchased Adventure Projects in 2015.
As co-founder Nick Wilder humbly put it, “REI wants to get people outside, and our site very directly helps people do that.” The purchase was a big deal, showing a real commitment from an industry leader in digital tools and maps, as well as a community-supported resource.
As the user base and scale of data grows, so does the need to make the maps faster and more interactive.
Fast and efficient maps
Initially, the maps were built on OpenLayers, which doesn’t support vector tiles by default. They were drawing raw data on top of base layers using a complicated process. “It was a ton of code and very CPU intensive,” Nick told us. This build wasn’t an ideal experience for users; it would sometimes take around four seconds to load data on to the maps. They’re now leveraging Mapbox GL to render vector tiles efficiently on the client at 60fps (the speed of a video game). Here’s what Nick had to say:
Vector tiles are so much more lightweight, and now that Mapbox hosts the data, we don’t have to worry about sending it down to the client, which was challenging to implement. We’re now loading map data in less than a second.
A clean, interactive UX
The Adventure Projects maps feature a ton of metadata and rely on distinctly different datasets for each sport. For example, a single track mountain bike trail is drawn very differently than lines for hikes or point data for climbs, and when users click on a route or trail, the contextual information is presented in a format unique to the activity. The custom visual experience is a challenge, but it’s also what makes the maps so useful. Using Studio and GL JS, they’ve completely customized the basemap, data overlays, and user interactions.
We always felt that lines on a map were old-school; a piece of paper has lines on a map. Our value is the built-in text descriptions, the difficulties and ratings, condition reporting, all of that added value… Mapbox Studio is super cool, we appreciate the ability to style hundreds of properties on the fly. With raster maps, you could change the opacity, and that was about it.
For the climbing map, routes are clustered using graduated circles, and hovering launches a pop-up with info about how many types of climbs are in the area. When users select a region from the drop-down menu, the map “flys-to” the location and populates a side-menu with details on the climbs nearby.
One of our favorite design treatments is the way they’ve styled mountain bike trails: dashed route lines vs. highlighted access roads, directional arrows, colors signaling difficulty, and pop-up images along the route lines. Hover over a route to see distance and community ratings. Users can also filter data by difficulty, distance, and rating within the map view. It’s a lot of contextual information presented carefully and intentionally.
Another important design need was the ability to fine-tune the basemap and provide multiple base style options to users. The soft-palate, terrain layer is a custom version of our Outdoors map style, and they’ve also incorporated our Satellite map style. Nick explained:
We wanted our data to stand out from the background… Our designer literally tweaked hundreds of properties in Studio.
If you’re planning a trip outdoors, Adventure Projects is where you should start. If you’re building a map, start with Studio and create a custom style or begin with a style designed by our cartography team. Use GL JS to build-in interactivity and take full advantage of the performance and customization vector tiles allow. Have questions? Reach out to our sales team.
