Country:
Languages: English | Español | Français | Japanese

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="7" language="en" latitude="38.91" longitude="-77.04" units="e" menuitems="0017,0021,0009,0015,0002"></wx-widget>

Getting Started

Step 1: Provision Your Domain

After licensing Max Web - Weather Map for your website, please send an email to twcdigitalsupport@us.ibm.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"), French ("fr"), Japanese ("ja"), 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").
unitsunits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
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 - Weather 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
animatefalseanimate="true" will play/animate the default map overlay on page load. Please note that this will increase the map load time and data consumption on the user's device.
countryUScountry updates the menu to only allow map layers and overlays that are applicable to the country specified. Country="IN" changes the basemaps to Survey of India recommendations.
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"), French ("fr"), Japanese ("ja"), 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").
unitseUnits defines the units of measure as either "e" for english/imperial (°F, mph, in.) or "m" for metric (°C, km/h, cm.).
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.
zoomlevel4zoomlevel defines the default map zoom level on load. It must be an integer between 1 (farthest) and 14 (closest).

Configuration Tool »


Menuitems Codes

menuitemlabelSectionCoverageDescription
1101Earth (basemap)BasemapWorldwideSatellite imagery with labels
1102Road (basemap)BasemapWorldwideLight street map with labels
0000Local RadarLayersLocalOnly available to TWC local radar partners. Displays local radar site data on map. No future radar option.
0001RadarLayersRadar is limited to regions of North America, Caribbean, Western Europe, Japan, and Australia. Future radar is Worldwide.Past (radar detected) and future (forecast model) rain, mix, and mixed precipitation
0002Radar and SatelliteLayersRadar is limited to regions of North America, Caribbean, Western Europe, Japan, and Australia. Future radar and satellite are Worldwide.Past and future radar and satellite observed cloud imagery
0003SatelliteLayersWorldwidePast and future satellite observed cloud imagery
0004TemperatureLayersWorldwide

Past and future temperatures

0005Wind SpeedLayersWorldwide

Past and future wind speeds

0006Road WeatherLayersWorldwide

Past depiction of areas at driving risk for wind, fog, water, ponding, snow, and ice

0009Storm TracksOverlaysUSARadar detected storm cells indiciated possible tornado, hail, and strong storms
0010Current ConditionsOverlaysWorldwideCurrent weather conditions
0011Temperature PlotsOverlaysWorldwideCurrent temperatures
0012EarthquakesOverlaysWorldwideRecent earthquakes. Larger circles represent a larger magnitude earthquake
0013Wildfire DetectionOverlaysWorldwideSatellite detected areas with a higher confidence of wildfires
0014Lightning SummaryOverlaysWorldwideGeneralized location of lightning strikes
0015Active Tropical TrackOverlaysWorldwideObserved and forecasted tropical storm path with cone of uncertainty.
0016Active Model TrackOverlaysWorldwideSelect forecat model paths.
0017Alerts - SevereAlertsUSA & Canada, or Western EuropeGovernment issued tornado and thunderstorm alerts
0018Alerts - FloodAlertsUSA & Canada, or Western EuropeGovernment issued flood alerts
0019Alerts - WinterAlertsUSA & Canada, or Western EuropeGovernment issued winter storm, blizzard, snow, freeze, frost, ice, and extreme cold alerts
0020Alerts - MarineAlertsUSA & Canada, or Western EuropeGovernment issued marine, small craft, gale, surf, coastal flood, lake wind alerts
0021Alerts - TropicalAlertsUSA & Canada, or Western EuropeGovernment issued hurricane and tropical storm alerts
0022Alerts - OtherAlertsUSA & Canada, or Western EuropeGovernment issued wind, fire, fog, heat, smoke, ashfall, dust, storm surge, rip current, and beach hazard alerts
0024Feels Like TemperatureLayersWorldwidePast and future TWC feels like temperature
0025UV IndexLayersWorldwidePast and future UV index
002624 Hour PrecipitationLayersWorldwidePast precipitation in the last 24 hours
002724 Hour SnowLayersWorldwidePast snow in the last 24 hours


Language Codes

LanguageCode
Englishen
Frenchfr
Japaneseja
Spanishes


Country Codes

CountryCountry Code
AlbaniaAL
AlgeriaDZ
AndorraAD
AngolaAO
Antigua and BarbudaAG
ArgentinaAR
AustraliaAU
AustriaAT
AzerbaijanAZ
BahamasBS
BahrainBH
BangladeshBD
BarbadosBB
BelarusBY
BelgiumBE
BelizeBZ
BeninBJ
BoliviaBO
Bosnia and HerzegovinaBA
BrazilBR
BruneiBN
BulgariaBG
Burkina FasoBF
BurundiBI
CameroonCM
CanadaCA
Cape VerdeCV
Central African RepublicCF
ChadTD
ChileCL
ChinaCN
ColombiaCO
ComorosKM
Costa RicaCR
Côte d'IvoireCI
CroatiaHR
CyprusCY
Czech RepublicCZ
DenmarkDK
DjiboutiDJ
DominicaDM
Dominican RepublicDO
Domocratic Republic of the CongoCD
East TimorTP
EcuadorEC
EgyptEG
El SalvadorSV
Equatorial GuineaGQ
EritreaER
EstoniaEE
FijiFJ
FinlandFI
FranceFR
GabonGA
GambiaGM
GeorgiaGE
GermanyDE
GhanaGH
GreeceGR
GrenadaGD
GuatemalaGT
GuineaGN
Guinea-BissauGW
GuyanaGY
HaitiHT
HondurasHN
Hong Kong SARHK
HungaryHU
IcelandIS
India (Gujarati)IN
IndonesiaID
IranIR
IraqIQ
IrelandIE
IsraelIL
ItalyIT
JamaicaJM
JapanJP
JordanJO
KazakhstanKZ
KenyaKE
KiribatiKI
KuwaitKW
KyrgyzstanKG
LatviaLV
LebanonLB
LesothoLS
LiberiaLR
LibyaLY
LiechtensteinLI
LithuaniaLT
LuxembourgLU
MacedoniaMK
MadagascarMG
MalaysiaMY
MaliML
MaltaMT
Marshall IslandsMH
MauritaniaMR
MauritiusMU
MexicoMX
MicronesiaFM
MonacoMC
MongoliaMN
MontenegroME
MoroccoMA
MozambiqueMZ
NamibiaNA
NetherlandsNL
New ZealandNZ
NicaraguaNI
NigerNE
NigeriaNG
North KoreaKR
NorwayNO
OmanOM
PakistanPK
PalauPW
PanamaPA
ParaguayPY
PeruPE
PhilippinesPH
PolandPL
PortugalPT
Puerto RicoPR
QatarQA
Republic of CongoCG
RomaniaRO
RussiaRU
RwandaRW
SamoaAS
San MarinoSM
Sao Tome and PrincipeST
Saudi ArabiaSA
SenegalSN
SerbiaRS
Sierra LeoneSL
SingaporeSG
SlovakiaSK
SloveniaSI
Solomon IslandsSB
SomaliaSO
South AfricaZA
South SudanSS
SpainES
Sri LankaLK
St. Kitts and NevisKN
St. LuciaLC
St. Vincent and the GrenadinesVC
State of Vatican City (Holy See)VA
SudanSD
SurinameSR
SwazilandSZ
SwedenSE
SwitzerlandCH
SyriaSY
TaiwanTW
TajikistanTJ
TanzaniaTZ
ThailandTH
TogoTG
TongaTO
Trinidad and TobagoTT
TunisiaTN
TurkeyTR
TurkmenistanTM
TuvaluTV
UgandaUG
UkraineUA
United Arab EmiratesAE
United KingdomGB
United StatesUS
UruguayUY
UzbekistanUZ
VanuatuVU
VenezuelaVE
VietnamVN


Version Release Notes

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.

v3.0.3 - 6/19/2017

  • A version of the map that never times out is now available. This feature is only for private B2B use and cannot be used on publically available websites. Please contact twcdigitalsupport@us.ibm.com to request this feature.

v3.0.2 - 5/01/2017

  • Bug fix: Domain provisioning bug corrected

v3.0.1 - 4/18/2017

  • Support for country codes
  • Theme support added to the map (blue and light-gray)


Back to top

©2020 – The Weather Company
All Rights Reserved