DTN API & Widget Documentation

Installation

npm

@dtn/local-weather-widget

script

https://pre-content-services.dtn.com/ui-widgets/local-weather-widget/local-weather-widget.js

Example

window.dtn.localWeather.createLocalWeatherWidget({
    "container": "#local-weather-widget",
    "token": "oViXqthDGFNVw3IvAsnKrFG1AcfPyA6b",
    "units": "Imperial",
    "locale": "en_US",
    "showStationSelect": true,
    "showZipCode": true,
    "showFiveDaysForecast": true,
    "showCurrentConditions": true,
    "coordinates": { "lat": 45, "lon": -93.3 },
    "zipCode": "33101",
    "selectedStation": {
        "displayName": "",
        "stationId": "KTPH"
    },
    "stations": [
        { "stationId": "KTPH", "displayName": "Station 1" },
        { "stationId": "KSNA", "displayName": "Station 2" }
    ],
    "visibleFields": {
        "temperature": true,
        "feelsLike": true,
        "humidity": true,
        "barometer": true,
        "dewPoint": true,
        "windDirection": true,
        "windSpeed": true,
        "sunrise": true,
        "sunset": true,
        "observation_or_forecast": 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.

units

units: enum ["Imperial", "Metric"];

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

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.

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.

showFiveDaysForecast

showFiveDaysForecast: boolean;

Whether the five days forecast section to be shown. Default set to true.

showCurrentConditions

showCurrentConditions: boolean;

Whether the current conditions section to be shown. Default set to true.

coordinates

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

If coordinates object is passed in the configurations, the composite 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 composite 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.

visibleFields

visibleFields: {
   temperature: boolean,
   feelsLike: boolean,
   humidity: boolean,
   barometer: boolean,
   dewPoint: boolean,
   windDirection: boolean,
   windSpeed: boolean,
   sunrise: boolean,
   sunset: boolean,
   observation_or_forecast: boolean,
}

The fields that can be turn ON/OFF from current conditions listed field. Default set to true.

Composable Widgets