topic Re: Can't See The Layer List in ArcGIS JavaScript Maps SDK Questions

Can't See The Layer List

LloydBronn — Sat, 11 Dec 2021 18:25:11 GMT

I'm working with the layer list widget LayerList widget | ArcGIS API for JavaScript 3.18. I've combined it into a map with the basemap gallery and the raster identify popup. The problem is that I can't see the layer list from the map service. It works just fine using the example script above. I'm also wondering if it's possible to make the layer list pane only go down a quarter of the page instead of all the way down so it looks like a widget within the map and not a separate box next to the map? Here is my code:

<!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="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, .container, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "arial";
        }          
       .esriScalebar {
        padding: 20px 20px;
      }
       
       #layerListPane {
            width: 18%;
        }

        .esriLayer {
            background-color: #fff;
        }

        .esriLayerList .esriList {
            border-top: none;
        }

        .esriLayerList .esriTitle {
            background-color: #fff;
            border-bottom: none;
        }

        .esriLayerList .esriList ul {
            background-color: transparent;
        }
    </style>
     <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
      

      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/dijit/LayerList",
          "esri/arcgis/utils",
          "esri/dijit/BasemapGallery",
        "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",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ], function (
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer,
          LayerList, arcgisUtils,
          BasemapGallery, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        arrayUtils, Color, domConstruct, parser
      ) {
          parser.parse();
          
        var identifyTask, identifyParams;

        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: "gray",
          center: [-96.8, 38.5],
          zoom: 4,
          infoWindow: popup
        });
          
          var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
       }, "basemapGallery");
       basemapGallery.startup();
       
       basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
       });

        map.on("load", mapReady);

        var floodURL = "http://gis.mymetcon.com/arcgis/rest/services/Flood_Potential/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(floodURL,
          { opacity: .75 }));
            
            var myWidget = new LayerList({
                map: map,
                layers: [{
                    layer: floodURL,
                    id: "Forecast Days",
                    subLayers: true
                }],
                //layer: floodLayer
            }, "layerList");
                              


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

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 1;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 1, 2, 3, 4, 5];
          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);
            deferred.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;
              //alert(result);
                feature.attributes.layerName = layerName;
                      var risklevel = feature.attributes[ 'Pixel Value']
                      
                      if(risklevel === '0'){risklevel = 'No Flooding';}
                      else if(risklevel === '1'){risklevel = 'Possible Flooding';}
                      else if(risklevel === '2'){risklevel = 'Probable Flooding';}
                      else if(risklevel === '3'){risklevel = 'Flooding';}
                      else if(risklevel === '4'){risklevel = 'More Significant Flooding';}
                      else if(risklevel === '5'){risklevel = 'Significant Flooding';}
                      else {risklevel = 'No Flooding';}
                       
                  var floodRiskTemplate = new InfoTemplate(layerName,
                    "Risk Level: " + risklevel);
                  feature.setInfoTemplate(floodRiskTemplate);
                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 class="container" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false">
           
           
           
           <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
               <div id="layerList"></div>
        </div>
           
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
             
          <div style="position:absolute; left:75px; top:20px; z-Index:999;">
          
     <div data-dojo-type="dijit/TitlePane" style="font-family:arial;background-color:lightgray"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
                
            <div id="basemapGallery"></div>
               
               </div>
            </div>
          </div>
          </div>
          
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Can't See The Layer List

Drew — Thu, 29 Sep 2016 16:43:15 GMT

I think you have to apply the startup function..

 myWidget.startup()

Re: Can't See The Layer List

LloydBronn — Thu, 29 Sep 2016 17:24:33 GMT

Thanks! That works. Still wondering if it's possible to resize or embed the layer list widget so it's basically just a box over the basemap?

Re: Can't See The Layer List

Drew — Sat, 11 Dec 2021 18:25:13 GMT

Thats just some CSS and HTML modification of the sandbox sample you provided.

Solution

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">

<style>
html, body, .container, #map {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    margin:0;
    font-family: "Open Sans";
}
#map {
    padding:0;
}
#layerListPane{
    position: absolute;
    /* top: 100px; */
    right: 10px;
    width: 300px;
    z-index: 101;
    padding: 10px;
    bottom: 10px;
    box-shaddow: 0 0 5px 0 #DDD;
    border:1px solid #000;
    background-color:#FFF;
}
.esriLayer{
  background-color: #fff;
}
.esriLayerList .esriList{
    border-top:none;
}
.esriLayerList .esriTitle {
  background-color: #fff;
  border-bottom:none;
}
.esriLayerList .esriList ul{
  background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList
) {
    //Create a map based on an ArcGIS Online web map id
    arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
        var myWidget = new LayerList({
           map: response.map,
           layers: arcgisUtils.getLayerList(response)
        },"layerList");
        myWidget.startup();
    });

});
</script>
</head>
<body class="claro">

<div id="layerListPane">
<div id="layerList"></div>
</div>
<div id="map"></div>

</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Drew

Re: Can't See The Layer List

LloydBronn — Thu, 29 Sep 2016 18:10:29 GMT

Ah, thanks. I was messing with the <div> content pane.

Re: Can't See The Layer List

LloydBronn — Thu, 29 Sep 2016 18:59:18 GMT

Another issue I'm having is that the identify task popup is showing every layer, regardless of which layer is selected in the layer list. I tried changing identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL; to OPTION_VISIBLE to no avail.

Re: Can't See The Layer List

Drew — Thu, 29 Sep 2016 19:15:15 GMT

At a quick glance I would say its because you have the layerId's defined.

Remove this line

identifyParams.layerIds = [0, 1, 2, 3, 4, 5];

You can read more on the IdentifyParameters below
IdentifyParameters | API Reference | ArcGIS API for JavaScript 3.18

Drew

Re: Can't See The Layer List

KenBuja — Thu, 29 Sep 2016 19:19:18 GMT

Try setting the layerIds property not when you initialize the map, but in the executeIdentifyTask function, setting it to the visibleLayers of the layer

Re: Can't See The Layer List

LloydBronn — Thu, 29 Sep 2016 19:24:57 GMT

I tried both of these, I set the layer IDs to an empty list and moved identifyParams.layerIds = [];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE; under the identify task. Now it only gives me the top layer, regardless of which layer is visible.

Re: Can't See The Layer List

KenBuja — Thu, 29 Sep 2016 19:35:18 GMT

First, set a variable for the layer when constructing the map to be used in the executeIdentifyTask

var floodLayer = new ArcGISDynamicMapServiceLayer(floodURL, { opacity: .75 }));‍

Then use that in the function

 identifyParams.layerIds = floodLayer.visibleLayers;‍

Re: Can't See The Layer List

LloydBronn — Thu, 29 Sep 2016 19:54:58 GMT

I have that variable set already, but that made me realize that the identify task is referencing the map service URL and its layer IDs directly. When changed it to floodLayer and set identifyParams.layerIds = floodLayer.visibleLayers; the popup window was gone, my layers disappeared and the basemap was not visible.

Re: Can't See The Layer List

LloydBronn — Mon, 03 Oct 2016 15:34:06 GMT

Still trying to figure this out.

Re: Can't See The Layer List

Drew — Mon, 03 Oct 2016 15:47:56 GMT

I would suggest creating a simple sample of the issue you are having and letting us play with it.
Its always nice to see what you are working with.

Re: Can't See The Layer List

LloydBronn — Sat, 11 Dec 2021 18:25:17 GMT

Here is the code. I'm pretty sure the problem is that the identify task is referencing the map service URL and its layer IDs, not the dynamic map service layer variable. When I change floodURL to floodLayer in line 170, the map gets all messed up and the layers are gone.

<!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="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, .container, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "arial";
        }          
       .esriScalebar {
        padding: 20px 20px;
      }
       
       #layerListPane {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 300px;
    z-index: 101;
    padding: 10px;
    bottom: 720px;
    box-shaddow: 0 0 5px 0 #DDD;
    background-color:;
        }

        .esriLayer {
            background-color:;
        }

        .esriLayerList .esriList {
          
               background-color:;
        }

        .esriLayerList .esriTitle 
            background-color: ;
            border-bottom: none;
        }

        .esriLayerList .esriList ul {
            background-color: ;
        }
    </style>
     <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
      

      require([
        "esri/map",
          "esri/geometry/webMercatorUtils",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/dijit/LayerList",
          "esri/arcgis/utils",
          "esri/dijit/BasemapGallery",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/Color",
          "dojo/query",
          "dojo/dom",          
          "dojo/dom-class",  
        "dojo/dom-construct",
          "dojo/parser",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ], function (
        Map,webMercatorUtils, InfoTemplate, ArcGISDynamicMapServiceLayer,
          LayerList, arcgisUtils,
          BasemapGallery, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        arrayUtils, Color, query, dom, domClass, domConstruct, parser
      ) {
          parser.parse();
          
        var identifyTask, identifyParams;

        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: "gray",
          center: [-96.8, 38.5],
          zoom: 4,
          infoWindow: popup
        });
          
          var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
       }, "basemapGallery");
       basemapGallery.startup();
       
       basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
       });

        
          
          map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move", showCoordinates);
          map.on("mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("info").innerHTML = "Longitude: " + mp.x.toFixed(3) + "    " + "Latitude: " + mp.y.toFixed(3);
        }
          
          map.on("load", mapReady);

        var floodURL = "http://gis.mymetcon.com/arcgis/rest/services/Flood_Potential/MapServer";
        var floodLayer = (new ArcGISDynamicMapServiceLayer(floodURL,
          { opacity: .75 }));
            
           map.addLayer(floodLayer);
            
          var myWidget = new LayerList({
               map: map,
               layers: [{
                    layer: floodLayer,
                    id: "Forecast Days",
                    showsubLayers: true
                    
                    
               }],
          }, "layerList");
          
          myWidget.startup();
          
          myWidget.on('load', function(){  
          expandLayerList();  
     });  
  
          function expandLayerList() {  
          query('.esriLayer').forEach(function(node){  
          domClass.add(node, "esriListExpand");  
    });  
          query('.esriToggleButton').forEach(function(node){  
          domClass.replace(node, "esri-icon-down", "esri-icon-right");  
    });  
  }  
     

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

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 1;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0,1,2,3,4];
            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);
            deferred.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;
              //alert(result);
                feature.attributes.layerName = layerName;
                      var risklevel = feature.attributes[ 'Pixel Value']
                      
                      if(risklevel === '0'){risklevel = 'No Flooding';}
                      else if(risklevel === '1'){risklevel = 'Possible Flooding';}
                      else if(risklevel === '2'){risklevel = 'Probable Flooding';}
                      else if(risklevel === '3'){risklevel = 'Flooding';}
                      else if(risklevel === '4'){risklevel = 'More Significant Flooding';}
                      else if(risklevel === '5'){risklevel = 'Significant Flooding';}
                      else {risklevel = 'No Flooding';}
                       
                  var floodRiskTemplate = new InfoTemplate(layerName,
                    "Risk Level: " + risklevel);
                  feature.setInfoTemplate(floodRiskTemplate);
                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 class="container" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false">
           
           <div id="layerListPane">
               <div id="layerList"></div>
        </div>
           
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
       
       <span id="info" style="font-family:arial;position:absolute;left:15px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
             
          <div style="position:absolute; left:75px; top:20px; z-Index:999;">
          
     <div data-dojo-type="dijit/TitlePane" style="font-family:arial;background-color:lightgray"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
                
            <div id="basemapGallery"></div>
                
               </div>
            </div>
          </div>
          </div>
          
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Can't See The Layer List

KenBuja — Mon, 03 Oct 2016 17:00:55 GMT

This seems to be working correctly: JS Bin - Collaborative JavaScript Debugging

I moved the variable declarations for floodURL and floodLayer to the top, commented out the line

identifyParams.layerIds = [0,1,2,3,4];

and added the line

identifyParams.layerIds = floodLayer.visibleLayers;

Re: Can't See The Layer List

LloydBronn — Mon, 03 Oct 2016 17:06:47 GMT

Thanks so much!!

Re: Can't See The Layer List

LloydBronn — Mon, 03 Oct 2016 19:06:16 GMT

Would it be possible to do this with two different identify tasks with two different tolerances?

Re: Can't See The Layer List

KenBuja — Mon, 03 Oct 2016 19:17:50 GMT

Yes there is.

Take a look at this reply and look for the createIdentifyParams function: https://community.esri.com/message/382158?commentID=382158#comment-382158

Re: Can't See The Layer List

LloydBronn — Sat, 11 Dec 2021 18:25:20 GMT

Both of my identify tasks are for different sublayers of a single dynamic map service layer. The tolerances are different for features (7) and rasters (1). I have all the different iTemplate popups configured. As with the other example, I have an analysisURL and analysisLayer.

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

                    identifyParams = new IdentifyParameters();
                    identifyParams.returnGeometry = true;
                    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;
                    promises = [];
                    identifyParams.tolerance = 7;
                    identifyParams.layerIds = [1,2,4,5,6,8,9];
                    promises.push(identifyTask.execute(identifyParams));
                    identifyParams.tolerance = 1;
                    identifyParams.layerIds = [12,13,14,17,18,19];
                    promises.push(identifyTask.execute(identifyParams));

                    var iPromises = new all(promises);
                    iPromises.then(lang.hitch(this, function (r) {
                      var idResults = [];
                      arrayUtils.map(r, function(response) {
                        arrayUtils.map(response, function(result) {
                          var feature = result.feature;
                          var layerName = result.layerName;
                          feature.attributes.layerName = layerName;
                          var iTemplate;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I change the code as follows, and it works fine for the feature layers (layerIds = [1,2,4,5,6,8,9]), but not for the rasters. Changing the tolerance doesn't seem to help

function mapReady() {
                    map.on("click", executeIdentifyTask);
                    //create identify tasks and setup parameters
                    identifyTask = new IdentifyTask(analysisURL);
                    identifyParams = new IdentifyParameters();
                    identifyParams.returnGeometry = true;
                    //identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                         identifyParams.tolerance = 7;
                    identifyParams.layerIds = analysisLayer.visibleLayers;
                    identifyParams.width = map.width;
                    identifyParams.height = map.height;
                         
                }

                function executeIdentifyTask(event) {
                    identifyParams.geometry = event.mapPoint;
                    identifyParams.mapExtent = map.extent;
                    promises = [];
                         //identifyParams.tolerance = 7;
                         //identifyParams.layerIds = [1,2,4,5,6,8,9];
                    promises.push(identifyTask.execute(identifyParams))
                    //identifyParams.tolerance = 1;
                    //identifyParams.layerIds = [12,13,14,17,18,19];
                    //promises.push(identifyTask.execute(identifyParams));

                         

                    var iPromises = new all(promises);
                    iPromises.then(lang.hitch(this, function (r) {
                      var idResults = [];
                      arrayUtils.map(r, function(response) {
                        arrayUtils.map(response, function(result) {
                          var feature = result.feature;
                          var layerName = result.layerName;
                          feature.attributes.layerName = layerName;
                          var iTemplate;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Can't See The Layer List

LloydBronn — Tue, 04 Oct 2016 19:11:53 GMT

Looking at your example in that link, the popup window is showing visible layers, but it looks like those layers are always visible. I have a layer list to toggle on and off sublayers. I only want the popup to show the visible layers that are toggled on. The snippet I have above works, but the tolerances are different for features and rasters in the map service. The popup only shows the results for the toggled features, not the rasters.