Community

Widget LayerList Dijit

839
0
06-15-2016 08:34 AM
GokuSan
by
New Contributor II
‎06-15-2016 08:34 AM

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

0 Kudos
0 Replies