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]
};
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.map");
dojo.require("esri.layers.wms");
var map;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-89.78,"ymin":41.03,"xmax":-85.54,"ymax":42.75,"spatialReference":{"wkid":4326}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
map.addLayer(basemap);
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.connect(map, 'onLoad', function(theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="details" dojotype="dijit.layout.ContentPane" region="left" splitter="true" style="overflow:auto; width:200px;" >
</div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
</div>
</body>
</html>