DTN API & Widget Documentation

Installation

npm

@dtn/premium-extended-forecast-widget

script

https://pre-content-services.dtn.com/ui-widgets/premium-extended-forecast-widget/premium-extended-forecast-widget.js

Example

window.dtn.forecast.createPremiumExtendedForecastWidget({
    "container": "#premium-extended-forecast-widget",
    "token": "dtRmvW6JtQAYuSAFGEiGkQMcsZbMIa2E",
    "units": "Imperial",
    "locale": "en_US",
    "days": 10,
    "user": "firstName.lastName",
    "coordinates": {
        "lat": 37.6968609874419,
        "lon": -117.4465488983569
    },
    "zipCode": "33101",
    "selectedStation": {"stationId":"KTPH", "displayName":"Station 1"},
    "stations": [
        {"stationId":"KTPH","displayName":"Station 1"},
        {"stationId":"KSNA", "displayName":"Station 2"}
    ],
    "showStationSelect": true,
    "showZipCode": true
});

Configuration

token

token: string;

The widget access token associated with your DTN account.

locale

locale: enum ["en_US"];

The language to display the widget.

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: enum ["Imperial", "Metric"];

The measuring units that are used for presenting numbers in the weather forecast.

user

user: string;

User name in format: "firstName.lastName".

days

days: number;

Number of days to display in the widget. Must be in range 6 to 10 inclusive.

coordinates

coordinates: {
   lat: number,
   lon: number
};

If coordinates object is passed in the configurations, the widget will be default populated with the data fetched by the specified latitude and longitude.

zipCode

zipCode: string;

If zip code is passed in the configurations, the widget will be default populated with the data fetched by the specified zip code.

selectedStation

selectedStation: {
   displayName: string,
   stationId: string
};

If selected station object is passed in the configurations, the composite widget will be default populated with the data fetched by the station Id.

stations

stations: [{
   displayName: string ,
   stationId: string
},{ 
   displayName: string ,
   stationId: string
}];

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.

showZipCode

showZipCode: boolean;

Whether the zip code picker to be shown. Default set to true.

Methods

fetchWeatherForecastData

fetchWeatherForecastData:  (
  user: string,
  widgetName: string,
  coordinates: {
      lat?: number,
      lon?: number,
      stationId?: string
  },
  days?: number,
  units?: string,
) => void;

Fetch data according to passed coordinates either by "latitude" and "longitude", or by "stationId".

Callbacks

loadingStateDidChange

loadingStateDidChange: (loading: boolean) => void;

This callback will be called whenever the loading state changes. The callback takes a single argument which represents the new loading state.

coordinatesStateDidChange

coordinatesStateDidChange: (coordinates: {lat: number, lon: number, stationId: string}) => void;

This callback will be called whenever the coordinates state changes. The callback takes a single argument which represents the new coordinates state.

weatherForecastDidChange

weatherForecastDidChange: (weatherForecast: ReadonlyArray<DailyForecast>) => void;

This callback will be called whenever the weather forecast data state changes. The callback takes a single argument which represents the new weather forecast data state.

onError

onError: (error: string) => void;

This callback will be called whenever the error state changed. The callback takes a single argument which represent the new error state.

Composable Widgets