Country:

Example

<script type="text/javascript" src="https://widgets.media.weather.com/wxwidget.loader.js?cid=[Your ID]"></script>

<wx-widget type="map" memberid="[Your ID]" mapid="[Your ID]" fullscreen="true" zoomlevel="15" language="en" latitude="38.91" longitude="-77.04"></wx-widget>

Getting Started

Step 1: Provision Your Domain

After licensing Max Web - Traffic Map for your website, please send an email to contentsupport@wsi.com containing a list of all web domains on which the map will be embedded. The widgets and map will only work on domains that are provisioned by TWC.

The TWC Support team will setup your account for the specified web domains and send a return email with the IDs required for your code.

ID NameDescription
cid A unique account identifier required to load the widgets on allowed domains.
memberid, mapid A pair of IDs required to embed the correct map configuration onto the web page.

Step 2: Add the TWC JavaScript

In the or of your HTML page, reference the one of the JavaScript files below with your unique cid value appended as a query parameter. The web page must always use a Weather Company URL as the script src. Copying and serving this code from a local file is prohibited.

There are two production widget environments; standard and long-term stable. Use only one of the following scripts on the web page.

The standard environment always receives the latest widget features and other updates as soon as they are released. Improvements to this environment can occur as frequently as every two weeks.

Use the script below to implement the standard environment code on your website.

<script type="text/javascript" src="https://widgets.media.weather.com/wxwidget.loader.js?cid=[Your ID]"></script>

 

The long-term stable environment will receive updates less frequently than the standard environment. The long-term stable code will be updated to match the standard version during the following months: February, May, August, October. All other changes to long-term stable code are restricted to emergency patches and bug fixes.

Use the script below to implement the long-term stable environment code on your website.

<script type="text/javascript" src="https://widgets-lts.media.weather.com/wxwidget.loader.js?cid=[Your ID]"></script>

 

Step 3: Add TWC Widget Tags

A sample widget tag is:

<div style="width:100%; height:480px;"><wx-widget type="map" memberid="[Your ID]" mapid="[Your ID]" latitude="38.91" longitude="-77.04" zoomlevel="8" group="true"></wx-widget></div">

When the page loads, the TWC JavaScript will locate all widget and map tags on the page and replace them with the specified weather content. Each type of widget and map has a defined set of arguments used for customizing the display.

If embedding more than one widget on the page, you can also use the <wx-config> tag to define global attributes that apply to all widgets.

<wx-config language="en" latitude="38.91" longitude="-77.04" group="true"></wx-config>
<p><wx-widget type="search"></wx-widget></p>
<p><;wx-widget type="map" memberid="[Your ID]" mapid="[Your ID]"></wx-widget></p>

When the page loads, the TWC JavaScript will locate all widget and map tags on the page and replace them with the specified weather content. Each type of widget and map has a defined set of arguments used for customizing the display. Please note that the map must be inside of a container with a defined width and height value. The width and height can be specified in a stylesheet instead of inline.

Try our configuration tool to generate widget code.

Configuration Tool »


HTML Tag Configuration

<wx-config>

The optional <wx-config> tag applies global settings to every <wx-widget> tag on the page. This is useful when there are many Max Web widget tags on the page.
groupgroup="true" tells the map to change locations and toggle units based on the actions of other page widgets.
languagelanguage defines the language for the application. The map supports English ("en") and Spanish ("es").
latitudelatitude defines the latitude of the center of the map on load. Use decimal format only.
longitudelongitude defines the longitude of the center of the map on load. Use decimal format only.
standalonestandalone="true" loads the map in an iFrame.
themetheme defines the default color theme for the user interface ("dark-gray","light-gray","blue").
urlconfigurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude,longitude,zoomlevel, and menuitems. (Example: http://yoururl.com?latitude=43&longitude=-89&zoomlevel=10&menuitems=1102,0002).
urlconfigprefixurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89&twc_zoomlevel=10&twc_menuitems=1102,0002.

<wx-widget>

The <wx-widget> tag is replaced by the Max Web - Traffic Map widget after the page has loaded. The <wx-widget> tag must always be placed inside of a container element, such as a <div>, with defined width and height values. The width value can be a percentage.
ArgumentDefaultDescription
headertrueHeader="false" will hide the top header section of the map. This also hides the "Layers" label and legend.
fullscreenfalseFullscreen="true" causes a fullscreen button to appear beneath the zoom buttons if the browser supports the HTML5 Fullscreen API. When clicked, the button launches the map to fullscreen mode on supported browsers. If the map is in an iFrame, you must allow fullscreen on the iFrame to use this feature.
groupfalsegroup="true" tells the map to change locations and toggle units based on the actions of other page widgets.
languageen-USLanguage defines the language for the application. The map supports English ("en") and Spanish ("es").
latitude39Latitude defines the latitude of the center of the map on load. Use decimal format only.
longitude-97Longitude defines the longitude of the center of the map on load. Use decimal format only.
mapidnullRequired. Mapid determines the domain permissions and available map features in the Layers menu. View menuitems ↓
memberidnullRequired. Memberid is used by TWC to validate an active map account.
menuitems1101,0001Menuitems define which Layers are on by default in the Layers menu. Seperate multiple menuitems using a comma. Only one menuitem from the "Basemap" and "Layers" section can be on by default. View menuitems ↓
opacity.6Opacity defines the opacity level of the "Layers" menuitems. Possible opacity values are ".1", ".2", ".3",".4",".5",".6",".7",".8",".9", and "1" (transparent to opaque).
standalonefalsestandalone="true" loads the map in an iFrame.
themedark-grayTheme defines the default color theme for the user interface ("dark-gray","light-gray","blue").
urlconfigfalseurlconfig="true" tells the widgets to look for widget parameters in the parent page URL query string and to default to those parameters if the widget is set to group="true". Supported urlconfig parameters are latitude,longitude,zoomlevel, and menuitems. (Example: http://yoururl.com?latitude=43&longitude=-89&zoomlevel=10&menuitems=1102,0002).
urlconfigprefixnullurlconfigprefix allows you to prepend a string to the urlconfig parameters to avoid possible query string conflicts. For example, if urlconfigprefix="twc_", then the urlconfig would be activated by http://yoururl.com?twc_latitude=43&twc_longitude=-89&twc_zoomlevel=10&twc_menuitems=1102,0002.
zoomlevel8Zoomlevel defines the default map zoom level on load. It must be an integer between 8 (farthest) and 14 (closest).

Configuration Tool »


Menuitems Codes

menuitemlabelSectionCoverage
1101Earth (basemap)BasemapWorldwide
1102Road (basemap)BasemapWorldwide
2001Traffic FlowsTrafficNorth America
2002Traffic IncidentsTrafficNorth America
0001RadarWeatherRadar is limited to regions of North America, Caribbean, Western Europe, Australia, and Japan. Future radar is Worldwide.
0006Road WeatherWeatherWorldwide


Language Codes

LanguageCode
Englishen
SpanishesIncidents and Camera data are in English only


v3.0.4 - 10/04/2017

  • Urlconfig and urlconfigprefix added with support for latitude,longitude,zoomlevel, and menuitems parameters.
  • Max Web JavaScript SDK support added to widget build.

Version Release Notes

v3.0.3 - 6/19/2017

  • Traffic and Weather map widget platforms consolidated.


Back to top

©2020 – The Weather Company
All Rights Reserved