dynamicUrl = "http://<myserver>/ArcGIS/rest/services/WASDDefault/MapServer"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl,{opacity:0.45}); var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl); dojo.connect(map,'onLayersAddResult',function(results){ //add the legend var legend = new esri.dijit.Legend({ map:map, layerInfos:[{layer:dynamicLayer,title:""}], arrangement:esri.dijit.Legend.ALIGN_RIGHT },"legendDiv"); legend.startup(); }); map.addLayer(basemap); map.addLayers([dynamicLayer,referenceLayer]); }
If the layer is an ArcGISDynamicMapServiceLayer or ArcGISTiledMapServiceLayer created using ArcGIS Server 10.0 SP1 or higher the legend is generated using the REST Map Service legend resource.
If the layers are version 10 or lower the legend is created using the ArcGIS.com legend service. In order to use the ArcGIS.com legend service your map service needs to be publicly accessible and your application must be able to access ArcGIS.com.
var legendLayers = [];
<!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" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title> </title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <link rel="stylesheet" type="text/css" href="css/layout.css"/> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("dijit.layout.TabContainer"); dojo.require("esri.dijit.Legend"); dojo.require("esri.layers.FeatureLayer"); dojo.require("dijit.form.CheckBox") var map; function init() { var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}}); map = new esri.Map("map", { extent: initialExtent }); dojo.connect(map, 'onLoad', function (map) { dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"; var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"; var dynamicUrl = "http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Service_Requests/FeatureServer/0"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl); var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl); var legendLayers = []; legendLayers.push({ layer: dynamicLayer, title: "Service Requests" }); dojo.connect(map, 'onLayersAddResult', function (results) { //add the legend var legend = new esri.dijit.Legend({ map: map, layerInfos: legendLayers, arrangement: esri.dijit.Legend.ALIGN_RIGHT }, "legendDiv"); legend.startup(); }); map.addLayer(basemap); map.addLayers([dynamicLayer, referenceLayer]); dojo.connect(map, 'onLayersAddResult', function (results) { //add check boxes dojo.forEach(legendLayers, function (layer) { var layerName = layer.title; var checkBox = new dijit.form.CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function (evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //add the check box and label to the toc dojo.place(checkBox.domNode, dojo.byId("toggle"), "after"); var checkLabel = dojo.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after"); dojo.place("<br />", checkLabel, "after"); }); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"> This is the header section <div id="subheader">subheader</div> </div> <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"> <div dojotype="dijit.layout.TabContainer" > <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"> <div id="toggle"></div> <div id="legendDiv"></div> </div> <div dojotype="dijit.layout.ContentPane" title="Tab 2" > Content for the second tab </div> </div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" > this is the footer section </div> </div> </body> </html>
dojo.connect(map, 'onLoad', function (map) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"; //var dynamicUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyHazardsandRisks/MapServer"; var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"; var dynamicUrl = "http://<localserver>/ArcGIS/rest/services/OneLayer/MapServer"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl, { opacity: 0.45 }); var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl); legendLayers.push({ layer: dynamicLayer, title: "Dolfin" }); dojo.connect(map, 'onLayersAddResult', function (results) { //add the legend var legend = new esri.dijit.Legend({ map: map, layerInfos: legendLayers, arrangement: esri.dijit.Legend.ALIGN_RIGHT }, "legendDiv"); legend.startup(); }); map.addLayer(basemap); map.addLayers([dynamicLayer, referenceLayer]); dojo.connect(map, 'onLayersAddResult', function (results) { //add check boxes dojo.forEach(legendLayers, function (layer) { var layerName = layer.title; var checkBox = new dijit.form.CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function (evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //add the check box and label to the toc dojo.place(checkBox.domNode, dojo.byId("toggle"), "after"); var checkLabel = dojo.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after"); dojo.place("<br />", checkLabel, "after"); }); }); } //show map on load dojo.addOnLoad(init);
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
