DTN API & Widget Documentation

Installation

npm

@dtn/interactive-map-widget

script

https://pre-content-services.dtn.com/ui-widgets/interactive-map-widget/interactive-map-widget.js

Example

window.dtn.map.createInteractiveMapWidget({
    "container": "#interactive-map-widget-container",
    "token": "oViXqthDGFNVw3IvAsnKrFG1AcfPyA6b",
    "activeLayers": "RADAR"
});

Constants

Layer IDs

type LayerId = "RADAR" | "SATELLITE" | "SURFACE_WINDS" | "NWS_BULLETINS" |"JET_STREAM_WINDS" | "FRONTS" | "TROPICAL_FORECAST"

These are the available layer IDs for use when configuring the Interactive Map Widget.

RADAR - Infrared radar for North America.
SATELLITE - Infrared satellite for North America.
SURFACE_WINDS - Surface winds for North America.
NWS_BULLETINS - National Weather Service (NWS) bulletins for The U.S.A.
JET_STREAM_WINDS - Jet Stream winds at six hour forecast for North America.
FRONTS - Surface weather fronts for North America.
TROPICAL_FORECAST - Tropical forecast for North America.

Configuration

token

token: string;

The widget access token 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.

center

center?: [number, number] = [-93.2563945, 44.7972212];

Specify the initial center point of the map. This option must be an array which represents a coordinate using [longitude,latitude] notation. This location must be within North America, or the closest position will be used.

zoom

zoom?: number = 12;

Specify the initial zoom level of the map. This option must be a number from 1 - 16.

interactive

interactive?: boolean = true;

Specify if the map should be interactive. If false, zoom and pan will be disabled for users, but can still be set programmatically.

activeLayers

activeLayers?: LayerId | LayerId[] = undefined;

Specify which layer(s) should be active on load. This option can take a single LayerId, or an array of multiple LayerIds.

Methods

addLayer

addLayer: (layerId: LayerId) => void;

Add a layer to the map using the corresponding layer ID.

removeLayer

removeLayer: (layerId: LayerId) => void;

Remove a layer from the map using the corresponding layer ID.

setCamera

setCamera: ({
    center,
    zoom,
    animate = true,
}: {
    center?: [number, number];
    zoom?: number;
    animate?: boolean;
}) => void

Set the the view of the camera. Center, zoom or both may be set. By default the

Callbacks

didAddLayer

didAddLayer: (layerId: LayerId) => void;

This callback will be called whenever a layer has been added to the map. It takes a single argument of the corresponding layer ID.

didRemoveLayer

didRemoveLayer: (layerId: LayerId) => void;

This callback will be called whenever a layer has been removed from the map. It takes a single argument of the corresponding layer ID.

cameraDidChange

cameraDidChange: ({
    zoom,
    lngLatBounds,
}: {
    zoom: number;
    lngLatBounds: [[number, number], [number, number]];
}) => void;

This callback will be called whenever the camera changes. It takes a single argument with new camera state. lngLatBounds is represented by southwest and northeast points [sw, ne].

Composable Widgets