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.

Screenshot pending — The Ullr interactive map embed
public/img/embeds/interactive-map.png
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

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: the area's configured default
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
Starting map pitch in degrees.
Default: 45
enableMultiSelectbooleanOptional
Allow selecting more than one object on the map at a time.
Default: false
enableEventsFeatureSelectionbooleanOptional
Emit and listen for cross-element ullr-feature-select events, so two Ullr embeds on the same page stay in sync when a feature is selected.
Default: false
enableEventsTrailSelectionbooleanOptional
Emit and listen for cross-element ullr-trail-select events, so two Ullr embeds on the same page stay in sync when a trail is selected.
Default: false
enableEventsLiftSelectionbooleanOptional
Emit and listen for cross-element ullr-lift-select events, so two Ullr embeds on the same page stay in sync when a lift is selected.
Default: false

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. Ignored unless your key holds the matching history scope.
ullrKeystringOptional
Legacy alias for apiKey, kept so older snippets keep working. Only read when apiKey is absent. Use apiKey in new code.

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.
Conditions widgetTrail list