Brochure trail names are not enough on the mountain. Guests need length, elevation difference, open/closed status, and which lifts feed a run before they commit.
Ski trail list, detail, and dedicated trail map
Guests enter from home or the saved-trails empty state, filter by difficulty, open trail detail with linked lifts, then select a run on the topographic trail map.
Browse ski trails
Trail directory with all/open tabs and difficulty or summer-activity chips.
Implementation narrative
The ski trails directory offers all/open tabs and difficulty chips. Trail detail shows length, elevation difference, open status, linked ski lifts, and a map entry. The ski-trail map tab overlays trail geometry on Rosa topo and opens a bottom card for the selected run. Saved-trails empty state jumps back into the directory.
Resort systems supply trail and lift geometry, open/closed status, and schedules. The Mini Program `<map>` component renders markers and polylines; `MapContext.includePoints` frames the selected geometry. Personalized basemap styling uses a Tencent Location Services `subkey` with `layer-style`. Map and location coordinates use GCJ-02 where WeChat requires it (`wx.getLocation`).
<map id="resortMap"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
markers="{{markers}}"
polyline="{{polyline}}"
show-location
/>const mapCtx = wx.createMapContext('resortMap')
mapCtx.includePoints({
padding: [40, 40, 120, 40],
points: trailPoints
})
- Browse ski trails: Trail directory with all/open tabs and difficulty or summer-activity chips.
- Open trail detail: Trail detail with length, elevation difference, open status, linked lifts, and map entry. Caption focuses on list fields, not the placeholder map snippet.
- Select a trail on the map: Ski-trail map tab with Rosa topographic basemap and a selected trail bottom card.
- Empty saved trails: Favorites ski-trails empty state with jump back to the directory.