add layerlist to titlepane in javascript 4.6 api

[PeteVitt]

Hi - I'm making an application using the view ui to place user interface items on the screen.  I've got a layerlist control that takes up a lot of space so I'd like to put it inside a title pane so the control can be open and closed.  I've successfully created the titlepane and added it to the view.ui, but I'm having trouble getting the layer list to appear inside the titlepane.  My code is as follows:

view.then(function () {

//add feature service
map.add(flGWMZ); //feature service gets added to the map

//create the title pane -- this gets created successfully
var tp = new TitlePane({ title: "Layers"});
dom.byId("mapDiv").appendChild(tp.domNode);
tp.startup();

//create the layer list and add to the title pane -- something going wrong here
var layerList = new LayerList({
view: view
}, "tp"
);

//add the titlepane to the lower left -- an empty title pane gets added to the map
view.ui.add(tp, "bottom-left");

if I dont use the tile pane and just add the layerlist directly to the layerlist gets generated fine

//create the layer list and add to the title pane
var layerList = new LayerList({
view: view});

// Add widget to the lower left corner of the view
view.ui.add(layerList, "bottom-left");

Any ideas where I'm going wrong?

Thanks

Pete

[ReneRubalcava]

The syntax new Widget(options, "containerId") is deprecated. You want to do new Widget({ container: "containerId" })

But in your case, you want to have a node inside the TitlePane that you can attach the LayerList to, you don't want to have the LayerList take control of the TitlePane, which is where your current code is headed.

[PeteVitt]

Thanks - I will work with your suggestion

[PeteVitt]

Made some progress getting the layerlist to appear below the titlepane as per your suggestion, but cant seem to get it inside the pane:

//create the title pane to hold the layer list
                    var tp = new TitlePane({ title: "Layers", id: "tp"});
                    dom.byId("mapDiv").appendChild(tp.domNode);
                    tp.startup();
                    

                    var layerList = new LayerList({
                        view: view,
                        container: "tp"
                    });

                    //add the titlepane to the lower left
                    view.ui.add(tp, "bottom-left");

                     

[RobertScheitlin__GISP]

Pete,

   Can you provide your full code for review?

[PeteVitt]

Robert - here is all my code for the page -- I've changed it a bit so that the layerlist is being added to the title pane as content -- this gets the layerlist inside the titlepane, but unfortunately the list renders as 'undefined'.  I think the list is ok, because it appears normally if I dont try to put it inside the title pane

Thanks

Pete

define([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/layers/support/Sublayer",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Home",
"esri/widgets/BasemapToggle",
"esri/widgets/Search",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/dom",
"dojo/on",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!Templates/BenUseMap.htm",
"dijit/form/Button"

], function (Map, MapView, FeatureLayer, MapImageLayer, SubLayer, LayerList, Legend, Home, BasemapToggle, Search,
declare, lang, dom, on, TitlePane, ContentPane, _WidgetBase, _TemplatedMixin,
_WidgetsInTemplateMixin, BenUseMapTpl) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: BenUseMapTpl,
map: "", //map
postCreate: function () {

map = new Map({
basemap: "topo",

});
var view = new MapView({
container: "mapDiv",
map: map,
zoom: 9,
center: [-117.3, 33.9]
});

var flRivers = new FeatureLayer({
url: "x"
});
var flLakes = new FeatureLayer({
url: "y"
});
var flBays = new FeatureLayer({
url: "z"
});
var flWetlands = new FeatureLayer({
url: "a"
});
var flGWMZ = new FeatureLayer({
url: "b"
});
view.then(function () {
map.add(flGWMZ);
map.add(flBays);
map.add(flWetlands);
map.add(flLakes);
map.add(flRivers);

var ll = new LayerList({
view: view
});
//create the title pane to hold the layer list
var tp = new TitlePane({
title: "Layers",
id: "tp",
content: ll
});
dom.byId("mapDiv").appendChild(tp.domNode);
tp.startup();

//add the titlepane to the lower left
view.ui.add(tp, "bottom-left");

// Add widget to the lower left corner of the view
//view.ui.add(ll, "bottom-left");

//Home button
var homeBtn = new Home({
view: view
});

// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");

//Basemap toggle
var toggle = new BasemapToggle({

view: view,
nextBasemap: "satellite"
});

// Add widget to the top right corner of the view
view.ui.add(toggle, "bottom-right");

var searchWidget = new Search({
view: view
});
// Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, {
position: "top-left",
index: 0
});

});

},

});
});

[RobertScheitlin__GISP · Accepted solution]

Pete,

   This works for me:

      view.when(function() {
        var tp = new TitlePane({
          title: "Layers"
        });
        tp.startup();
        view.ui.add(tp, "top-right");
        var layerList = new LayerList({
          view: view,
          container: tp.containerNode.id
        });
      });‍‍‍‍‍‍‍‍‍‍‍

[PeteVitt]

Thanks Robert - that works great