topic Re: add layerlist to titlepane in javascript 4.6 api in ArcGIS JavaScript Maps SDK Questions

add layerlist to titlepane in javascript 4.6 api

PeteVitt — Tue, 03 Apr 2018 17:16:35 GMT

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

Re: add layerlist to titlepane in javascript 4.6 api

ReneRubalcava — Wed, 04 Apr 2018 17:39:12 GMT

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.

Re: add layerlist to titlepane in javascript 4.6 api

PeteVitt — Wed, 04 Apr 2018 17:53:58 GMT

Thanks - I will work with your suggestion

Re: add layerlist to titlepane in javascript 4.6 api

PeteVitt — Wed, 02 May 2018 17:52:50 GMT

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

Re: add layerlist to titlepane in javascript 4.6 api

RobertScheitlin__GISP — Wed, 02 May 2018 18:01:12 GMT

Pete,

Can you provide your full code for review?

Re: add layerlist to titlepane in javascript 4.6 api

PeteVitt — Thu, 03 May 2018 17:14:26 GMT

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 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
});

});

});
});

Re: add layerlist to titlepane in javascript 4.6 api

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:18:47 GMT

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
        });
      });‍‍‍‍‍‍‍‍‍‍‍

Re: add layerlist to titlepane in javascript 4.6 api

PeteVitt — Sat, 05 May 2018 01:34:28 GMT

Thanks Robert - that works great