Content Services
Premium Hourly Forecast Widget
Widget displays hourly weather forecast information (up to 24-hours).
Example
window.dtn.forecast.createPremiumHourlyForecastWidget({
});
Types
Units
type Units = "Imperial" | "Metric";These are the available metric systems that widget support.
Coordinates
type Coordinates = { latitude: number, longitude: number };This type describe coordinates data that may be used to supply the defaultLocation property.
PostalCode
type PostalCode = { postalCode: string };This type describe postal code data that may be used to supply the defaultLocation property.
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.
WeatherFields
type WeatherFields =
| "FEELS_LIKE"
| "SKY_COVER"
| "HUMIDITY"
| "DEW_POINT"
| "WIND_DIRECTION"
| "WIND_SPEED"
| "PRECIP_TYPE"
| "PRECIP_CHANCE"
| "PRECIP_AMOUNT";The available weather fields that widget supports.
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.
units
units?: Units = "Imperial";The measuring units that are used for presenting numbers in the weather forecast.
userId
userId: string;User name in format: "firstName.lastName".
defaultLocation
defaultLocation?: PostalCode | Coordinates | { stationId: StationId };If { postalCode: "postal code value" } object is passed in the configurations, the widget will be default populated with the data fetched by the specified postal code. If { stationId: "station id value"} object is passed in the configurations, the widget will be default populated with the data fetched by the station Id. If { latitude: "latitude coordinates value", longitude: "longitude coordinates value"} object is passed in the configurations, the widget will be default populated with the data fetched by the specified latitude and longitude.
stations
stations?: Station[]The list with stations that is going to be listed in the locations dropdown.
showStationSelect
showStationSelect?: boolean;Whether the station select dropdown to be shown. Default set to true.
showPostalCodeInput
showPostalCodeInput?: boolean;Whether the zip/postal code picker to be shown. Default set to true.
showWeatherDetails
showWeatherDetails?: boolean | WeatherFields[] = true;The fields that can be turn ON/OFF from listed field. Default set to true.
Methods
setLocation
setLocation: (
location: PostalCode | Coordinates | { stationId: StationId }
) => void;Set location and load the widget with it.
Callbacks
onStationChange
onStationChange: (newStation: Station) => void;This callback will be called whenever the station state changes. The callback takes a single argument which represents the new station state.
onPostalCodeChange
onPostalCodeChange: (newPostalCode: PostalCode & Coordinates) => void;This callback will be called whenever the postal code state changes. The callback takes a single argument which represents the new postal code and coordinates state.
onWeatherChange
onWeatherChange: (newCoordinates: Coordinates) => void;This callback will be called whenever the weather data state changes. The callback takes a single argument which represents the new coordinates state.