Metro-style hiking trails on the web

East European hiking trails are usually colour-coded according to trail importance, e.g. blue for long distance, red for intermediate, yellow for local etc. What’s more, each trail usually has a special icon that characterises it, shown prominently on signs on the ground. Due to popular demand by users at Outdooractive, who were used to regional web maps showing coloured trail lines separately, I was tasked with making a style amendment to our system to accommodate the use case.

I developed a routine using SQL Postgres preprocessing and Mapbox GL-JS layers to take the existing solutions one step further. The original OpenStreetMap hiking layer was cleaned, aggregated and ordered according to colour and trail type properties. Different front-end layers combine to create the final metro-map style, where colours overlap and automatically buffer, improving clarity. The width of the highlights changes according to trail type and rank on each hiking segment.

The icons were treated in a similar aggregating manner, but using Mapbox’s late formatted string expression to show icon clusters with or without labels according to zoom level.

Disclaimer: This work was based on infrastructure provided by the cartography team at Outdooractive, including icons and basemap.