Skip to Content
EmbedsConditions widget

Conditions widget

<ullr-widget> is the complete conditions experience in one element: an interactive map of the mountain beside a details panel your visitors can browse. The panel has tabs for terrain park features, trails and lifts, plus the updates your crew posts through the day.

Use it when you want a single “conditions” page and do not want to assemble one out of the smaller embeds. If you only need a map, or only a status table, the interactive map, trail list and lift list are lighter.

The Ullr conditions widget
The conditions widget: map on one side, browsable features, trails, lifts and reports on the other.

Install

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

The widget fills its container, so it needs an explicit height — without one it collapses to nothing and the page looks empty. The style attribute above is what the dashboard generates; a CSS rule works just as well.

Required scopes

resorts:read, features:read and trails:read, plus updates:read. Add lifts:read when showLifts="true".

The widget fetches features and trails whichever layers you switch on — showFeatures and showTrails only control what it draws, not what it requests. So a widget showing lifts alone still needs features:read and trails:read, or those calls 403 and the panel stays empty. Only lifts are fetched conditionally.

If you hide the Updates tab with hideParkLogs="true", you can drop updates: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 features:readHistory and trails:readHistory, plus lifts:readHistory when showLifts is on. 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 and the Updates tab are always read live, so resorts:read and updates:read are unchanged — the Updates tab still shows current reports even in a historical view.
ullrKeystringOptional
Legacy alias for apiKey, kept so older snippets keep working. Only read when apiKey is absent. Use apiKey in new code.

Widget options

hideParkLogsbooleanOptional
Hide the Updates tab (park reports). The dashboard shows this as the inverse — "Show park reports" — so a ticked box there means this attribute is absent.
Default: false
defaultEntityFEATURES | TRAILS | LIFTSOptional
Which panel opens first.
Default: FEATURES (TRAILS when sport is BIKE)
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
Starting map pitch in degrees. Ignored unless between 0 and 90.
Default: 45
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 widget speaks the same selection protocol as the other three embeds, so it stays in sync with a map or a trail list on the same page. Each event is off until you set the matching enableEvents…Selection attribute above. See syncing embeds with events for the protocol and worked examples.

Emitted

Dispatched on window when a visitor selects something in the widget.

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

Listened for

Sent by another embed — or by your own code — these change what the widget is showing.

ullr-feature-selecteddetail: { featureId: string, senderId: string }
Switches to the Features panel, selects that feature and centres the map on it.
ullr-trail-selecteddetail: { trailId: string, senderId: string }
Switches to the Trails panel, selects that trail and flies the map to it.
ullr-lift-selecteddetail: { liftId: string, senderId: string }
Switches to the Lifts panel, selects that lift and moves the map to it.
// select a trail in the widget from your own code
window.dispatchEvent(new CustomEvent('ullr-trail-selected', {
  detail: { trailId: 'a1b2c3d4-…', senderId: 'my-site' },
  bubbles: true,
  composed: true,
}));

Older event names

The widget originally used its own vocabulary, with a bare id string as the payload. Those names still work, so pages written against them need no changes.

ullr-select-feature / -trail / -liftdetail: string — the id
Emitted alongside the standard event whenever a selection happens on the page. Superseded by ullr-feature-selected and friends.
ullr-external-select-feature / -trail / -liftdetail: string — the id
Accepted as a way to drive selection, and translated into the standard event so every other embed on the page responds too. Prefer dispatching the standard event directly.

Use the standard events for anything new. The old names are kept working, but they are widget-specific — the map and the list elements have never spoken them.

Notes

  • Layer defaults differ from the dashboard. The element defaults to features on, trails and lifts off. The dashboard configurator defaults all three on and always writes them into the snippet — so a hand-written tag that omits them will show less than the one the dashboard generates.
  • theme works here and on the other three embeds, but the dashboard only offers a colour picker for this one. Set it by hand elsewhere if you want it.
  • The Updates tab reads park reports through the Public API, so a key without updates:read shows an empty tab rather than an error. Hide it with hideParkLogs="true" if you are not using it.
  • A page rarely needs the widget and the smaller embeds, since the widget already contains a map and its own lists — but the combination works if you want it, and stays in sync through selection events.
Last updated on
Keys & domainsInteractive map