Menu
Content Services

Premium Hourly Forecast Widget

Widget displays hourly weather forecast information (up to 24-hours).

Installation

script

Example

                              window.dtn.forecast.createPremiumHourlyForecastWidget({
 


                                
});
                              
                            

Types

Units

type Units = "Imperial" | "Metric";

These are the available metric sistems 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.