Legend - toggle services

ArowanaIndah · ‎06-02-2014

Hi,
I'm using 'Display identify results in popup' sample and try to display the legend like 'Legend - toggle services' sample. I try to mix the code together and it seem not working. I'm not very good in coding.

Thank

<!DOCTYPE html> <html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Identify with Popup</title>       <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body, #map {         height:100%;         width:100%;         margin:0;         padding:0;       }         #rightPane {       width: 20%;     }      #legendPane {       border: solid #97DCF2 1px;     }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>       var map;        require([         "esri/map",         "esri/InfoTemplate",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/SimpleLineSymbol",         "esri/tasks/IdentifyTask",         "esri/tasks/IdentifyParameters",         "esri/dijit/Popup",         "dojo/_base/array",         "esri/Color",         "dojo/dom-construct",         "dojo/parser",         "esri/arcgis/utils",         "esri/dijit/Legend",         "dojo/dom",         "dijit/form/CheckBox",         "dijit/layout/AccordionContainer",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",         "dojo/domReady!"       ], function (         Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,         SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,         arrayUtils, Color, domConstruct, parser, utils, Legend, dom, CheckBox        ) {          parser.parse();         var identifyTask, identifyParams;         var legendLayers = [];            var popup = new Popup({           fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))         }, domConstruct.create("div"));          map = new Map("map", {           basemap: "satellite",           center: [-83.275, 42.573],           zoom: 18,           infoWindow: popup         });          map.on("load", mapReady);               var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";         map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,           { "id": "Parcels" }));        legendLayers.push({ layer: parcelsURL, title: "Place" });            function mapReady () {           map.on("click", executeIdentifyTask);           //create identify tasks and setup parameters           identifyTask = new IdentifyTask(parcelsURL);            identifyParams = new IdentifyParameters();           identifyParams.tolerance = 3;           identifyParams.returnGeometry = true;           identifyParams.layerIds = [0, 2];           identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;           identifyParams.width = map.width;           identifyParams.height = map.height;         }          function executeIdentifyTask (event) {           identifyParams.geometry = event.mapPoint;           identifyParams.mapExtent = map.extent;            var deferred = identifyTask             .execute(identifyParams)             .addCallback(function (response) {               // response is an array of identify result objects               // Let's return an array of features.               return arrayUtils.map(response, function (result) {                 var feature = result.feature;                 var layerName = result.layerName;                  feature.attributes.layerName = layerName;                 if (layerName === 'Tax Parcels') {                   var taxParcelTemplate = new InfoTemplate("",                     "${Postal Address} <br/> Owner of record: ${First Owner Name}");                   feature.setInfoTemplate(taxParcelTemplate);                 }                 else if (layerName === 'Building Footprints') {                   console.log(feature.attributes.PARCELID);                   var buildingFootprintTemplate = new InfoTemplate("",                     "Parcel ID: ${PARCELID}");                   feature.setInfoTemplate(buildingFootprintTemplate);                 }                 return feature;               });             });            // InfoWindow expects an array of features from each deferred           // object that you pass. If the response from the task execution           // above is not an array of features, then you need to add a callback           // like the one above to post-process the response and return an           // array of features.           map.infoWindow.setFeatures([deferred]);           map.infoWindow.show(event.mapPoint);         }            map.on('layers-add-result', function () {           var legend = new Legend({             map: map,             layerInfos: legendLayers           }, "legendDiv");           legend.startup();         });          map.on('layers-add-result', function () {           //add check boxes           arrayUtils.forEach(legendLayers, function (layer) {             var layerName = layer.title;             var checkBox = new CheckBox({               name: "checkBox" + layer.layer.id,               value: layer.layer.id,               checked: layer.layer.visible             });             checkBox.on("change", function () {               var targetLayer = map.getLayer(this.value);               targetLayer.setVisibility(!targetLayer.visible);               this.checked = targetLayer.visible;             });              //add the check box and label to the toc             domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");             var checkLabel = domConstruct.create('label', {                 'for': checkBox.name,                 innerHTML: layerName               }, checkBox.domNode, "after");             domConstruct.place("<br />", checkLabel, "after");           });         });          });     </script>   </head>    <body class="claro"> <!--[if IE 7]> <style>   html, body {     margin: 0;   } </style> <![endif]--> <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="rightPane"        data-dojo-type="dijit/layout/ContentPane"        data-dojo-props="region:'right'">      <div data-dojo-type="dijit/layout/AccordionContainer">       <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"            data-dojo-props="title:'Legend', selected:true">          <div id="legendDiv"></div>        </div>        <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Natural Disasters'">          <span style="padding:10px 0;">Click to toggle the visibility </span>          <div id="toggle" style="padding: 2px 2px;"></div>        </div>     </div>   </div>   <div id="map"        data-dojo-type="dijit/layout/ContentPane"        data-dojo-props="region:'center'"        style="overflow:hidden;">   </div> </div>  </body>  </html>

JakeSkinner · ‎06-03-2014

Hi Arowana,

Looks like you are calling the event 'layers-add-result', so you will need to use map.addLayers method rather than map.addLayer. Try the following:

<!DOCTYPE html> <html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Identify with Popup</title>        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body, #map {         height:100%;         width:100%;         margin:0;         padding:0;       }          #rightPane {       width: 20%;     }      #legendPane {       border: solid #97DCF2 1px;     }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>       var map;        require([         "esri/map",         "esri/InfoTemplate",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/SimpleLineSymbol",         "esri/tasks/IdentifyTask",         "esri/tasks/IdentifyParameters",         "esri/dijit/Popup",         "dojo/_base/array",         "esri/Color",         "dojo/dom-construct",         "dojo/parser",         "esri/arcgis/utils",         "esri/dijit/Legend",         "dojo/dom",         "dijit/form/CheckBox",         "dijit/layout/AccordionContainer",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",         "dojo/domReady!"       ], function (         Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,         SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,         arrayUtils, Color, domConstruct, parser, utils, Legend, dom, CheckBox        ) {          parser.parse();         var identifyTask, identifyParams;         var legendLayers = [];              var popup = new Popup({           fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))         }, domConstruct.create("div"));          map = new Map("map", {           basemap: "satellite",           center: [-83.275, 42.573],           zoom: 18,           infoWindow: popup         });          map.on("load", mapReady);              var legendLayers = [];                  var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";              var parcelLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {           id: 'parcels'         });          legendLayers.push({ layer: parcelLayer, title: 'Parcels' });                    map.on('layers-add-result', function () {           var legend = new Legend({             map: map,             layerInfos: legendLayers           }, "legendDiv");           legend.startup();         });          map.addLayers([parcelLayer ]);          map.on('layers-add-result', function () {           //add check boxes           arrayUtils.forEach(legendLayers, function (layer) {             var layerName = layer.title;             var checkBox = new CheckBox({               name: "checkBox" + layer.layer.id,               value: layer.layer.id,               checked: layer.layer.visible             });             checkBox.on("change", function () {               var targetLayer = map.getLayer(this.value);               targetLayer.setVisibility(!targetLayer.visible);               this.checked = targetLayer.visible;             });              //add the check box and label to the toc             domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");             var checkLabel = domConstruct.create('label', {                 'for': checkBox.name,                 innerHTML: layerName               }, checkBox.domNode, "after");             domConstruct.place("<br />", checkLabel, "after");           });         });                  function mapReady () {           map.on("click", executeIdentifyTask);           //create identify tasks and setup parameters           identifyTask = new IdentifyTask(parcelsURL);            identifyParams = new IdentifyParameters();           identifyParams.tolerance = 3;           identifyParams.returnGeometry = true;           identifyParams.layerIds = [0, 2];           identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;           identifyParams.width = map.width;           identifyParams.height = map.height;         }          function executeIdentifyTask (event) {           identifyParams.geometry = event.mapPoint;           identifyParams.mapExtent = map.extent;            var deferred = identifyTask             .execute(identifyParams)             .addCallback(function (response) {               // response is an array of identify result objects               // Let's return an array of features.               return arrayUtils.map(response, function (result) {                 var feature = result.feature;                 var layerName = result.layerName;                  feature.attributes.layerName = layerName;                 if (layerName === 'Tax Parcels') {                   var taxParcelTemplate = new InfoTemplate("",                     "${Postal Address} <br/> Owner of record: ${First Owner Name}");                   feature.setInfoTemplate(taxParcelTemplate);                 }                 else if (layerName === 'Building Footprints') {                   console.log(feature.attributes.PARCELID);                   var buildingFootprintTemplate = new InfoTemplate("",                     "Parcel ID: ${PARCELID}");                   feature.setInfoTemplate(buildingFootprintTemplate);                 }                 return feature;               });             });            // InfoWindow expects an array of features from each deferred           // object that you pass. If the response from the task execution           // above is not an array of features, then you need to add a callback           // like the one above to post-process the response and return an           // array of features.           map.infoWindow.setFeatures([deferred]);           map.infoWindow.show(event.mapPoint);         }                                   });     </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="rightPane"       data-dojo-type="dijit/layout/ContentPane"       data-dojo-props="region:'right'">          <div data-dojo-type="dijit/layout/AccordionContainer">           <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"           data-dojo-props="title:'Legend', selected:true">              <div id="legendDiv"></div>            </div>            <div data-dojo-type="dijit/layout/ContentPane"           data-dojo-props="title:'Natural Disasters'">              <span style="padding:10px 0;">Click to toggle the visibility </span>              <div id="toggle" style="padding: 2px 2px;"></div>            </div>         </div>       </div>       <div id="map"       data-dojo-type="dijit/layout/ContentPane"       data-dojo-props="region:'center'"       style="overflow:hidden;"></div>     </div>    </body>  </html>

View solution in original post

JakeSkinner · ‎06-03-2014

Hi Arowana,

Looks like you are calling the event 'layers-add-result', so you will need to use map.addLayers method rather than map.addLayer. Try the following:

<!DOCTYPE html> <html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Identify with Popup</title>        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body, #map {         height:100%;         width:100%;         margin:0;         padding:0;       }          #rightPane {       width: 20%;     }      #legendPane {       border: solid #97DCF2 1px;     }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>       var map;        require([         "esri/map",         "esri/InfoTemplate",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/SimpleLineSymbol",         "esri/tasks/IdentifyTask",         "esri/tasks/IdentifyParameters",         "esri/dijit/Popup",         "dojo/_base/array",         "esri/Color",         "dojo/dom-construct",         "dojo/parser",         "esri/arcgis/utils",         "esri/dijit/Legend",         "dojo/dom",         "dijit/form/CheckBox",         "dijit/layout/AccordionContainer",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",         "dojo/domReady!"       ], function (         Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,         SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,         arrayUtils, Color, domConstruct, parser, utils, Legend, dom, CheckBox        ) {          parser.parse();         var identifyTask, identifyParams;         var legendLayers = [];              var popup = new Popup({           fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))         }, domConstruct.create("div"));          map = new Map("map", {           basemap: "satellite",           center: [-83.275, 42.573],           zoom: 18,           infoWindow: popup         });          map.on("load", mapReady);              var legendLayers = [];                  var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";              var parcelLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {           id: 'parcels'         });          legendLayers.push({ layer: parcelLayer, title: 'Parcels' });                    map.on('layers-add-result', function () {           var legend = new Legend({             map: map,             layerInfos: legendLayers           }, "legendDiv");           legend.startup();         });          map.addLayers([parcelLayer ]);          map.on('layers-add-result', function () {           //add check boxes           arrayUtils.forEach(legendLayers, function (layer) {             var layerName = layer.title;             var checkBox = new CheckBox({               name: "checkBox" + layer.layer.id,               value: layer.layer.id,               checked: layer.layer.visible             });             checkBox.on("change", function () {               var targetLayer = map.getLayer(this.value);               targetLayer.setVisibility(!targetLayer.visible);               this.checked = targetLayer.visible;             });              //add the check box and label to the toc             domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");             var checkLabel = domConstruct.create('label', {                 'for': checkBox.name,                 innerHTML: layerName               }, checkBox.domNode, "after");             domConstruct.place("<br />", checkLabel, "after");           });         });                  function mapReady () {           map.on("click", executeIdentifyTask);           //create identify tasks and setup parameters           identifyTask = new IdentifyTask(parcelsURL);            identifyParams = new IdentifyParameters();           identifyParams.tolerance = 3;           identifyParams.returnGeometry = true;           identifyParams.layerIds = [0, 2];           identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;           identifyParams.width = map.width;           identifyParams.height = map.height;         }          function executeIdentifyTask (event) {           identifyParams.geometry = event.mapPoint;           identifyParams.mapExtent = map.extent;            var deferred = identifyTask             .execute(identifyParams)             .addCallback(function (response) {               // response is an array of identify result objects               // Let's return an array of features.               return arrayUtils.map(response, function (result) {                 var feature = result.feature;                 var layerName = result.layerName;                  feature.attributes.layerName = layerName;                 if (layerName === 'Tax Parcels') {                   var taxParcelTemplate = new InfoTemplate("",                     "${Postal Address} <br/> Owner of record: ${First Owner Name}");                   feature.setInfoTemplate(taxParcelTemplate);                 }                 else if (layerName === 'Building Footprints') {                   console.log(feature.attributes.PARCELID);                   var buildingFootprintTemplate = new InfoTemplate("",                     "Parcel ID: ${PARCELID}");                   feature.setInfoTemplate(buildingFootprintTemplate);                 }                 return feature;               });             });            // InfoWindow expects an array of features from each deferred           // object that you pass. If the response from the task execution           // above is not an array of features, then you need to add a callback           // like the one above to post-process the response and return an           // array of features.           map.infoWindow.setFeatures([deferred]);           map.infoWindow.show(event.mapPoint);         }                                   });     </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="rightPane"       data-dojo-type="dijit/layout/ContentPane"       data-dojo-props="region:'right'">          <div data-dojo-type="dijit/layout/AccordionContainer">           <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"           data-dojo-props="title:'Legend', selected:true">              <div id="legendDiv"></div>            </div>            <div data-dojo-type="dijit/layout/ContentPane"           data-dojo-props="title:'Natural Disasters'">              <span style="padding:10px 0;">Click to toggle the visibility </span>              <div id="toggle" style="padding: 2px 2px;"></div>            </div>         </div>       </div>       <div id="map"       data-dojo-type="dijit/layout/ContentPane"       data-dojo-props="region:'center'"       style="overflow:hidden;"></div>     </div>    </body>  </html>

ArowanaIndah · ‎06-04-2014

Hi Jake,
Thank for the answer. Sorry for asking again. If i want to use multiple ArcGISDynamicMapServiceLayer, from a code above how do i configure IdentifyTask code.

Thank

        map.on("load", mapReady);

        function mapReady () {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 2];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }

        function executeIdentifyTask (event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;

          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                if (layerName === 'Tax Parcels') {
                  var taxParcelTemplate = new InfoTemplate("",
                    "${Postal Address} <br/> Owner of record: ${First Owner Name}");
                  feature.setInfoTemplate(taxParcelTemplate);
                }
                else if (layerName === 'Building Footprints') {
                  console.log(feature.attributes.PARCELID);
                  var buildingFootprintTemplate = new InfoTemplate("",
                    "Parcel ID: ${PARCELID}");
                  feature.setInfoTemplate(buildingFootprintTemplate);
                }
                return feature;
              });
            });

          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }