FR
All apps

§ App / Trail Explorer

Build a hiking trail explorer with React and unmap

How the unmap Trail Explorer is put together: Parks Canada trails on an outdoor map with terrain and contours, elevation profiles, GPX import and directions to the trailhead.

Launch appSource

Trail Explorer shows day hikes around Banff and Lake Louise on a live outdoor map with hillshade and contours. Search and filter the trails, choose one for its length, its climb and an elevation profile kept in step with the map, open your own GPX file, get road directions to the trailhead, and share a link to the trail. It runs at apps.unmap.dev/trail-explorer, and its source is a standalone Next.js project you can clone and run with your own key.

Nothing on the map is invented. The trails are real open data, Parks Canada's Trails APCA dataset, used under the Open Government Licence - Canada: 20 day hikes between 1.5 and 25 km, chosen mechanically and fetched by a script that checks the licence first. They are a dated snapshot, not live data. The map, the elevation profiles, the place search and the routes are live unmap.

What it does

  • An outdoor map: the outdoor style, with hillshade, contour lines and OpenStreetMap trails, and labels in English or French.
  • Search and filters: by name, with accents and case ignored, and by distance, climb and difficulty. The climb and difficulty filters appear only when the data carries those figures.
  • Trail details: length, climb and difficulty as Parks Canada rates it, then surface, slope, obstacles and the rest as Parks Canada publishes them in English and French. Each trail shows its source, its licence and how every figure was worked out.
  • Elevation profile: up to 500 points sampled along the trail, with gain, loss, lowest and highest. Hover the chart and a marker follows on the map; hover the line and the chart follows.
  • GPX import: open a .gpx file and its tracks, routes and waypoints are read in your browser. Its profile is fetched only when you press the button, and only the sampled points are sent.
  • Directions to the trailhead: from a place you search for or from your location, by car, with turn-by-turn steps in English or French. It is labelled road routing, not trail navigation.
  • A link to the trail: ?trail=<id>, with ?lang=fr for French.

Numbers you can check

The climb stored with each trail was sampled at the same points the app's elevation profile samples, so the profile shows the same numbers. Length is the sum of the distances along the published line. The trailhead is the start of that line, which is not a surveyed trailhead or parking area, and each trail carries a note on the method behind every figure.

Requests are made only when you act: choosing a trail, asking for directions or for a file's profile. The profile is debounced, a request that a newer one replaces is cancelled, and nothing is requested when you move the map.

Built from the registry, unmodified

The map, the trail lines, the elevation profile, the search, the steps and the trailhead pin are registry items copied in unmodified, and the app's own code calls the API only through @unmap/sdk. Installing the same pieces into your project is one command:

npx @unmap/cli add map geojson-layer route-line elevation-profile geocoder route-steps marker-popup map-controls

What it does not show

Trail Explorer is not a navigation or safety tool, and it says so on screen at all times:

  • Conditions and closures. Trail conditions, closures, seasonal restrictions, wildlife warnings and avalanche hazard are not in this data and are not shown. Check Parks Canada before you go.
  • Navigation on the trail. Directions go by road to the start of the published line. unmap routing does not navigate trails, and the app is not an offline map.
  • Every trail in the parks. The collection is a sample of day hikes. The lines are as Parks Canada published them on the retrieval date and may be incomplete or out of date.
  • An exact climb. Gain and loss come from a digital elevation model sampled every 30 m or more, so treat them as approximate.

Run it yourself

You need Git, Node.js 24, pnpm and a browser key from the dashboard that allows http://localhost:3203.

git clone --depth 1 https://github.com/unmap-dev/trail-explorer.git
cd trail-explorer
pnpm install --frozen-lockfile
cp .env.example .env.local

Set NEXT_PUBLIC_UNMAP_KEY in .env.local to your key, run pnpm dev, and open localhost:3203. The trail data ships in data/trails.geojson, and pnpm fetch-trails refreshes it from Parks Canada. To show your own trails, write that file yourself as GeoJSON lines with their source and licence: parseTrails() in lib/trails.ts checks it and lists every problem it finds. The Elevation API reference covers the profiles, and the outdoor map example covers the style with terrain and contours.