topic Re: Remove map service/layers from layer list in ArcGIS Web AppBuilder Questions

Remove map service/layers from layer list

enricobonansea — Tue, 04 Oct 2016 14:43:35 GMT

is it possible to remove a map service (or single layer) from the layer list?

It seems to me that in the WAB previous version this option was avaiable in the layer list widget.

Thank you
Enrico

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Tue, 04 Oct 2016 15:08:38 GMT

Enrico,

Sure in the LayerList widgets settings you choose which layer are visible in the widgets list:

Re: Remove map service/layers from layer list

enricobonansea — Tue, 04 Oct 2016 15:34:11 GMT

Robert,

my question was not so clear, sorry.

I ask if it is possible to remove a map service that has been added before by other widget (ie Geoportal serach, add data widgets)

In one of the previous versions of WAB this option was available right-clicking on the layer, while now (WAB dev 2.1) is not visible.

Thank you
enrico

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Tue, 04 Oct 2016 16:03:55 GMT

Enrico,

I wonder if that was a custom feature as I do not see the "Remove Layer" anywhere in the LayerList widgets code in version 2.0.

Re: Remove map service/layers from layer list

DevonBise — Tue, 04 Oct 2016 16:35:00 GMT

Thread bump. Having this feature would be a fantastic addition as we have users who will add Operational Layers "by mistake" to the application and then confuse themselves. Keeping a clean interface is ideal - especially for users who are not particularly tech-savvy.

Re: Remove map service/layers from layer list

enricobonansea — Tue, 04 Oct 2016 16:46:51 GMT

Maybe you're right : the specific example refers to an old customized app, based on some older version of WAB, but iIt seems me that the remove option was available in the past by default..(.?)

Anyway , i think this is a fundamental feature that "layer list widget " should have.

Do you think it is possible add this function in layer list?

thank you

Re: Remove map service/layers from layer list

enricobonansea — Wed, 05 Oct 2016 07:08:58 GMT

Devon, I totally agree.

If the app has "Add" functions (Add data, Geoportal search, addshapefile etc) SHOULD have a Remove tool.

We investigated the code but we haven't found any solution... but we are JS programming newbie ...

Hope someone could contribute !

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Wed, 05 Oct 2016 11:57:39 GMT

Enrico,

The Add Data widget has a remove button when you add a layer. I also think I remember a remove layer option on the Layer List widget but there was likely a reason it was removed.

Re: Remove map service/layers from layer list

enricobonansea — Mon, 10 Oct 2016 09:37:43 GMT

We worked on the issue and we seem to have found a a workaround.

It works also if we are sure that it could be ehanced and otimized.

The only problem we notice is this message in firebug,. We don't know what it means but it do not impact on the functionality:

Any suggestion is appreciated

Bye

Enrico & Manuela

Here the modified files (in red the modified lines):

..\widgets\LayerList\PopupMenu.js

...
_initDeniedItems: function() {
var deniedItemsFromConfigKeys = [];
var menuItemDictionary = {
    "ZoomTo": "zoomto",
    "Transparency": "transparency",
    "EnableOrDisablePopup": "controlPopup",
    "MoveupOrMovedown": "moveup movedown",
    "OpenAttributeTable": "table",
    "DescriptionOrShowItemDetailsOrDownload": "url",
    "RemoveLayer": "removelayer", //
};
...

..\widgets\LayerList\PopupMenuInfo.js

...
constructor: function(layerInfo, displayItemInfos, layerType, layerListWidget) {
var l = displayItemInfos.length;
if (l > 5) {
displayItemInfos = { key: 'removelayer' }; //
}
...

...

    onPopupMenuClick: function(evt) {
      var result = {
        closeMenu: true
      };
      switch (evt.itemKey) {
        case 'zoomto' /*this.nls.itemZoomTo'Zoom to'*/ :
          this._onItemZoomToClick(evt);
          break;
        case 'moveup' /*this.nls.itemMoveUp'Move up'*/ :
          this._onMoveUpItemClick(evt);
          break;
        case 'movedown' /*this.nls.itemMoveDown'Move down'*/ :
          this._onMoveDownItemClick(evt);
          break;
        case 'table' /*this.nls.itemToAttributeTable'Open attribute table'*/ :
          this._onTableItemClick(evt);
          break;
        case 'transparencyChanged':
          this._onTransparencyChanged(evt);
          result.closeMenu = false;
          break;
        case 'controlPopup':
          this._onControlPopup();
          break;
       case 'removelayer': //
          this._onItemRemoveLayer(evt);
          break;
      }
      return result;
    },

...

...
_initCandidateMenuItems: function() {
//descriptionTitle: NlsStrings.value.itemDesc,
// var layerObjectUrl = (this._layerInfo.layerObject && this._layerInfo.layerObject.url) ?
//                       this._layerInfo.layerObject.url :
//                       '';
this._candidateMenuItems = [{
    key: 'separator',
    label: ''
}, {
    key: 'empty',
    label: this.nls.empty
}, {
    key: 'zoomto',
    label: this.nls.itemZoomTo
}, {
    key: 'transparency',
    label: this.nls.itemTransparency
}, {
    key: 'moveup',
    label: this.nls.itemMoveUp
}, {
    key: 'movedown',
    label: this.nls.itemMoveDown
}, {
    key: 'table',
    label: this.nls.itemToAttributeTable
}, {
    key: 'controlPopup',
    label: this.nls.removePopup
}, {
    key: 'url',
    label: this._getATagLabel()
},{
    key: 'separator',
    label: ''
},{ //
    key: 'removelayer',
    label: this.nls.itemRemoveLayer
}];
},
...

...
_onItemRemoveLayer: function(evt) { //
this._layerInfo.map.removeLayer(this._layerInfo.layerObject);
}
...

...\configs\LayerList\config_Contenuti mappa.json (the original file shoud be layerlist.json)

{
"showLegend": true,
"contextMenu": {
    "ZoomTo": true,
    "Transparency": true,
    "EnableOrDisablePopup": true,
    "MoveupOrMovedown": true,
    "OpenAttributeTable": true,
    "DescriptionOrShowItemDetailsOrDownload": true,
    "RemoveLayer": true
},
"layerOptions": {}
}

...\jimu.js\nls\main.js

...
layerInfosMenu: {
titleBasemap: "Basemaps",
titleLayers: "Operational Layers",
labelLayer: "Layer Name",
itemZoomTo: "Zoom to",
itemTransparency: "Transparency",
itemTransparent: "Transparent",
itemOpaque: "Opaque",
itemMoveUp: "Move up",
itemMoveDown: "Move down",
itemDesc: "Description",
itemDownload: "Download",
itemToAttributeTable: "Open Attribute Table",
itemRemoveLayer: "Remove Layer"
},
...

...\jimu.js\nls\it\main.js

...
"layerInfosMenu": {
"titleBasemap": "Mappe di base",
"titleLayers": "Layer operativi",
"labelLayer": "Nome layer",
"itemZoomTo": "Zoom a",
"itemTransparency": "Trasparenza",
"itemTransparent": "Trasparente",
"itemOpaque": "Opaco",
"itemMoveUp": "Sposta su",
"itemMoveDown": "Sposta giù",
"itemDesc": "Descrizione",
"itemDownload": "Download",
"itemToAttributeTable": "Apri tabella attributi",
"itemRemoveLayer": "Rimuovi il layer"
},
...

...\widgets\LayerList\nls\strings.js

define({
root: ({
    _widgetLabel: "Layer List",
    titleBasemap: "Basemaps",
    titleLayers: "Operational Layers",
    labelLayer: "Layer Name",
    itemZoomTo: "Zoom to",
    itemTransparency: "Transparency",
    itemTransparent: "Transparent",
    itemOpaque: "Opaque",
    itemMoveUp: "Move up",
    itemMoveDown: "Move down",
    itemDesc: "Description",
    itemDownload: "Download",
    itemToAttributeTable: "Open Attribute Table",
    itemShowItemDetails: "Show Item Details",
    empty: "empty",
    removePopup: "Disable Pop-up",
    enablePopup: "Enable Pop-up",
    turnAllLayersOff: "Turn All Layers Off",
    turnAllLayersOn: "Turn All Layers On",
    expandAllLayers: "Expand All Layers",
    collapseAlllayers: "Collapse All layers",
    turnAllLabelsOff: "Turn All Labels Off",
    turnAllLabelsOn: "Turn All Labels On",
    showLabels: "Show Labels",
    hideLables: "Hide Labels",
    itemTransparency: "Remove Layer"
}),
...

...\widgets\LayerList\nls\it\strings.js

define({
"_widgetLabel": "Elenco layer",
"titleBasemap": "Mappe di base",
"titleLayers": "Layer operativi",
"labelLayer": "Nome layer",
"itemZoomTo": "Zoom a",
"itemTransparency": "Trasparenza",
"itemTransparent": "Trasparente",
"itemOpaque": "Opaco",
"itemMoveUp": "Sposta su",
"itemMoveDown": "Sposta giù",
"itemDesc": "Descrizione",
"itemDownload": "Download",
"itemToAttributeTable": "Apri tabella attributi",
"itemShowItemDetails": "Mostra dettagli elemento",
"empty": "vuoto",
"removePopup": "Disabilita popup",
"enablePopup": "Abilita popup",
"turnAllLayersOff": "Disattiva tutti i layer",
"turnAllLayersOn": "Attiva tutti i layer",
"expandAllLayers": "Espandi tutti i layer",
"collapseAlllayers": "Comprimi tutti i layer",
"turnAllLabelsOff": "Disattiva tutte le etichette",
"turnAllLabelsOn": "Attiva tutte le etichette",
"showLabels": "Mostra Etichette",
"hideLables": "Nascondi Etichette",
"itemRemoveLayer": "Rimuovi il layer"
});

...\widgets\LayerList\config.json

{
"showLegend": true,
"contextMenu": {
   "ZoomTo": true,
   "Transparency": true,
   "EnableOrDisablePopup": true,
   "MoveupOrMovedown": true,
   "OpenAttributeTable": true,
   "DescriptionOrShowItemDetailsOrDownload": true,
    "RemoveLayer": true
}
}

Re: Remove map service/layers from layer list

deleted-user-CQZbjNeBXm49 — Mon, 10 Oct 2016 13:23:39 GMT

enrico,

Nice work and thanks for sharing the code, however, there is a small query that might be a typo, see image below:

Re: Remove map service/layers from layer list

enricobonansea — Mon, 10 Oct 2016 14:58:52 GMT

Yes It was an error due to cut&paste...Thank you

Enrico & Manuela

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:26:46 GMT

Enrico,

For some reason you images are not showing in your post. What are you using to determine if the remove layer option should be shown?

if (l > 5) {
  displayItemInfos[l] = { key: 'removelayer' }; //
}‍‍‍

Re: Remove map service/layers from layer list

enricobonansea — Tue, 11 Oct 2016 10:04:26 GMT

Robert, we need to distinguish the mapservice element (father) from its single layers because the remove option seems to work only on the entire map service element.

The only way that we found to distinguish form these two cases was to count the options shown in layer list if the elementi is a map service (5 options) or a single layer (only 3).

Maybe there is a cleaver way but we haven't found it...

Here the images from previous post.

Options in layerlist:

ERROR

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:26:48 GMT

Enrico,

OK to add the remove layer option to only root layers you need to make these changes:

PopupMenuInfo.js (i.e. lines 24- 28, 51 - 55, 66 - 70):

  clazz.create = function(layerInfo, layerListWidget) {
    var retDef = new Deferred();
    var isRootLayer = layerInfo.isRootLayer();
    var defaultItemInfos = [{
      key: 'url',
      onClick: null
    }];

    var itemInfoCategoreList = {
      'RootLayer': [{
        key: 'zoomto'
      }, {
        key: 'transparency'
      }, {
        key: 'separator'
      }, {
        key: 'moveup'
      }, {
        key: 'movedown'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }, {
        key: 'separator'
      }, {
        key: 'removelayer'
      }],
      'RootLayerAndFeatureLayer': [{
        key: 'zoomto'
      }, {
        key: 'transparency'
      }, {
        key: 'separator'
      }, {
        key: 'controlPopup'
      }, {
        key: 'separator'
      }, {
        key: 'moveup'
      }, {
        key: 'movedown'
      }, {
        key: 'separator'
      }, {
        key: 'table'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }, {
        key: 'separator'
      }, {
        key: 'removelayer'
      }],
      'FeatureLayer': [{
        key: 'controlPopup'
      }, {
        key: 'separator'
      }, {
        key: 'table'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }, {
        key: 'separator'
      }, {
        key: 'removelayer'
      }],
      'GroupLayer': [{
        key: 'url'
      }],
      'Table': [{
        key: 'table'
      }, {
        key: 'separator'
      }, {
        key: 'url'
      }],
      'default': defaultItemInfos
    };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

PopupMenuInfo.js (lines 25 - 30):

    getDeniedItems: function() {
      // summary:
      //    the items that will be denied.
      // description:
      //    return Object = [{
      //   key: String, popupMenuInfo key,
      //   denyType: String, "disable" or "hidden"
      // }]
      var defRet = new Deferred();
      var dynamicDeniedItems = [];

      if (this.layerListWidget.layerListView.isFirstDisplayedLayerInfo(this._layerInfo)) {
        dynamicDeniedItems.push({
          'key': 'moveup',
          'denyType': 'disable'
        });
      }
      if (this.layerListWidget.layerListView.isLastDisplayedLayerInfo(this._layerInfo)) {
        dynamicDeniedItems.push({
          'key': 'movedown',
          'denyType': 'disable'
        });
      }

      if(this._layerInfo.isLeaf()) {
        dynamicDeniedItems.push({
          'key': 'removelayer',
          'denyType': 'hidden'
        });
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then remove your addition to the constructor method:

if (l > 5) {
  displayItemInfos[l] = { key: 'removelayer' }; //
}‍‍‍

Re: Remove map service/layers from layer list

enricobonansea — Wed, 12 Oct 2016 10:28:05 GMT

Robert, great!

thank you very much.

We substitute the code and everything works fine .

The error, fotunately visible only looking with firebug (seeprevious image) persists: do you know what it means?

Re: Remove map service/layers from layer list

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:26:51 GMT

Enrico,

In the PopupMenu.js edit the closeDropMenu method to this:

    closeDropMenu: function() {
      this.inherited(arguments);
      if(this.transparencyDiv){
        this.hideTransNode();
      }
    },‍‍‍‍‍‍

Re: Remove map service/layers from layer list

enricobonansea — Thu, 13 Oct 2016 12:45:43 GMT

Great! error disappeared

Thank you Robert!

Re: Remove map service/layers from layer list

LefterisKoumis — Sat, 11 Dec 2021 20:26:54 GMT

Robert, I'd like to give to the users the option to remove other types of layers, like a csv type.

I make some changes below. Do you see any reasons not to follow this path that are not apparent to me? Thanks.

Removed the "var" on line 3 to make the IsRootLayer a global variable.

clazz.create = function(layerInfo, layerListWidget) {
    var retDef = new Deferred();
    isRootLayer = layerInfo.isRootLayer();
    var defaultItemInfos = [{
      key: 'url',
      onClick: null
    }];‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Add the "&& (!isRootLayer) to check if the layer is at the root.

if(this._layerInfo.isLeaf() && (!isRootLayer)) {
        dynamicDeniedItems.push({
          'key': 'removelayer',
          'denyType': 'hidden'
        });
      }‍‍‍‍‍‍