Menu
Content Services

Weather Graphics Widget

Widget displays non-interactive weather maps.

Installation

script

Example

                              window.dtn.map.createWeatherGraphicsWidget({
 


                                
});
                              
                            

Types

Units

type Units = "Imperial" | "Metric";

These are the available metric systems that widget support.

defaultWeatherGraphic

type WeatherGraphics = 
 | "US_SEVERE_WEATHER_RISK" 
 | "US_FORECAST_HIGH_TEMPS" 
 | "US_FORECAST_LOW_TEMPS" 
 | "NA_FORECAST_HIGH_TEMPS" 
 | "NA_FORECAST_LOW_TEMPS" 
 | "US_SURFACE_WEATHER_FORECAST" 
 | "NA_SURFACE_WEATHER_FORECAST";

These are the available weather graphics that widget support.

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.

showWeatherGraphics

showWeatherGraphics?: boolean | WeatherGraphics[] = true;

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.

defaultWeatherGraphic

defaultWeatherGraphic?: WeatherGraphics = "US_SEVERE_WEATHER_RISK";

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

Methods

setWeatherGraphic

setWeatherGraphic: (weatherGraphic: WeatherGraphics) => void;

Set weather graphic and load the widget whit it.

Callbacks

onWeatherGraphicChange

onWeatherGraphicChange: (newWeatherGraphic: WeatherGraphics) => void;

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