About adding layers to LayerList

[EvelynHernandez]

Hello there.

Im a little bit confused on how is the way to add layers into a LayerList obj. Im using Arcgis Api  3.17.

My code is the following:

var mapp = mymap.createMap("map","topo",-71.5215, -32.9934,9);

 var interrClienteSED = new ArcGISDynamicMapServiceLayer(layers.read_dyn_layerClieSED(),{id:"po_interrupciones"});
 interrClienteSED.setInfoTemplates({
 3: {infoTemplate: myinfotemplate.getNisInfo()},
 1: {infoTemplate: myinfotemplate.getIsolatedNisFailure()},
 0: {infoTemplate: myinfotemplate.getSubFailure()}
 });
 interrClienteSED.refreshInterval = 1;
 interrClienteSED.setImageFormat("png32");
interrClienteSED.show();

var chqmapabase = new ArcGISDynamicMapServiceLayer(layers.read_mapabase(),{id:"gis_chqmapabase"});
 chqmapabase.hide();
var heatmapFeatureLayerOptions = {
 id: "gis_heatmapsed",
 mode: FeatureLayer.MODE_SNAPSHOT,
 outFields: ["*"]
 };
var heatmapFeatureLayerOptions2 = {
 id: "gis_heatmapclientes",
 mode: FeatureLayer.MODE_SNAPSHOT,
 outFields: ["*"]
 };
var heatmapFeatureLayer = new FeatureLayer(layers.read_heatmapSED(), heatmapFeatureLayerOptions);
var heatmapFeatureLayer1 = new FeatureLayer(layers.read_heatmapClientes(), heatmapFeatureLayerOptions2);
var heatmapRenderer = new HeatmapRenderer({
 colors: ["rgba(0,255,0, 0)","rgb(255, 255, 0)","rgb(255, 0, 0)"],
 blurRadius: 16,
 maxPixelIntensity: 250,
 minPixelIntensity: 5
 });
heatmapFeatureLayer.setRenderer(heatmapRenderer);
 heatmapFeatureLayer.hide();
heatmapFeatureLayer1.setRenderer(heatmapRenderer);
 heatmapFeatureLayer1.hide();
var gpsCars = new ArcGISDynamicMapServiceLayer(layers.read_GPS(), {id:"gis_gps"});
gpsCars.setInfoTemplates({
 0: {infoTemplate: myinfotemplate.getCarsInfo()}
 });
 gpsCars.refreshInterval = 0.1;
 gpsCars.setImageFormat("png32");
 gpsCars.show();
var gpsNew = new ArcGISDynamicMapServiceLayer(layers.read_gps_new(), {id:"gis_gps_new"});


mapp.addLayers([chqmapabase,interrClienteSED, heatmapFeatureLayer, heatmapFeatureLayer1, gpsCars]);
var layerList = new LayerList({
 map: mapp,
 showLegend: true,
 showSubLayers: true,
 showOpacitySlider: true,
 layers: [interrClienteSED, gpsCars]
 },"layerlist");

 layerList.startup();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then i have only this in my html:

<div className="map_container">
    <div id="layerlist"></div>
    <div id="map"></div>
    <Simbology />
</div>‍‍‍‍‍‍‍‍‍‍

The result i have is this one:

I was trying with the layers that i already have added in the map, but actually i want to use another service where i have sublayers according this structure:

Layers :
 One (0)

   • One - 1 (1)

Two (3)
   • Two - 2 (4)

I want to see in the layerlist all of them, see the legend and turn on/off each one.

Thanks in advice!.

[RobertScheitlin__GISP]

Evelyn,

   The doc for the LayerList dijit gives some good examples of what it expected:

https://developers.arcgis.com/javascript/3/jsapi/layerlist-amd.html#layers 

layers = [
    {
        layer: Layer object // required unless featureCollection.
        featureCollection: featureCollection, // required unless layerObject. If the layer is a feature collection, should match AGOL feature collection response and not have a layerObject.
        showSubLayers: true, // optional, show sublayers for this layer. Defaults to the widget's 'showSubLayers' property.
        showLegend: true, // optional, display a legend for the layer items.
        content: <domNode>, // optional, custom node to insert content. It appears below the title.
        showOpacitySlider: true, // optional, display the opacity slider for layer items.
        button: <domNode>, // optional, custom button node that will appear within the layer title.
        visibility: true, // optionally set the default visibility
        id: "my_layer" // optionally set the layer's id
    },
    {
        //additional layer
    }
];‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[EvelynHernandez]

I already saw that and idk what im doing wrong now.

What should i put in the featureCollection? the same layer that i made?

Actually the example (the only one) that shows the api is for AOL and im not using that, so i have to create the layers by myself.

Can u clarify me what i need to do ?

var gpsNew = new ArcGISDynamicMapServiceLayer(myLayers.read_gps_new(), {id:"gis_gps_new"});
var layers = [
 {
 layer: gpsNew, // required unless featureCollection.
 featureCollection: gpsNew,
 showSubLayers: true, // optional, show sublayers for this layer. Defaults to the widget's 'showSubLayers' property.
 showLegend: true, // optional, display a legend for the layer items.
 content: "layerlist", // optional, custom node to insert content. It appears below the title.
 showOpacitySlider: true, // optional, display the opacity slider for layer items.
 // optional, custom button node that will appear within the layer title.
 visibility: true, // optionally set the default visibility
 id: "GPS" // optionally set the layer's id
 }
 ];
 var layerList = new LayerList({
 map: mapp,
 showLegend: true,
 showSubLayers: true,
 showOpacitySlider: true,
 layers:layers
 },"layerlist");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Evelyn,

   featureCollection: should be null.

Here is another example:

http://www.arcgis.com/sharing/content/items/039c0beaee9944c09e721438da1827e4/data?f=pjson 

[EvelynHernandez]

Well im still trying to do something with the layerList widget and not to make something by myself from scratch.

So i have a service with 3 sublayers and i want to toggle the visibility like in this example with the census layer:

LayerList widget | ArcGIS API for JavaScript 3.25 

The structure of the server is the following:

Mapserver

   sL1

   sL2

   sL3

But for some reason it ended up showing all the 3 layers (i add it like dynamic) but now showing any button ">" like the example for individually to toggle the sublayers.

Any help will be really appreciate !

This is how it looks:

[RobertScheitlin__GISP · Accepted solution]

Evelyn,

   Hope this sample will help:

<!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="http://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/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="http://js.arcgis.com/3.25/"></script>
  <script>
    require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/dijit/LayerList",
    "dojo/query",
    "dojo/dom-construct",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/on",
    "dojo/_base/array",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function (
      Map,
      ArcGISDynamicMapServiceLayer,
      LayerList,
      query,
      domConstruct,
      domClass,
      domStyle,
      on,
      array
    ) {
      var map = new Map("map", {
        basemap: "topo",
        center: [-123, 47],
        zoom: 8,
        sliderStyle: "small"
      });

      var atlasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
        "id": "atlasLayer",
        "showAttribution": false
      });

      var recreationLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Recreation/MapServer", {
        "id": "recreationLayer",
        "showAttribution": false
      });

      var waterNetLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer", {
        "id": "waterNetworkLayer",
        "showAttribution": false
      })

      map.addLayers([atlasLayer, recreationLayer, waterNetLayer]);

      var llWidget = new LayerList({
         map: map,
         layers: [{
           layer: atlasLayer,
            id: "Atlas layers",
            subLayers: true
         },{
           layer: recreationLayer,
            id: "Recreation Layer",
            subLayers: true
         },{
           layer: waterNetLayer,
            id: "Water Network Layer",
            subLayers: true
         }],
         showLegend: true,
         showOpacitySlider: true
      },"layerList");
      llWidget.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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[EvelynHernandez]

Yea that help me out. Also because it is secured, i had to add this:

var t = {
 "server": service_url(),
 "userId": username,
 "token": theToken,
 "ssl": false,
 "expires": 7200
 };


 kernel.id.registerToken(t);‍‍‍‍‍‍‍‍‍‍