The idea is an app for walking the West Highland Way: where you are on the trail, how far you’ve got to go, and a plan for each day between Milngavie and Fort William.
Before building any real UI, I’m getting the hard part right first: the geometry. So it’s starting life as a sandbox.
Here’s a simplified version of the sandbox running in your browser. It uses the real route and stops, with a static map in place of the map library:
Map data © OpenStreetMap contributors · Protomaps
Where am I?
Click or drag on the map- Along the route
- 0.0 km
- Remaining
- 152.3 km
- Next stop
- Drymen, 19.3 km
- Nearest stop
- Milngavie
Plan your days
8 days · 152.3 km- Day 1 Milngavie → Drymen 19.3 km moderate
- Day 2 Drymen → Rowardennan 23.3 km tough
- Day 3 Rowardennan → Beinglas 17.5 km moderate
- Day 4 Beinglas → Tyndrum 24.0 km tough
- Day 5 Tyndrum → Bridge of Orchy 11.8 km easy
- Day 6 Bridge of Orchy → Kingshouse 19.7 km moderate
- Day 7 Kingshouse → Kinlochleven 12.0 km easy
- Day 8 Kinlochleven → Fort William 24.7 km tough
What the sandbox does
- Click anywhere on the map and it snaps to the nearest point on the trail
- Shows distance along the route, distance remaining, the nearest stop and the next planned stop
- A trip planner: pick your overnight stops and get a day-by-day breakdown with distances and difficulty
How it works
The route line is the single source of truth for distances. Stops live in a simple YAML file with coordinates only, and a build step snaps each one onto the route to work out how far along it sits. The map uses a local PMTiles file, so there’s no tile server and no API key.
It’s deliberately plain: JavaScript with ES modules, MapLibre GL JS and Turf.js, no framework and no bundler. The geometry lives in pure functions so it can move into a real app later.
Next
- A proper GPX trace of the route, as the current line is an approximation
- Verified coordinates for every stop
- Replaying a GPS track, adding elevation, and colouring the route by difficulty or progress