Menu
Content Services

Local Weather Widget

The Local Weather Widget displays current conditions and a five day forecast.

Installation

script

Example

                              window.dtn.localWeather.createLocalWeatherWidget({
 


                                
});
                              
                            

Types

Units

type Units = "Imperial" | "Metric";

These are the available metric sistems that widget support.

Coordinates

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

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

PostalCode

type PostalCode = { postalCode: string };

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

StationId

type StationId = string;

This type describe station id data that may be used to supply the defaultLocation property.

Station

type Station = { id: StationId, displayName: string };

This type describe station data that is needed in stations array property.

WeatherFields

type WeatherFields = 
 | "TEMPERATURE" 
 | "FEELS_LIKE" 
 | "HUMIDITY" 
 | "BAROMETER" 
 | "DEW_POINT" 
 | "WIND_DIRECTION" 
 | "WIND_SPEED" 
 | "PRECIP_TYPE" 
 | "PRECIP_CHANCE" 
 | "PRECIP_AMOUNT" 
 | "EVAPOTRANSPIRATION" 
 | "SUNRISE" 
 | "SUNSET" 
 | "OBSERVATION_OR_FORECAST";

These are the available weather fields that widget supports.

Configuration

apiKey

apiKey: string;

The widget access api key associated with your DTN account.

units

units?: Units = "Imperial";

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.

defaultLocation

defaultLocation?: PostalCode | Coordinates | { stationId: StationId };

If { postalCode: "postal code value" } object is passed in the configurations, the composite widget will be default populated with the data fetched by the specified postal code. If { stationId: "station id value"} object is passed in the configurations, the composite widget will be default populated with the data fetched by the station Id. If { latitude: "latitude coordinates value", longitude: "longitude coordinates value"} object is passed in the configurations, the composite widget will be default populated with the data fetched by the specified latitude and longitude.

stations

stations?: Station[];

The list with stations that is going to be listed in the locations dropdown.

showStationsSelect

showStationsSelect?: boolean;

Whether the station select dropdown to be shown. Default set to true.

showPostalCodeInput

showPostalCodeInput?: boolean;

Whether the zip/postal code picker to be shown. Default set to true.

showForecast

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

showWeatherDetails

showWeatherDetails?: boolean | WeatherFields[] = true

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

Methods

setLocation

setLocation: (
  location: PostalCode | Coordinates | { stationId: StationId }
) => void;

Set location and load the widget with it.

Callbacks

onStationChange

onStationChange: (newStation: Station) => void;

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

onPostalCodeChange

onPostalCodeChange: (newPostalCode: PostalCode & Coordinates) => void;

This callback will be called whenever the postal code state changes. The callback takes a single argument which represents the new postal code and coordinates state.

onWeatherChange

onWeatherChange: (newCoordinates: Coordinates) => void;

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