Interactive Map Widget

Interactive map widget displays map layers with ability to zoom, pan and animate.

Installation

script

Example

                              window.dtn.map.createInteractiveMapWidget({
 


                                
});

Types

Layer IDs

type LayerId =
    | "RADAR"
    | "SATELLITE"
    | "SURFACE_WINDS"
    | "NWS_BULLETINS"
    | "JET_STREAM_WINDS"
    | "FRONTS"
    | "TROPICAL_FORECAST"
    | "SOIL_TEMPERATURES"
    | "CROP_MOISTURE_INDEX"
    | "RAINFALL_ESTIMATE"
    | "GROWING_DEGREE_UNITS"
    | "GROWING_DEGREE_UNITS_CONTOUR"
    | "PALMER_DROUGHT_INDEX"
    | "DROUGHT_MONITOR";

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.
SOIL_TEMPERATURES - 4" soil temperatures for North America.
CROP_MOISTURE_INDEX - Crop moisture index for North America.
RAINFALL_ESTIMATE - 24-hour rainfall estimate for North America.
GROWING_DEGREE_UNITS - Growing degree units for North America.
GROWING_DEGREE_UNITS_CONTOUR - Growing degree units contour for North America.
PALMER_DROUGHT_INDEX - Palmer drought index for North America.
DROUGHT_MONITOR - Drought monitor for North America.

Coordinates

type Coordinates = { latitude: number; longitude: number; };

A coordinate represents a point on the globe by latitude and longitude.

Bounding Box

type BoundingBox = { southWest: Coordinates; northEast: Coordinates; };

A bounding box represents an area of the globe. It is defined by its southwestern and northeastern coordinates.

PostalCode

type PostalCode = { postalCode: string };

This type describe postal code data that may be used to supply the defaultLocation property.

Location

type Location =
  | BoundingBox
  | (Coordinates & { zoom?: number })
  | (PostalCode & { zoom?: number });

The location type represents the multiple types that can be used to manipulate the map's camera.

LayerMetaData

type LayerMetaData = { id: LayerId; opacity: number; };

This type describe layer meta data that may be used to supply the layersConfig property.

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.

defaultLocation

defaultLocation?: Location = {
    longitude: -93.2563945,
    latitude: 44.7972212,
    zoom: 12
  };

Specify the default location of the map.

defaultLayers

defaultLayers?: 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.

layersConfig

layersConfig?: LayerMetaData[] = undefined;

Use the optional `layersConfig` to override the default layer configuration (opacity)

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.

alwaysShowLayers

alwaysShowLayers?: boolean = false;

Specify if the layers sidebar panel should always be visible.

Methods

setLocation

setLocation: (location: Location, animate = true) => void;

Update the location of the map. Optionally specify if the transition should be animated or not.

addLayer

addLayer: (layerId: LayerId) => void;

Add a new layer to the map.

removeLayer

removeLayer: (layerId: LayerId) => void;

Remove an existing layer from the map.

startAnimation

startAnimation: () => void;

Start the animation playback of all active animatable layers.

stopAnimation

stopAnimation: () => void;

Stop animation playback.

Callbacks

onLayerAdded

onLayerAdded: (layerId: LayerId) => void;

This callback is called whenever a layer is added to the map.

onLayerRemoved

onLayerRemoved: (layerId: LayerId) => void;

This callback is called whenever a layer is removed from the map.

onAnimationStart

onAnimationStart: () => void;

This callback is called whenever animation playback is started.

onAnimationStop

onAnimationStop: () => void;

This callback is called whenever animation playback is stopped.

Weather Widgets:

Markets Widgets:

Cash Bids Display Widgets:

News Widgets:

Premium Widgets: