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