Widget LayerList Dijit

GokuSan — Wed, 15 Jun 2016 15:34:05 GMT

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>

<title>Layer List Dijit</title>

<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>

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/MapServer", {

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

<div class="container" data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline',gutters:false">

</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:

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/MapServer", {

"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

topic Widget LayerList Dijit in ArcGIS JavaScript Maps SDK Questions

Widget LayerList Dijit