Can't See The Layer List

2392
19
Jump to solution
09-29-2016 09:38 AM
LloydBronn
Occasional Contributor II

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
Drew
by
Occasional Contributor III

I think you have to apply the startup function..

 myWidget.startup()

View solution in original post

19 Replies
Drew
by
Occasional Contributor III

I think you have to apply the startup function..

 myWidget.startup()
LloydBronn
Occasional Contributor II

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?

0 Kudos
Drew
by
Occasional Contributor III

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

0 Kudos
LloydBronn
Occasional Contributor II

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

0 Kudos
LloydBronn
Occasional Contributor II

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.  

0 Kudos
Drew
by
Occasional Contributor III

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

KenBuja
MVP Esteemed Contributor

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

0 Kudos
LloydBronn
Occasional Contributor II

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.

0 Kudos
KenBuja
MVP Esteemed Contributor

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;
0 Kudos