Advanced vector styles: Metro-style hiking trails

Cartography
|
Outdooractive
|

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 characterizes 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.

More projects in cartography

Cover Image for Google My Maps: Adventure maps in southeast Asia
Google My Maps: Adventure maps in southeast Asia
Cover Image for Automatic minimaps in QGIS
Automatic minimaps in QGIS
Cover Image for Lost relative trail - Art Project
Lost relative trail - Art Project
Cover Image for Tourism Region-Geoclassification
Tourism Region-Geoclassification
Cover Image for Computed symbology with QGIS geometry generator
Computed symbology with QGIS geometry generator
Cover Image for Activity maps for B2B printouts
Activity maps for B2B printouts
Cover Image for Business strategy map - Market penetration
Business strategy map - Market penetration
Cover Image for Web map for a professional baker
Web map for a professional baker
Cover Image for Immigration map - political map with handmade shading
Immigration map - political map with handmade shading
Cover Image for Arran topography: Touristic Map
Arran topography: Touristic Map
Cover Image for Cartographic process
Cartographic process
Cover Image for Topographic survey in Wales
Topographic survey in Wales