Skip to Content
EmbedsInteractive map

Interactive map

<ullr-map> is the map on its own: pan, zoom and tilt around your mountain with live trail, lift and terrain park status drawn on top. Visitors can tap an object to see its detail.

Use it when you already have a conditions page and want a map on it, or when you want the map somewhere the full conditions widget would be too much — a homepage hero, say.

The Ullr interactive map embed
The interactive map with trails, lifts and features layered on the topographic base map.

Install

<script type="module" src="https://widget.ullr.ski/web-components/ullr-map.js"></script>
 
<ullr-map
  apiKey="1a2b3c4d5e6f.yourPublishableKey"
  areaId="your-area-id"
  sport="SNOW"
  showTrails="true"
  showLifts="true"
  showFeatures="true"
  initialMapStyle="VECTOR"
  units="imperial"
  enableCooperativeGestures="true"
  style="display:block;position:relative;height:600px"
></ullr-map>

The map fills its container and needs an explicit height, or it collapses to nothing.

Set enableCooperativeGestures="true" whenever the map sits inside a page visitors scroll. Without it, a scroll gesture over the map zooms the map and traps the reader; with it, they must hold Ctrl (or ⌘) to zoom and an ordinary scroll moves the page.

Required scopes

resorts:read, plus one per layer you turn on: trails:read, lifts:read, features:read.

Attributes

Common attributes

Shared by all four embeds.

apiKeystringRequired
Your publishable API key, in the form {id}.{secret}. Sent as the api-key header on every request the element makes. Without it the element logs an error and renders nothing.
areaIdstringRequired
The area (resort) to display. Without it the element logs an error and renders nothing.
sportSNOW | BIKEOptional
Which sport’s data to show. Also selects the default colour palette — blue for snow, green for bike.
Default: SNOW
themestringOptional
Primary colour as a hex value, e.g. #6B8CF9. Three- or six-digit hex only; anything else is ignored and the sport default is used. The secondary colour is derived automatically.
Default: #6B8CF9 (snow) / #50A162 (bike)
timestampnumberOptional
Show the hill as it was at this moment, in milliseconds since the Unix epoch, instead of live. Setting it switches this element onto the history endpoints, so the key needs one history scope per layer you have switched on — features:readHistory, trails:readHistory, lifts:readHistory. The live scope is not enough on its own: without the history scope the request is refused and the embed renders empty, with no error shown to your visitors. The area itself is always read live, so resorts:read is unchanged.
ullrKeystringOptional
Legacy alias for apiKey, kept so older snippets keep working. Only read when apiKey is absent. Use apiKey in new code.

Map options

showFeaturesbooleanOptional
Show terrain park features on the map.
Default: true
showTrailsbooleanOptional
Show trail lines on the map.
Default: false
showLiftsbooleanOptional
Show lifts on the map.
Default: false
initialMapStyleVECTOR | SATELLITEOptional
Base map style. VECTOR is the topographic style.
Default: VECTOR
unitsimperial | metricOptional
Units for distances and lengths.
Default: imperial
enableCooperativeGesturesbooleanOptional
Require Ctrl (or ⌘) while scrolling to zoom the map. Turn this on when the embed sits in a scrolling page, so a scroll gesture over the map scrolls the page instead of zooming.
Default: false
mapDefaultLatitudenumberOptional
Starting latitude. Ignored unless between −90 and 90.
Default: the area's configured default
mapDefaultLongitudenumberOptional
Starting longitude. Ignored unless between −180 and 180.
Default: the area's configured default
mapDefaultBearingnumberOptional
Starting bearing in degrees. Ignored unless between 0 and 360.
Default: the area's configured default
mapDefaultPitchnumberOptional
Has no effect on this element. <ullr-map> always starts at a pitch of 45 — the value set here is overridden. It does work on the [conditions widget](/embeds/conditions-widget).
Default: 45, and not currently changeable
enableMultiSelectbooleanOptional
Allow selecting more than one object on the map at a time.
Default: false
enableEventsFeatureSelectionbooleanOptional
Take part in cross-element selection — emit and listen for ullr-feature-selected, so embeds on the same page stay in sync when a feature is selected. Switches on both directions at once.
Default: false
enableEventsTrailSelectionbooleanOptional
Take part in cross-element selection — emit and listen for ullr-trail-selected, so embeds on the same page stay in sync when a trail is selected. Switches on both directions at once.
Default: false
enableEventsLiftSelectionbooleanOptional
Take part in cross-element selection — emit and listen for ullr-lift-selected, so embeds on the same page stay in sync when a lift is selected. Switches on both directions at once.
Default: false

Events

The map both broadcasts selections and responds to them, so it can drive — and be driven by — other embeds on the page. Each event is off until you set the matching attribute above. See syncing embeds with events for the protocol and worked examples.

Emitted

Dispatched on window when a visitor taps something on the map.

ullr-feature-selecteddetail: { featureId: string, senderId: string }
A visitor tapped a terrain park feature on the map. Requires enableEventsFeatureSelection.
ullr-trail-selecteddetail: { trailId: string, senderId: string }
A visitor tapped a trail. Requires enableEventsTrailSelection.
ullr-lift-selecteddetail: { liftId: string, senderId: string }
A visitor tapped a lift. Requires enableEventsLiftSelection.

Listened for

Sent by another embed — or by your own code — these move the map.

ullr-feature-selecteddetail: { featureId: string, senderId: string }
Selects the feature and centres the map on it. Ignored if the map cannot find that id among the features it has loaded — it will not move.
ullr-trail-selecteddetail: { trailId: string, senderId: string }
Selects the trail and flies the camera to fit its full extent.
ullr-lift-selecteddetail: { liftId: string, senderId: string }
Selects the lift and flies the camera to fit its full extent.

Notes

  • Layer defaults differ from the dashboard. The element shows features only; the dashboard turns on all three and writes them into the snippet.
  • mapDefaultLatitude, mapDefaultLongitude and mapDefaultBearing fall back to the area’s configured defaults when out of range or absent — so it is safe to omit them and let the resort’s own framing apply.
  • Pair the map with a trail list or lift list and turn on the matching enableEvents*Selection attributes on both to keep them in sync — see syncing embeds with events.
Last updated on
Conditions widgetTrail list