AnsweredAssumed Answered

LayerList reload not working

Question asked by ccgage on May 11, 2016
Latest reply on May 12, 2016 by kenbuja

I have an application where I need to switch out layers when a user makes a selection from a dropdownlist.  I have the switching of the layers working fine, but I cannot get the LayerList to refresh with the newly selected layer.  The LayerList works fine when the application loads, but when a layer is switched it does not work.  I have tried to use the refresh method but that does not seem to work.  Perhaps I am doing something wrong.  I have a simplified version of what I am trying to do in the Javascript code below.   I am using JS API version 3.16.

 

Thanks,

Charlie

 

require([

  "dojo/dom", "dojo/parser", "dojo/on", "dojo/query", "dojo/dom-class",

  "dojo/dom-style", "dojo/dom-construct",

   "esri/map", 

  "esri/layers/ArcGISDynamicMapServiceLayer",

  "dijit/registry",

  "esri/dijit/LayerList",

  "dijit/form/Button",

  "dijit/layout/BorderContainer",

  "dijit/layout/TabContainer",

  "dijit/layout/ContentPane",

  "dijit/TitlePane",

  "dijit/Dialog",

  "dijit/form/TextBox",

  "dijit/form/ComboBox",

  "dojo/domReady!"

], function(

  dom, parser, on, query, domClass,

  domStyle, domConstruct,

   Map, ArcGISDynamicMapServiceLayer,

   registry, LayerList )

  {

  parser.parse();

 

  // Define layers and URL variables

  var dynamicLayer;

  var staticLayer;

  var dynLayerURL;

  var staticURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/MapServer";

  var layer1URL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/DamageAssessment/MapServer";

  var layer2URL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommercialDamageAssessment/MapServer";

 

  // Get the layer drop down list

  var selectedLayer = registry.byId('layerDropDown');

  selectedLayer.on('change', setLayer);

 

  // Start out with layer selected in dropdownList

  var layerValue = selectedLayer.get('value');

  if (layerValue == '1') {

  dynLayerURL = layer1URL;

  }

  else if (layerValue == '2') {

  dynLayerURL = layer2URL;

  }

  map = new Map("mapPanel", {

        center: [-98.2, 40.05],

        zoom: 5,

        basemap: "national-geographic"

  });

  // Define layers as ArcGISDynamicMapServiceLayers

  dynamicLayer = new ArcGISDynamicMapServiceLayer(dynLayerURL, { visible: true });

  staticLayer = new ArcGISDynamicMapServiceLayer(staticURL, { visible: true });

 

  // Add the LayerList

  var layerList = new LayerList({

       map: map,

       showLegend: true,

       layers: [ {layer: staticLayer, id: "Shelters", sublayers: true}, {layer: dynamicLayer, id: "Assessment", sublayers: true}]

  }, "legendDiv");

  layerList.startup();

 

  layerList.on('load', function(){

  expandLayerList();

  });

 

  // ADD the LAYERS

  map.addLayers([staticLayer, dynamicLayer]);

 

  function loadDynamicLayer() {

  // Remove the current dyamicLayer

  map.removeLayer(dynamicLayer);

 

  // Point the new Dynamic Layer URL to the dynamicLayer

  dynamicLayer = new ArcGISDynamicMapServiceLayer(dynLayerURL, { visible: true });

  map.addLayer(dynamicLayer);

 

// REFRESH the layerList  (DOES NOT WORK)

  //  If I click on the layerList checkboxs, it gives me the error:

  //   TypeError: t.byId(...) is null    ???

  layerList.refresh();

  }

 

  function setLayer() {

  var lyrValue = selectedLayer.get('value');

  if (lyrValue == '1') {

  dynLayerURL = layer1URL;

  }

  else if (lyrValue == '2') {

  dynLayerURL = layer2URL;

  }

 

  // Load the newly selected dynamic layer

  loadDynamicLayer();

  }

 

  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"); 

  }); 

  }

});

Outcomes