AnsweredAssumed Answered

Can't See The Layer List

Question asked by lloydbronn on Sep 29, 2016
Latest reply on Oct 4, 2016 by lloydbronn

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>

Outcomes