Hi,
I have a problem with the layerlist widget. I created a project where two layers are loaded, I build the widget and everything goes properly. The code would be:
<!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.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/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{
width:25%;
}
.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.16/"></script>
<script>
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, LayerList) {
var map = new Map("map", {
//basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var demographicsLayerURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var demographicsLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.8,
"showAttribution": false
};
var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
map.addLayer(demographicsLayer);
var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapSer...", {
"id": "oilAndGasLayer",
"opacity": 0.75
});
map.addLayer(oilAndGasLayer);
var myWidget = new LayerList({
map: map,
//layers: arcgisUtils.getLayerList(response)
showLegend: true
},"layerList");
myWidget.startup();
});
</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>
</div>
</body>
</html>
However , when I do another test the widget does not work properly. I mean, my goal is to add a single layer in the domready and when I click on the map, a second layer is added and the widget is updated. The code is:
<script>
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"dojo/on",
"dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, LayerList, on) {
var map = new Map("map", {
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var demographicsLayerURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var demographicsLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.8,
"showAttribution": false
};
var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
map.addLayer(demographicsLayer);
var myWidget = new LayerList({
map: map,
removeUnderscores: true,
showLegend: true
},"layerList");
myWidget.startup();
map.on("click", function(evt){
var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapSer...", {
"id": "oilAndGasLayer",
"opacity": 0.75
});
map.addLayer(oilAndGasLayer);
oilAndGasLayer.on("load", function () {
var layers = new Array();
for (var j = 0; j < map.layerIds.length; j++) {
layers.push(map.getLayer(map.layerIds));
}
myWidget.layers = layers;
myWidget.map = map;
myWidget.refresh();
});
});
});
</script>
Can anybody help me? Thank you very much in advance
