AnsweredAssumed Answered

Legend - toggle services

Question asked by s2mambau on Jun 2, 2014
Latest reply on Jun 4, 2014 by s2mambau
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>

Outcomes