Content Services
Local Weather Widget
The Local Weather Widget displays current conditions and a five day forecast.
Example
window.dtn.localWeather.createLocalWeatherWidget({
});
Types
Units
type Units = "Imperial" | "Metric";These are the available metric systems 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[] = trueThe fields that can be turn ON/OFF from current conditions listed field. Default set to true.
weatherFields
weatherFields?: WeatherFields[]Specify the order of fields.
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.