DTN API & Widget Documentation

Installation

npm

@dtn/weather-graphics-widget

script

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

Example

window.dtn.map.createWeatherGraphicsWidget({
    "container": "#weather-graphics-widget",
    "token": "oViXqthDGFNVw3IvAsnKrFG1AcfPyA6b",
    "locale": "en_US",
    "maps": {
        "US Severe Weather Risk": true,
        "US Forecast High Temperatures": true,
        "US Forecast Low Temperatures": true
    },
    "defaultMap": "",
    "isMapSidebarVisible": 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.

maps

defaultMap: {
    "US Severe Weather Risk": boolean,
    "US Forecast High Temperatures": boolean
    "US Forecast Low Temperatures": boolean
};

List of maps that are shown in the widget sidebar. User can turn on and off each map from the list. Maps can be rearrange in wanted display order. Default set to true.

defaultMap

defaultMap: string;

Name of the map that can be set as active when initially load the widget. If no specified, by default first map is set as active one.

isMapSidebarVisible

isMapSidebarVisible: boolean;

Whether or not the sidebar will be visible. Default set to true.

Methods

setDefaultMap

setDefaultMap: (defaultMap: string) => void;

Set current default map.

setMapSidebarState

setMapSidebarState: (isMapSidebarVisible: boolean) => void;

Set if widget sidebar is visible.

setMapsList

setMapsList: (
  maps: {
      "US Severe Weather Risk"?: boolean;
      "US Forecast High Temperatures"?: boolean;
      "US Forecast Low Temperatures"?: boolean;
      [key: string]: boolean | undefined;
 },
 defaultMap?: string
) => void;

Set map list by providing list of maps and default map name.

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.

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