nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

TOC - Collapsed all layers

RichardMoussopo

is there a way to have all layers collapsed in TOC on first load?

I tried

toc = new TOC({

map: map,

layerInfos: [{

layer: layer,

title: "Title",

collapsed: true .... Nothing,

I also tried republishing the service by having all layers collapsed but the widget did not cary that behavior.

Find more posts tagged with

Accepted answers

All comments

adrian.marsden_DevonCC

See Liu's post here

Re: Collapse all layers at start in agsjs.dijit.TOC

You need to add another property, autotoggle

My code is now.

layer: dynamicMapServiceLayer,
                        slider: true,
                        style: "inline",
                        title: "MyLayers",
                        collapsed: true,
                        autoToggle:false

And works fine - without autoToggle it doesn't.

LuciHawkins

I set my legend behavior for each layer when I push it to the array. ie:

legendLayers.push({
  layer : parcelsLayer,
  title: 'Parcels',
  noLegend: false,
  collapsed: true,
  autoToggle: false
});

I am also using the agsjs TOC widget. Hope this helps!

Luci

kenbuja

Which layers do you want to be visible when the application opens? If a layer is visible, then its group will be expanded. For example, Water is expanded is because Main is visible.

RichardMoussopo

Thank you Ken for your reply.

I am really having a hard time with this legend. here is the desired output I want,

and at the moment it displaying as image below which is way too long: I am not sure may be I am using your script wrong?

ChrisSergent

I think I might like to modify it if I could get mine to work. I tried NLiu's example but I was having problems when I tried it. Any ideas? I posted the question here: Why won't my Table on Contents Widget Work?

kenbuja

I started with the instructions from the NLiu's page, but have added more complexity. For example, my code removes layers a service in the TOC that I don't need (see this post). In another application, the TOC only allows one layer in a service to be turned on at a time (see this post).

ChrisSergent

I can create a new thread if you like, but how did you create a table of contents?

kenbuja

In my app, I wanted the first layer (layerDynamic) to remain expanded by all other layers to be collapsed. The rest of the layers were a mix of dynamic and tiled services from a variety of sources where I had no control over which layers were initially visible. When each layer was added (using map.addLayer), this listener would set its visible layers to -1 and set its visibility to false. Since changing the basemap also fires this event, I had to check for that. In addition to checking if the layer wasn't layerDynamic, I also had to make sure it wasn't a Graphics Layer (layerResultsGraphic) that was added.

        map.on("layer-add-result", function (addedLayer) {
            if (initializing) {
                if (array.indexOf(map.basemapLayerIds, addedLayer.layer.id) === -1) { //this checks if the layer is a basemap
                    if (addedLayer.layer !== layerDynamic && addedLayer.layer !== layerResultsGraphic) {
                        addedLayer.layer.setVisibility(false);
                        if (addedLayer.layer.declaredClass !== "esri.layers.ArcGISTiledMapServiceLayer") { addedLayer.layer.setVisibleLayers([-1]); }
                    }
                }
            }
        });

This is how the TOC looks when it opens.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.