WMS - resource info | ArcGIS API for JavaScript

This sample shows how to work with an OGC Web Map Service (WMS). When WMSLayers are added to the map only the specified layers are displayed. The code below creates a new WMSLayer then uses the visibleLayers constructor option to specify which layers are displayed.

var wmsLayer = new esri.layers.WMSLayer(wmsURL,{
  resourceInfo: resourceInfo,
  visibleLayers: ["1","2"]
});

Note that in the code above a resourceInfo object is also provided. The resourceInfo object is used to define information about the service such as extent, layers, version etc. The benefit to specifying the resource info is that a proxy is not needed to work with WMS layers.

var layer1 = new esri.layers.WMSLayerInfo({name:"1",title:"Rivers"});
var layer2 = new esri.layers.WMSLayerInfo({name:"2",title:"Cities"});
var resourceInfo = {
  extent: new esri.geometry.Extent(-126.405,31.02,-109.66,41.52,{wkid: 4326}),
  layerInfos: [layer1,layer2]
};

Code

<!DOCTYPE html>
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with WMS</title> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style> 

    <script>var dojoConfig = {parseOnLoad: true};</script> 
    <script src="http://js.arcgis.com/3.6/"></script> 
    <script> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.wms");
      
      var map;
 
      function init() {
        map = new esri.Map("map", {
          basemap: "streets",
          center: [-82.617, 38.959],
          zoom: 3
        });
 
        var layer1 = new esri.layers.WMSLayerInfo({name:"1",title:"Rivers"});
        var layer2 = new esri.layers.WMSLayerInfo({name:"2",title:"Cities"});
        var resourceInfo = {
          extent: new esri.geometry.Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
          layerInfos: [layer1,layer2]
        };
        var wmsLayer = new esri.layers.WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer",
          {resourceInfo: resourceInfo,
          visibleLayers: ["1","2"]
          }
        ); 
        map.addLayers([wmsLayer]);
       
        var content = [];
        content.push("<b>Layers</b>:<ul>");
        dojo.forEach(wmsLayer.layerInfos, function(layerInfo) {
          content.push("<li>"  + layerInfo.title + "</li>");
        });
        content.push("</ul>");
        content.push("<b>WMS Version</b>:" + wmsLayer.version + "<br />");
        dojo.byId('details').innerHTML = content.join("");
      }

      dojo.ready(init);
    </script> 
  </head> 
  
  <body class="claro"> 
    <div id="content" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:true" 
         style="width: 100%; height: 100%; margin: 0;"> 

      <div id="details" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'left', splitter:true" 
           style="overflow:auto; width:200px;" > 
      </div> 

      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" 
           style="overflow:hidden;"> 
      </div> 

    </div> 
  </body> 
</html>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox