Creating a WMS layer typeE-mail This Topic Printable Version Give Us Feedback

View live sample

Description

This sample creates a simple dynamic layer using a WMS endpoint. First, the code declares a new class my.CityStatesRiversUSAWMSLayer, which extends the esri.layers.DynamicMapServiceLayer.

dojo.declare("my.CityStatesRiversUSAWMSLayer", DynamicMapServiceLayer, {
  ...
});

Next a constructor is defined for the class. The layer's initial and full extents, as well as its spatial reference, are defined within this constructor. The code also sets the loaded property of the layer to true and calls onLoad.

constructor: function() {
  this.initialExtent = this.fullExtent = new esri.geometry.Extent(...);
  this.spatialReference = new esri.SpatialReference(...);

  this.loaded = true;
  this.onLoad(this);
},

Finally, the getImageUrl method is implemented. This method returns the URL of the image to be added to the map. The URL is generated using the extent, width & height arguments passed in to the function. The callback is called and the URL string is passed back as the only argument.

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

  callback("..." + dojo.objectToQuery(params));
}

To use this layer, the code creates a map and adds a tiled layer from ArcGIS Online, then places the newly created WMS layer on top.

function init() {
  var map = new esri.Map("map");
  map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("..."));
  map.addLayer(new my.CityStatesRiversUSAWMSLayer());
}

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>WMS</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/soria/soria.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

    <script type="text/javascript">
      dojo.require("esri.map");

      dojo.declare("my.CityStatesRiversUSAWMSLayer", esri.layers.DynamicMapServiceLayer, {
        constructor: function() {
          this.initialExtent = this.fullExtent = new esri.geometry.Extent({xmin:-180,ymin:0,xmax:0,ymax:90,spatialReference:{wkid:4326}});
          this.spatialReference = new esri.SpatialReference({wkid:4326});

          this.loaded = true;
          this.onLoad(this);
        },

        getImageUrl: function(extent, width, height, callback) {
          var params = {
            request:"GetMap",
            transparent:true,
            format:"image/png",
            bgcolor:"ffffff",
            version:"1.1.1",
            layers:"0,1",
            styles: "default,default",
            exceptions: "application/vnd.ogc.se_xml",

            //changing values
            bbox:extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax,
            srs: "EPSG:" + extent.spatialReference.wkid,
            width: width,
            height: height
          };

          callback("http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?" + dojo.objectToQuery(params));
        }
      })

      function init() {
        var map = new esri.Map("map");
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"));
        map.addLayer(new my.CityStatesRiversUSAWMSLayer());
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    <div id="map" class="soria" style="position:relative; width:1024px; height:512px; border:2px solid #000;"></div>
  </body>
</html>