A ski mountain map fails when every POI appears at once. Guests need trail status and venue cues without flooding the canvas, and list cards must land on the same coordinates the map uses.
Resort map that filters trails, lifts, and venues
The home shortcut opens the resort map with Rosa basemap labels and a selected trail card. Purpose filters toggle ski trails, lifts, dining, and shops before guests apply the sheet.
Open resort map and select a trail
Production Rosa map with village labels and a selected trail bottom card showing length, elevation, and open status.
Implementation narrative
Home card Resort map opens the production resort map. Guests tap a trail or POI and read the bottom card (name, open status, length, elevation). The purpose filter sheet toggles ski trails and ski lifts before apply.
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
})
- Open resort map and select a trail: Production Rosa map with village labels and a selected trail bottom card showing length, elevation, and open status.
- Filter by purpose: Purpose sheet lets guests toggle ski trails and ski lifts before applying the filter set.