topic Re: Webapp Builder Layer List Widget in ArcGIS Web AppBuilder Questions

Webapp Builder Layer List Widget

JayClark — Tue, 18 Aug 2015 23:44:28 GMT

My table of contents has 4 group layers (each group can have multiple layers). When the user clicks on "Critical Area" group, I also want the event to check on and draw the "Percent Slope" group. I'm not really interested in answering questions about why I would want to do this way, because it is kind of nutty, but rather, how to do this in the javascript code, so that I get better at tinkering with the widgets. I'm able to write to the console if a user checks on "Critical Areas" but not at all sure how to have the code check on and draw the "Percent Slope" group:

From the "LayerListView.js" in the Layer list widger for webappbuilder:

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

if (ckSelect.checked) {

layerInfo.setTopLayerVisible(true);

// test how to find layer name

if (layerInfo.title === 'Critical Areas')

{

console.log(layerInfo.title);

// I want this to check on and draw another group in the layer list--Any ideas?

}

} else {

layerInfo.setTopLayerVisible(false);

}

evt.stopPropagation();

Re: Webapp Builder Layer List Widget

RobertScheitlin__GISP — Wed, 19 Aug 2015 13:40:19 GMT

Jay,

You would need to do some code like this:

this.layerListWidget.operLayerInfos.getLayerInfoById('Parcel Data_0').setTopLayerVisible(true);

Reference thread:

Make layer visible after LayerList widget has opened

Re: Webapp Builder Layer List Widget

JayClark — Wed, 19 Aug 2015 16:12:00 GMT

Thank you Robert,

for everyone else, here is the final change in the LayerListView.js that was originally part of the web appbuilder, v1.1:

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

if (ckSelect.checked) {

layerInfo.setTopLayerVisible(true);

// how to find layer name

if (layerInfo.title === 'Critical Areas')

{

console.log(layerInfo.title);

// the percenslope_7214 is the id for the layer group "Percent Slope" in the Layer List widget

this.layerListWidget.operLayerInfos.getLayerInfoById('PercentSlope_7214').setTopLayerVisible(true);

// these functions are in the widget.js, so this is a call back to those functions so that the widget

// will now show the percent slope as checked

this.layerListWidget._clearLayers();

this.layerListWidget.showLayers();

}

} else {

layerInfo.setTopLayerVisible(false);

}

evt.stopPropagation();

Re: Webapp Builder Layer List Widget

Mehretab — Tue, 16 May 2017 13:44:03 GMT

Robert Scheitlin, GISP‌ @Jay Clark

I stumbled in this thread while looking for a possibility to toggle between layers in WAB. I am aware about your code Robert for toggling between sublayers but it was important for me to be able to implement the possibility to toggle between layers (not sub layers) and I used your idea here to accomplish it. I read many question about the possibility of toggling so it might be of a help for some one. I am able to switch off and on between 3 layers now (one layer visible at a time). Below is the peace of code.

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

if (ckSelect.checked) {

layerInfo.setTopLayerVisible(true);

if (layerInfo.title === 'the title of your map1') //you can find it from the layer list widget (title) {

// how to find layer id

//console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_2').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_3').setTopLayerVisible(false);

}

if (layerInfo.title === 'the title of your map2') {

//console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_1').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_3').setTopLayerVisible(false);

}

if (layerInfo.title === 'the title of your map3') {

//console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_1').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_2').setTopLayerVisible(false);

}

} else {

layerInfo.setTopLayerVisible(false);

}

evt.stopPropagation();

And many Thanks Robert and Clark.

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 09:55:23 GMT

Hi Robert ,

Please how to make just one layer visible at a time in layer list widget . Thanks .

Re: Webapp Builder Layer List Widget

RobertScheitlin__GISP — Mon, 12 Feb 2018 13:46:52 GMT

Ikbel,

This has been asked for many times but no one has even invested the time to code this ability.

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 13:51:57 GMT

Hi Robert ,

What about the screening widget ?

When i make search by location in the screening widget , the report show the region and others in intersection with it .What is the solution please .

The result should be only the country of Béja (1) and not Béja , Siliana , Jendouba (3) .

Re: Webapp Builder Layer List Widget

RobertScheitlin__GISP — Mon, 12 Feb 2018 13:59:25 GMT

Ikbel,

The geocoder is setup to return those values for places that contain that info (like your area). You would have to go into the source code and find where the Geocode results are returning and remove that info. I don't use the Screening widget and am not in a country that have that info returned so I can not provide a code example.

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 14:03:18 GMT

I'm not using a geocoder but a feature country (Béja , Jendouba , Siliana , El kef ..... ) when i choise Béja it retun in report béja , jendouba , siliana .

Re: Webapp Builder Layer List Widget

Mehretab — Fri, 10 Dec 2021 23:12:54 GMT

I guess you are looking for this in the LLWidget?

If so the above code I posted does the trick (Put it in layerListWieve.js ). I will post is again here.

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

 

      if (ckSelect.checked) {

 

        layerInfo.setTopLayerVisible(true);

 

        if (layerInfo.title === 'the title of your map1')  //you can find it from the layer list widget (title) {

           //  how to find layer id

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_2').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_3').setTopLayerVisible(false);

            }

                                           

   if (layerInfo.title === 'the title of your map2')   {

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_1').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_3').setTopLayerVisible(false);

            }

                                           

if (layerInfo.title === 'the title of your map3')  {

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_1').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_2').setTopLayerVisible(false);

 

            }

 

      } else {

        layerInfo.setTopLayerVisible(false);

      }

      evt.stopPropagation();

    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

good luck!

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 14:49:23 GMT

Hi , how can you toggle between multiple maps . thanks

Re: Webapp Builder Layer List Widget

Mehretab — Fri, 10 Dec 2021 23:12:56 GMT

This piece of code toggles between 3 services if you have 4 or more put the services to hidden or invisible on the list of

if (layerInfo.title === 'the title of your map1')  //you can find it from the layer list widget (title) {

           //  how to find layer id

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_2').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_3').setTopLayerVisible(false);
//THE FOUR LAYER WILL BE PUT HERE AND THE SAME IS TRUE IN THE OTHER IF STATEMENTS‍‍‍‍
this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_4').setTopLayerVisible(false);
/THE FIVES LAYER WILL BE PUT HERE AND THE SAME IS TRUE IN THE OTHER IF STATEMENTS‍‍‍‍
this.layerListWidget.operLayerInfos.getLayerInfoById('map Id_5').setTopLayerVisible(false);
//AND SO ON AS MANY LAYERS AS YOUR APP GOT‍‍‍‍‍‍‍‍

            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Basically the code is making everyone else invisible but but the map with the specified title, in our case

'the title of your map1'‍

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 15:29:50 GMT

I just have one map .

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Mon, 12 Feb 2018 15:53:50 GMT

Hi Mehretab ,

Map Démographie : 1a02ace3ed3547169d88deb4dcb8ce97

Map Infrastructure : 389912da2d0b4123b4270e2ba0d7a7e0

///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2017 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define([
'dijit/_WidgetBase',
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/array',
'dojo/dom-construct',
'dojo/on',
'dojo/query',
'jimu/dijit/CheckBox',
'jimu/dijit/DropMenu',
'./PopupMenu',
'dijit/_TemplatedMixin',
'dojo/text!./LayerListView.html',
'dojo/dom-class',
'dojo/dom-style',
'./NlsStrings'
], function(_WidgetBase, declare, lang, array, domConstruct, on, query,
CheckBox, DropMenu, PopupMenu, _TemplatedMixin, template,
domClass, domStyle, NlsStrings) {

return declare([_WidgetBase, _TemplatedMixin], {
templateString: template,
_currentSelectedLayerRowNode: null,
operationsDropMenu: null,
_layerNodeHandles: null,
// _layerDomNodeStorage = {
// layerInfoObjectId: {// layerDomNode
// layerTrNode: domNode,
// layerContentTrNode: domeNode,
// layerNodeEventHandles: []
// layerNodeReferredDijits: []
// }
// }
_layerDomNodeStorage: null,

postMixInProperties: function() {
this.inherited(arguments);
this.nls = NlsStrings.value;
this._layerDomNodeStorage = {};
},

postCreate: function() {
this.refresh();
this._initOperations();
},

refresh: function() {
this._removeLayerNodes();
array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
this.drawListNode(layerInfo, 0, this.layerListTable);
}, this);

array.forEach(this.operLayerInfos.getTableInfoArray(), function(layerInfo) {
this.drawListNode(layerInfo, 0, this.tableListTable);
}, this);
},

drawListNode: function(layerInfo, level, toTableNode, position) {
var nodeAndSubNode, showLegendDiv;
if(this.isLayerHiddenInWidget(layerInfo)) {
return;
}

nodeAndSubNode = this._layerDomNodeStorage[layerInfo.getObjectId()];
if((layerInfo.isRootLayer() || layerInfo.isTable) && nodeAndSubNode) {
domConstruct.place(nodeAndSubNode.layerTrNode, toTableNode, position);
domConstruct.place(nodeAndSubNode.layerContentTrNode, toTableNode, position);
} else if (layerInfo.newSubLayers.length === 0) {
//addLayerNode
nodeAndSubNode = this.addLayerNode(layerInfo, level, toTableNode, position);
//add legend node
if (this.config.showLegend) {
this.addLegendNode(layerInfo, level, nodeAndSubNode.subNode);
} else {
showLegendDiv = query(".showLegend-div", nodeAndSubNode.layerTrNode)[0];
if(showLegendDiv) {
domClass.add(showLegendDiv, 'hidden');
}
}
} else {
//addLayerNode
nodeAndSubNode = this.addLayerNode(layerInfo, level, toTableNode, position);
array.forEach(layerInfo.newSubLayers, lang.hitch(this, function(level, subLayerInfo) {
this.drawListNode(subLayerInfo, level + 1, nodeAndSubNode.subNode);
}, level));
}
},

addLayerNode: function(layerInfo, level, toTableNode, position) {

var layerTrNode, layerTdNode, ckSelectDiv, ckSelect, imageNoLegendDiv, handle,
imageNoLegendNode, popupMenuNode, i, imageShowLegendDiv, divLabel;

var rootLayerInfo = layerInfo.getRootLayerInfo();
// if(!this._layerNodeHandles[rootLayerInfo.id]) {
// this._layerNodeHandles[rootLayerInfo.id] = [];
// }

// init _layerDomNodeStorage for rootLayerInfo.
if(layerInfo.isRootLayer() || layerInfo.isTable) {
this._layerDomNodeStorage[layerInfo.getObjectId()] = {
layerTrNode: null,
layerContentTrNode: null,
layerNodeEventHandles: [],
layerNodeReferredDijits: []
};
}

var layerTrNodeClass = "layer-tr-node-" + layerInfo.id;
layerTrNode = domConstruct.create('tr', {
'class': 'jimu-widget-row layer-row ' +
( /*visible*/ false ? 'jimu-widget-row-selected ' : ' ') + layerTrNodeClass,
'layerTrNodeId': layerInfo.id
});
domConstruct.place(layerTrNode, toTableNode, position);

layerTdNode = domConstruct.create('td', {
'class': 'col col1'
}, layerTrNode);

for (i = 0; i < level; i++) {
domConstruct.create('div', {
'class': 'begin-blank-div jimu-float-leading',
'innerHTML': ''
}, layerTdNode);
}

imageShowLegendDiv = domConstruct.create('div', {
'class': 'showLegend-div jimu-float-leading',
'imageShowLegendDivId': layerInfo.id
}, layerTdNode);

ckSelectDiv = domConstruct.create('div', {
'class': 'div-select jimu-float-leading'
}, layerTdNode);

ckSelect = new CheckBox({
checked: layerInfo.isVisible(), //layerInfo.visible
'class': "visible-checkbox-" + layerInfo.id
});

domConstruct.place(ckSelect.domNode, ckSelectDiv);

imageNoLegendDiv = domConstruct.create('div', {
'class': 'noLegend-div jimu-float-leading'
}, layerTdNode);

var imageName;
if (layerInfo.isTable) {
imageName = 'images/table.png';
} else {
imageName = 'images/noLegend.png';
}

imageNoLegendNode = domConstruct.create('img', {
'class': 'noLegend-image',
'src': this.layerListWidget.folderUrl + imageName,
'alt': 'l'
}, imageNoLegendDiv);

if (layerInfo.isTiled || layerInfo.isTable) {
domStyle.set(imageShowLegendDiv, 'display', 'none');
domStyle.set(ckSelectDiv, 'display', 'none');
domStyle.set(imageNoLegendDiv, 'display', 'block');
}

// set tdNode width
domStyle.set(layerTdNode, 'width', level * 12 + 40 + 'px');

var layerTitleTdNode = domConstruct.create('td', {
'class': 'col col2'
}, layerTrNode);

//domStyle.set(divLabel, 'width', 263 - level*13 + 'px');

layerTdNode = domConstruct.create('td', {
'class': 'col col3'
}, layerTrNode);

var popupMenuDisplayStyle = this.hasContentMenu() ? "display: block" : "display: none";
// add popupMenu
popupMenuNode = domConstruct.create('div', {
'class': 'layers-list-popupMenu-div',
'style': popupMenuDisplayStyle
}, layerTdNode);

/*
var handle = on(popupMenuNode,
'click',
lang.hitch(this, function() {
var popupMenu = new PopupMenu({
//items: layerInfo.popupMenuInfo.menuItems,
_layerInfo: layerInfo,
box: this.layerListWidget.domNode.parentNode,
popupMenuNode: popupMenuNode,
layerListWidget: this.layerListWidget,
_config: this.config
}).placeAt(popupMenuNode);
this.own(on(popupMenu,
'onMenuClick',
lang.hitch(this, this._onPopupMenuItemClick, layerInfo, popupMenu)));

handle.remove();
}));
*/
/*
popupMenu = new PopupMenu({
//items: layerInfo.popupMenuInfo.menuItems,
_layerInfo: layerInfo,
box: this.layerListWidget.domNode.parentNode,
popupMenuNode: popupMenuNode,
layerListWidget: this.layerListWidget,
_config: this.config
}).placeAt(popupMenuNode);
this.own(on(popupMenu,
'onMenuClick',
lang.hitch(this, this._onPopupMenuItemClick, layerInfo, popupMenu)));
*/

//add a tr node to toTableNode.
var layerContentTrNode = domConstruct.create('tr', {
'class': '',
'layerContentTrNodeId': layerInfo.id
});
domConstruct.place(layerContentTrNode, toTableNode, position);

var tdNode = domConstruct.create('td', {
'class': '',
'colspan': '3'
}, layerContentTrNode);

var tableNode = domConstruct.create('table', {
'class': 'layer-sub-node',
'subNodeId': layerInfo.id
}, tdNode);

//bind event
handle = this.own(on(layerTitleTdNode,
'click',
lang.hitch(this,
this._onRowTrClick,
layerInfo,
imageShowLegendDiv,
layerTrNode,
tableNode)));
//this._layerNodeHandles[rootLayerInfo.id].push(handle[0]);
this._storeLayerNodeEventHandle(rootLayerInfo, handle[0]);

handle = this.own(on(imageShowLegendDiv,
'click',
lang.hitch(this,
this._onRowTrClick,
layerInfo,
imageShowLegendDiv,
layerTrNode,
tableNode)));
//this._layerNodeHandles[rootLayerInfo.id].push(handle[0]);
this._storeLayerNodeEventHandle(rootLayerInfo, handle[0]);

handle = this.own(on(ckSelect.domNode, 'click', lang.hitch(this,
this._onCkSelectNodeClick,
layerInfo,
ckSelect)));
//this._layerNodeHandles[rootLayerInfo.id].push(handle[0]);
this._storeLayerNodeEventHandle(rootLayerInfo, handle[0]);

handle = this.own(on(popupMenuNode, 'click', lang.hitch(this,
this._onPopupMenuClick,
layerInfo,
popupMenuNode,
layerTrNode)));
//this._layerNodeHandles[rootLayerInfo.id].push(handle[0]);
this._storeLayerNodeEventHandle(rootLayerInfo, handle[0]);

if(layerInfo.isRootLayer() || layerInfo.isTable) {
this._layerDomNodeStorage[layerInfo.getObjectId()].layerTrNode = layerTrNode;
this._layerDomNodeStorage[layerInfo.getObjectId()].layerContentTrNode = layerContentTrNode;
}
return {
layerTrNode: layerTrNode,
subNode: tableNode
};
},

hasContentMenu: function() {
var hasContentMenu = false;
var item;
if(this.config.contextMenu) {
for (item in this.config.contextMenu) {
if(this.config.contextMenu.hasOwnProperty(item) &&
(typeof this.config.contextMenu[item] !== 'function')) {
hasContentMenu = hasContentMenu || this.config.contextMenu[item];
}
}
} else {
hasContentMenu = true;
}
return hasContentMenu;
},

addLegendNode: function(layerInfo, level, toTableNode) {
//var legendsDiv;
var legendTrNode = domConstruct.create('tr', {
'class': 'legend-node-tr'
}, toTableNode),
legendTdNode;

legendTdNode = domConstruct.create('td', {
'class': 'legend-node-td'
}, legendTrNode);

try {
var legendsNode = layerInfo.createLegendsNode();
//layerInfo.legendsNode = legendsNode;
//domStyle.set(legendsNode, 'marginLeft', (level+1)*12 + 'px');
domStyle.set(legendsNode, 'font-size', (level + 1) * 12 + 'px');
domConstruct.place(legendsNode, legendTdNode);
} catch (err) {
console.error(err);
}
},

redrawLegends: function(layerInfo) {
var legendsNode = query("div[legendsDivId='" + layerInfo.id + "']", this.layerListTable)[0];
if(legendsNode) {
if(legendsNode._legendDijit && legendsNode._legendDijit.destroy) {
legendsNode._legendDijit.destroy();
}
layerInfo.drawLegends(legendsNode, this.layerListWidget.appConfig.portalUrl);
}
},

// destroyLayerTrNode: function(layerInfo) {
// var removedLayerNode = query("[class~='layer-tr-node-" + layerInfo.id + "']", this.domNode)[0];
// var removedLayerContentNode = query("[layercontenttrnodeid='" + layerInfo.id + "']", this.domNode)[0];
// if(removedLayerNode) {
// var rootLayerInfo = layerInfo.getRootLayerInfo();
// array.forEach(this._layerNodeHandles[rootLayerInfo.id], function(handle) {
// handle.remove();
// }, this);
// delete this._layerNodeHandles[rootLayerInfo.id];
// domConstruct.destroy(removedLayerNode);
// if(removedLayerContentNode) {
// domConstruct.destroy(removedLayerContentNode);
// }
// }
// },

/***************************************************
* methods for refresh layerListView
***************************************************/
_storeLayerNodeEventHandle: function(rootLayerInfo, handle) {
var rootLayerStorage = this._layerDomNodeStorage[rootLayerInfo.getObjectId()];
if(rootLayerStorage) {
rootLayerStorage.layerNodeEventHandles.push(handle);
}
},

_storeLayerNodeDijit: function(rootLayerInfo, dijit) {
var rootLayerStorage = this._layerDomNodeStorage[rootLayerInfo.getObjectId()];
if(rootLayerStorage) {
rootLayerStorage.layerNodeReferredDijits.push(dijit);
}
},

_clearLayerDomNodeStorage:function() {
//jshint unused:false
var layerInfoArray = this.operLayerInfos.getLayerInfoArray();
var tableInfoArray = this.operLayerInfos.getTableInfoArray();
var layerAndTableInfoArray = layerInfoArray.concat(tableInfoArray);
var findElem;
for(var elem in this._layerDomNodeStorage) {
if(this._layerDomNodeStorage.hasOwnProperty(elem) &&
(typeof this._layerDomNodeStorage[elem] !== 'function')) {
/* jshint loopfunc: true */
findElem = array.some(layerAndTableInfoArray, function(layerInfo) {
if(layerInfo.getObjectId().toString() === elem) {
return true;
}
}, this);
if(!findElem) {
//release layer node.
array.forEach(this._layerDomNodeStorage[elem].layerNodeEventHandles, function(handle) {
handle.remove();
}, this);
array.forEach(this._layerDomNodeStorage[elem].layerNodeReferredDijits, function(dijit) {
dijit.destroy();
}, this);
domConstruct.destroy(this._layerDomNodeStorage[elem].layerTrNode);
domConstruct.destroy(this._layerDomNodeStorage[elem].layerContentTrNode);
delete this._layerDomNodeStorage[elem];
}
}
}
},

_removeLayerNodes: function() {
var nodeAndSubNode, parentNode;
this._clearLayerDomNodeStorage();
for(var elem in this._layerDomNodeStorage) {
if(this._layerDomNodeStorage.hasOwnProperty(elem) &&
(typeof this._layerDomNodeStorage[elem] !== 'function')) {
nodeAndSubNode = this._layerDomNodeStorage[elem];
if(nodeAndSubNode.parentNode && nodeAndSubNode.layerTrNode) {
parentNode = nodeAndSubNode.layerTrNode.parentNode;
if(parentNode) {
parentNode.removeChild(nodeAndSubNode.layerTrNode);
}
parentNode = nodeAndSubNode.layerContentTrNode.parentNode;
if(parentNode) {
parentNode.removeChild(nodeAndSubNode.layerContentTrNode);
}
}
}
}
// this.inherited(arguments);
},

/***************************************************
* methods for control layerListView
***************************************************/
// return current state:
// true: fold,
// false: unfold
_foldSwitch: function(layerInfo, imageShowLegendDiv, subNode) {
/*jshint unused: false*/
var state;
if (domStyle.get(subNode, 'display') === 'none') {
state = this._foldOrUnfoldLayer(layerInfo, false, imageShowLegendDiv, subNode);
} else {
state = this._foldOrUnfoldLayer(layerInfo, true, imageShowLegendDiv, subNode);
}
return state;
},

_foldOrUnfoldLayer: function(layerInfo, isFold, imageShowLegendDivParam, subNodeParam) {
var imageShowLegendDiv =
imageShowLegendDiv ?
imageShowLegendDivParam :
query("div[imageShowLegendDivId='" + layerInfo.id + "']", this.layerListTable)[0];
var subNode =
subNode ?
subNodeParam :
query("table[subNodeId='" + layerInfo.id + "']", this.layerListTable)[0];

_foldOrUnfoldLayers: function(layerInfos, isFold) {
array.forEach(layerInfos, function(layerInfo) {
this._foldOrUnfoldLayer(layerInfo, isFold);
}, this);
},

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {
if(evt.ctrlKey || evt.metaKey) {
if(layerInfo.isRootLayer()) {
this.turnAllRootLayers(ckSelect.checked);
} else {
this.turnAllSameLevelLayers(layerInfo, ckSelect.checked);
}
} else {
this.layerListWidget._denyLayerInfosIsVisibleChangedResponseOneTime = true;
layerInfo.setTopLayerVisible(ckSelect.checked);
}
evt.stopPropagation();
},

_onPopupMenuClick: function(layerInfo, popupMenuNode, layerTrNode, evt) {
var rootLayerInfo = layerInfo.getRootLayerInfo();
var popupMenu = popupMenuNode.popupMenu;
if(!popupMenu) {
popupMenu = new PopupMenu({
//items: layerInfo.popupMenuInfo.menuItems,
_layerInfo: layerInfo,
box: this.layerListWidget.domNode.parentNode,
popupMenuNode: popupMenuNode,
layerListWidget: this.layerListWidget,
_config: this.config
}).placeAt(popupMenuNode);
popupMenuNode.popupMenu = popupMenu;
this._storeLayerNodeDijit(rootLayerInfo, popupMenu);
var handle = this.own(on(popupMenu,
'onMenuClick',
lang.hitch(this, this._onPopupMenuItemClick, layerInfo, popupMenu)));
//this._layerNodeHandles[rootLayerInfo.id].push(handle[0]);
this._storeLayerNodeEventHandle(rootLayerInfo, handle[0]);
}

/*jshint unused: false*/
this._changeSelectedLayerRow(layerTrNode);
if (popupMenu && popupMenu.state === 'opened') {
popupMenu.closeDropMenu();
} else {
this._hideCurrentPopupMenu();
if (popupMenu) {
this.currentPopupMenu = popupMenu;
popupMenu.openDropMenu();
}
}

//hidden operation mene if that is opened.
if (this.operationsDropMenu && this.operationsDropMenu.state === 'opened') {
this.operationsDropMenu.closeDropMenu();
}
evt.stopPropagation();
},

_hideCurrentPopupMenu: function() {
if (this.currentPopupMenu && this.currentPopupMenu.state === 'opened') {
this.currentPopupMenu.closeDropMenu();
}
},

_onLayerListWidgetPaneClick: function() {
if (this.operationsDropMenu) {
this.operationsDropMenu.closeDropMenu();
}
},

_onRowTrClick: function(layerInfo, imageShowLegendDiv, layerTrNode, subNode, evt) {
this._changeSelectedLayerRow(layerTrNode);
var fold = this._foldSwitch(layerInfo, imageShowLegendDiv, subNode);
if(evt.ctrlKey || evt.metaKey) {
if(layerInfo.isRootLayer()) {
this.foldOrUnfoldAllRootLayers(fold);
} else {
this.foldOrUnfoldSameLevelLayers(layerInfo, fold);
}
}
},

_changeSelectedLayerRow: function(layerTrNode) {
if (this._currentSelectedLayerRowNode && this._currentSelectedLayerRowNode === layerTrNode) {
return;
}
if (this._currentSelectedLayerRowNode) {
domClass.remove(this._currentSelectedLayerRowNode, 'jimu-widget-row-selected');
}
domClass.add(layerTrNode, 'jimu-widget-row-selected');
this._currentSelectedLayerRowNode = layerTrNode;
},

_onPopupMenuItemClick: function(layerInfo, popupMenu, item, data) {
var evt = {
itemKey: item.key,
extraData: data,
layerListWidget: this.layerListWidget,
layerListView: this
},
result;

// window.jimuNls.layerInfosMenu.itemTransparency NlsStrings.value.itemTransparency
if (item.key === 'transparency') {
if (domStyle.get(popupMenu.transparencyDiv, 'display') === 'none') {
popupMenu.showTransNode(layerInfo.getOpacity());
} else {
popupMenu.hideTransNode();
}
} else {
result = popupMenu.popupMenuInfo.onPopupMenuClick(evt);
if (result.closeMenu) {
popupMenu.closeDropMenu();
}
}
},

/***************************************************
* methods for control moveUp/moveDown.
***************************************************/
// befor exchange: id1 -> id2
// after exchanged: id2 -> id1
_exchangeLayerTrNode: function(layerInfo1, layerInfo2) {
var layer1TrNode = query("tr[layerTrNodeId='" + layerInfo1.id + "']", this.layerListTable)[0];
//var layer1ContentTrNode = query("tr[layerContentTrNodeId='" + layerInfo1.id + "']",
// this.layerListTable)[0];
var layer2TrNode = query("tr[layerTrNodeId='" + layerInfo2.id + "']", this.layerListTable)[0];
var layer2ContentTrNode = query("tr[layerContentTrNodeId='" + layerInfo2.id + "']",
this.layerListTable)[0];
if(layer1TrNode && layer2TrNode && layer2ContentTrNode) {
// change layerTr
this.layerListTable.removeChild(layer2TrNode);
this.layerListTable.insertBefore(layer2TrNode, layer1TrNode);
// change LayerContentTr
this.layerListTable.removeChild(layer2ContentTrNode);
this.layerListTable.insertBefore(layer2ContentTrNode, layer1TrNode);
}
},

_getMovedSteps: function(layerInfo, upOrDown) {
// summary:
// according to hidden layers to get moved steps.
var steps = 1;
var layerInfoIndex;
var layerInfoArray = this.operLayerInfos.getLayerInfoArray();
array.forEach(layerInfoArray, function(currentLayerInfo, index) {
if(layerInfo.id === currentLayerInfo.id) {
layerInfoIndex = index;
}
}, this);
if(upOrDown === "moveup") {
while(!layerInfoArray[layerInfoIndex].isFirst) {
layerInfoIndex--;
if(this.isLayerHiddenInWidget(layerInfoArray[layerInfoIndex]) &&
!layerInfoArray[layerInfoIndex].isFirst) {
steps++;
} else {
break;
}
}
} else {
while(!layerInfoArray[layerInfoIndex].isLast) {
layerInfoIndex++;
if(this.isLayerHiddenInWidget(layerInfoArray[layerInfoIndex]) &&
!layerInfoArray[layerInfoIndex].isLast) {
steps++;
} else {
break;
}
}
}
return steps;
},

moveUpLayer: function(layerInfo) {
// summary:
// move up layer in layer list.
// description:
// call the moveUpLayer method of LayerInfos to change the layer order in map,
// and update the data in LayerInfos
// then, change layerNodeTr and layerContentTr domNode
var steps = this._getMovedSteps(layerInfo, 'moveup');
this.layerListWidget._denyLayerInfosReorderResponseOneTime = true;
var beChangedLayerInfo = this.operLayerInfos.moveUpLayer(layerInfo, steps);
if (beChangedLayerInfo) {
this._exchangeLayerTrNode(beChangedLayerInfo, layerInfo);
}
},

moveDownLayer: function(layerInfo) {
// summary:
// move down layer in layer list.
// description:
// call the moveDownLayer method of LayerInfos to change the layer order in map,
// and update the data in LayerInfos
// then, change layerNodeTr and layerContentTr domNode
var steps = this._getMovedSteps(layerInfo, 'movedown');
this.layerListWidget._denyLayerInfosReorderResponseOneTime = true;
var beChangedLayerInfo = this.operLayerInfos.moveDownLayer(layerInfo, steps);
if (beChangedLayerInfo) {
this._exchangeLayerTrNode(layerInfo, beChangedLayerInfo);
}
},

isLayerHiddenInWidget: function(layerInfo) {
var isHidden = false;
var currentLayerInfo = layerInfo;
if(layerInfo &&
this.config.layerOptions &&
this.config.layerOptions[layerInfo.id] !== undefined) {
while(currentLayerInfo) {
isHidden = isHidden || !this.config.layerOptions[currentLayerInfo.id].display;
if(isHidden) {
break;
}
currentLayerInfo = currentLayerInfo.parentLayerInfo;
}
} else {
// if config has not been configured, default value is 'true'.
// if config has been configured, but new layer of webmap is ont in config file,
// default value is 'true'.
isHidden = false;
}
return isHidden;
},

isFirstDisplayedLayerInfo: function(layerInfo) {
var isFirst;
var steps;
var layerInfoIndex;
var layerInfoArray;
if(layerInfo.isFirst || !layerInfo.isRootLayer()) {
isFirst = true;
} else {
steps = this._getMovedSteps(layerInfo, "moveup");
layerInfoArray = this.operLayerInfos.getLayerInfoArray();
layerInfoIndex = this.operLayerInfos._getTopLayerInfoIndexById(layerInfo.id);
if(this.isLayerHiddenInWidget(layerInfoArray[layerInfoIndex - steps])) {
isFirst = true;
} else {
isFirst = false;
}
}
return isFirst;
},

isLastDisplayedLayerInfo: function(layerInfo) {
var isLast;
var steps;
var layerInfoIndex;
var layerInfoArray;
if(layerInfo.isLast || !layerInfo.isRootLayer()) {
isLast = true;
} else {
steps = this._getMovedSteps(layerInfo, "movedown");
layerInfoArray = this.operLayerInfos.getLayerInfoArray();
layerInfoIndex = this.operLayerInfos._getTopLayerInfoIndexById(layerInfo.id);
if(this.isLayerHiddenInWidget(layerInfoArray[layerInfoIndex + steps])) {
isLast = true;
} else {
isLast = false;
}
}
return isLast;
},

/***************************************************
* methods for control operation.
***************************************************/
_initOperations: function() {
this.operationsDropMenu = new DropMenu({
items:[{
key: "turnAllLayersOn",
label: this.nls.turnAllLayersOn
}, {
key: "turnAllLayersOff",
label: this.nls.turnAllLayersOff
}, {
key: "separator"
}, {
key: "expandAllLayers",
label: this.nls.expandAllLayers
}, {
key: "collapseAlllayers",
label: this.nls.collapseAlllayers
}],
box: this.layerListWidget.domNode.parentNode
}).placeAt(this.layerListOperations);

var operationIconBtnNode = query('div.jimu-dropmenu > div:first-child',
this.layerListOperations)[0];

if(operationIconBtnNode) {
domClass.remove(operationIconBtnNode, ['jimu-icon-btn', 'popup-menu-button']);
domClass.add(operationIconBtnNode, ['feature-action', 'icon-operation']);
}

if(this.operationsDropMenu.btnNode) {
this.own(on(this.operationsDropMenu.btnNode,
'click',
lang.hitch(this, this._onLayerListOperationsClick)));
}

this.own(on(this.operationsDropMenu ,
'onMenuClick',
lang.hitch(this, this._onOperationsMenuItemClick)));
},

_onLayerListOperationsClick: function() {
this._hideCurrentPopupMenu();
},

_onOperationsMenuItemClick: function(item) {
switch (item.key) {
case 'turnAllLayersOn':
this.turnAllRootLayers(true);
return;
case 'turnAllLayersOff':
this.turnAllRootLayers(false);
return;
case 'expandAllLayers':
this.foldOrUnfoldAllRootLayers(false);
return;
case 'collapseAlllayers':
this.foldOrUnfoldAllRootLayers(true);
return;
default:
return;
}
},

turnAllRootLayers: function(isOnOrOff) {
var layerInfoArray = this.operLayerInfos.getLayerInfoArray();
array.forEach(layerInfoArray, function(layerInfo) {
if (!this.isLayerHiddenInWidget(layerInfo)) {
layerInfo.setTopLayerVisible(isOnOrOff);
}
}, this);
},

turnAllSameLevelLayers: function(layerInfo, isOnOrOff) {
var layerOptions = {};
var rootLayerInfo = layerInfo.getRootLayerInfo();
rootLayerInfo.traversal(lang.hitch(this, function(subLayerInfo) {
if(subLayerInfo.parentLayerInfo &&
subLayerInfo.parentLayerInfo.id === layerInfo.parentLayerInfo.id &&
!this.isLayerHiddenInWidget(subLayerInfo)) {
layerOptions[subLayerInfo.id] = {visible: isOnOrOff};
} else {
layerOptions[subLayerInfo.id] = {visible: subLayerInfo.isVisible()};
}
}));
rootLayerInfo.resetLayerObjectVisibility(layerOptions);
},

foldOrUnfoldAllRootLayers: function(isFold) {
var layerInfoArray = array.filter(this.operLayerInfos.getLayerInfoArray(),
function(layerInfo) {
return !this.isLayerHiddenInWidget(layerInfo);
}, this);
this._foldOrUnfoldLayers(layerInfoArray, isFold);
},

foldOrUnfoldSameLevelLayers: function(layerInfo, isFold) {
var layerInfoArray;
if(layerInfo.parentLayerInfo) {
layerInfoArray = array.filter(layerInfo.parentLayerInfo.getSubLayers(),
function(layerInfo) {
return !this.isLayerHiddenInWidget(layerInfo);
}, this);
this._foldOrUnfoldLayers(layerInfoArray, isFold);
}
}

});
});

Re: Webapp Builder Layer List Widget

Mehretab — Mon, 12 Feb 2018 16:35:36 GMT

So basically you are looking to toggle between sublayres in your Web Map? If so Robert Scheitlin, GISP got already a solution to toggle between sublayers in this thread.

Re: Webapp Builder Layer List Widget

RobertScheitlin__GISP — Mon, 12 Feb 2018 17:11:33 GMT

Mehretab,

Thanks for linking that thread I completely forgot about that one.

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Tue, 13 Feb 2018 09:24:59 GMT

I don't have sublayers .

Re: Webapp Builder Layer List Widget

ikbelkachbouri — Tue, 13 Feb 2018 09:33:20 GMT

I appreciate your work in IKSR Map Application how to toggle betwenn maps and layers ? Where is the code source ?

Re: Webapp Builder Layer List Widget

Mehretab — Fri, 10 Dec 2021 23:13:00 GMT

Well this is the same scenario like in my application I already provided the piece of code that does the trick.

in your case the map title will for example, 'Population Totale' in the first if statement and insert the ids of the other services you want to hide:

this.layerListWidget.operLayerInfos.getLayerInfoById('map Id you want to hide').setTopLayerVisible(false);

If you do not know how to get the map ids just uncomment the //console.log(layerInfo.id) or you can right click on your service and see the id of the particular service in you console (see the image)

onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

 

      if (ckSelect.checked) {

 

        layerInfo.setTopLayerVisible(true);

 

        if (layerInfo.title === 'Population Totale')  {

           //  how to find layer id

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('Nombre de naissances Id').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Solde migratoire Id').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Nobre de mariages Id ').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Nombre de divorces Id').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Nombre de deces Id').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Taux Brut de Natalite Id ').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Taux Global  de Fecondite Id').setTopLayerVisible(false);
            
}

                                           

   if (layerInfo.title === 'Nombre de naissances')   {

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('Population Totale Id').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Solde migratoire Id').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Nobre de mariages Id ').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Nombre de divorces Id').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Nombre de deces Id').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Taux Brut de Natalite Id ').setTopLayerVisible(false);

this.layerListWidget.operLayerInfos.getLayerInfoById('Taux Global  de Fecondite Id').setTopLayerVisible(false);
 
            }

                                           

if (layerInfo.title === 'Solde migratoire Id')  {

              //console.log(layerInfo.id);

//THE SAME IS TRUE HERE....PUT THE Id's OF MAP YOU WANT TO HIDE

            }

 

      } else {

        layerInfo.setTopLayerVisible(false);

      }

      evt.stopPropagation();

    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Put this code in the LayerListVies.js's _onCkSelectNodeClick function. Probably you will need to delete the existing code and replace it with this code.

This should work for you if you use the appropriate Id and map title.

Re: Webapp Builder Layer List Widget

Mehretab — Tue, 13 Feb 2018 10:29:26 GMT

The code is already there and try it out and let me know