Station Select Widget

The Station Select Widget supports displaying many weather stations with the ability to update many other widgets when the selected station changes.

Installation

script

Example

                              window.dtn.geolocation.createStationSelectWidget({
 


                                
});

Types

StationId

type StationId = string;

This type describe station id data that may be used to supply the defaultLocation property.

Station

type Station = { id: StationId, displayName: string };

This type describe station data that is needed in stations array property.

Configuration

apiKey

apiKey: string;

The widget access api key associated with your DTN account.

container

container: HTMLElement | string;

The container to mount the widget on. This can be a reference to an HTML element, or a valid selector string. If a string is encountered, document.querySelector will be used to search document for the container.

stations

stations: Station[];

An array of stations to populate the select menu with.

defaultStation

defaultStation?: { stationId: StationId };

Use the optional `defaultStation` to provide an initial station. This will result in the `onStationChange` callback firing without any end-user interaction.

Methods

setStation

setStation: (
  stationOrUndefined: { stationId: StationId } | undefined
) => void;

Set the active station. If the station ID does not match a station in the stations array this call with be a noop. If setStation is called without any arguments it will set the selects active item to the placeholder value

Callbacks

onStationChange

onStationChange: (stationOrUndefined: Station | undefined) => void;

This callback will be called whenever the selected station changed. If there is no station selected, for instance if the setStation method is called with no arguments, this callback will be called with no arguments.

Weather Widgets:

Markets Widgets:

Cash Bids Display Widgets:

News Widgets:

Premium Widgets: