Using listMode to hide layers in Layerlist

647
2
Jump to solution
06-17-2019 01:32 PM
AshleyPeters
Occasional Contributor II

It's been a while since I've used the JavaScript API, so I'm fairly rusty. I'm in the process of updating several of our maps to the newest API and making the layout more mobile-friendly.

I am using the LayerList with Legend sample code. I'd like to hide two of my three layers from the LayerList. They essentially make up my basemap. Here's my layerlist code currently:

var layerList = new LayerList({
view: view,
container: document.createElement ("div"),
listItemCreatedFunction: function(event) {
const item = event.item;
if (item.layer.type != "group") {
// don't show legend twice
item.panel = {
content: "legend",
open: true
};
}
}

});

var llExpand = new Expand({
view: view,
content: layerList.domNode,
expandIconClass: "esri-icon-layer-list"
});

view.ui.add(llExpand, "top-right");
});

And my layers:

// Add state feature layer
var stateLayer = new FeatureLayer({
url: "http://myURL/States/MapServer/0",
});

mapMain.add(stateLayer);

// Add counties feature layer
var countiesLayer = new FeatureLayer({
url: "http://myURL/AlabamaCounties/MapServer/0",
});

mapMain.add(countiesLayer);

// Add WFF districts feature layer
var WFFdistrictsLayer = new FeatureLayer({
url: "http://myURL/WFFDistricts/MapServer/0",
title: "Wildlife and Freshwater Fisheries Districts"
});

mapMain.add(WFFdistrictsLayer);

I'd like to remove the stateLayer and countiesLayer from the layerlist. I believe using listMode will be my best option. I've followed the info in the thread, https://community.esri.com/thread/232289-remove-layers-from-the-layerwidget , with limited success. I've been able to hide one layer, but not both.

Any suggestions on how to best hide multiple layers?

Thanks in advance for your time!

Ashley

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Ashley,

   You just add the listMode property to your layers:

      var stateLayer = new FeatureLayer({
url: "http://myURL/States/MapServer/0",
});
statesLayer.listMode = "hide";
mapMain.add(stateLayer);

// Add counties feature layer
var countiesLayer = new FeatureLayer({
url: "http://myURL/AlabamaCounties/MapServer/0",
});
countiesLayer.listMode = "hide";
mapMain.add(countiesLayer);

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Ashley,

   You just add the listMode property to your layers:

      var stateLayer = new FeatureLayer({
url: "http://myURL/States/MapServer/0",
});
statesLayer.listMode = "hide";
mapMain.add(stateLayer);

// Add counties feature layer
var countiesLayer = new FeatureLayer({
url: "http://myURL/AlabamaCounties/MapServer/0",
});
countiesLayer.listMode = "hide";
mapMain.add(countiesLayer);

View solution in original post

0 Kudos
AshleyPeters
Occasional Contributor II

Thanks Robert! I had tried adding the listMode under the add statement, but I'm not sure that I had tried it above it in that same format.

0 Kudos