Adding a 3rd party WMS map service using ArcGIS Javascript API

Well, I've looked all over for how to add a WMS to a website using the ArcGIS JavaScript API. ESRI’s resources web site offered a clue by showing how to add a WMS service generated from a ArcGIS Server to a map, but it did not quite work with other WMS Services.

Since I didn’t have much luck there, or elsewhere on the web, I figured I would teach myself. Furthermore, I figured I would document it along the way so that someone else who tried this in the future might have better luck. Before you get started however, I highly recommend you at least glance at the OGC Web Map Services standards, I have even provided you with a link toVersion 1.1.1here which is the version of the WMS that I use in this example.

So, here it goes:

I wanted to have access to the current rain/weather situation in my website, so I chose theCONUS NEXRAD Base Reflectivity (N0R) WMS layer, hosted by Iowa Environmental Mesonet, and I overlayed it onto an existing base map that I have. Doesn't seem like it would be that complicated right? Well if you are left just to ESRI’s web resources and don’t know much about WMS standards it just may be.

The first step is to create a WMS Layer as a ArcGIS DynamicMapServiceLayer usingdojo.declare which requires 3 arguments as follows:

1. The name of the Class that you wish to declare which is a string representation of the name. I will use “my.WeatherRadarWMS”

2. The next parameter is either an object or an array of objects. In this case it is the ESRI ArcGIS JavaScript API defined object DynamicMapServiceLayer.

3. The third parameter is an JSON object hash of properties to be mixed in after all other inheritance has been solved. This instance has two properties constructor and getImageUrlwhich are required.

// Save time by declaring your start extent up front
// this is the full extent for the state of Louisiana

var startExtent = new esri.geometry.Extent({ xmin: -94.647329960938, ymin: 28.1275820820308, xmax: -88.154410039062, ymax: 33.7470889179692, spatialReference: new esri.SpatialReference({wkid: 4269})});

//Create the WMS layer

declare("my.WeatherRadarWMS", sri.layers.DynamicMapServiceLayer, {
// Now for the constructor definition
constructor: function() {
this.initialExtent = this.fullExtent = startExtent;
this.spatialReference = new esri.SpatialReference({wkid:4269});
this.loaded = true;
this.onLoad(this);
},

getImageUrl: function(extent, width, height, callback) {

//***** PAY ATTENTION HERE ******************//
//* The ESRI Example uses a JSON Object which works
//* fine with an ESRIgenerated WMS, but not with
//* WMS’es created by other software. I had change
//* the parameters to a string this section up a bit.
//**********************************************//

var params =
"VERSION=" + "1.1.1" +
"&REQUEST=" + "GetMap" +
"&SRS=EPSG:" + "4326" + // You need to use the WMS’s spatial wkid
"&width=" + width +
"&height=" + height +
"&LAYERS=" + "nexrad-n0r,nexrad-n0r-900913,
nexrad-n0r-m10m,nexrad-n0r-m15m" +
"&STYLES=" +
"&FORMAT=" + "image/png" +
"&TRANSPARENT=" + "true" +
"&bbox=" + extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax
"&exceptions=" + "application/vnd.ogc.se_xml"

callback("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?" + params );
}
})
}

Now all that’s left is to add the layer to your map document as follows:

//Add WMS Weather Layer
map.addLayer(new my.WeatherRadarWMS());

//or ......
//If you wanted to add opacity to the layer,
// you could do this
wmsRadarLayer = new my.WeatherRadarWMS()
wmsRadayLayer.setOpacity(.75)
map.addLayer(wmsRadarLayer)

And there you have it, a WMS layer added via ArcGIS JavaScript API. You can see a live version of this here. I will leave it up for a bit.

Post a comment if you find this helpful or if you have any questions.