topic Re: Layer control (TOC): Hide or Show layers and/or group layers in ArcGIS JavaScript Maps SDK Questions

Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Thu, 02 Sep 2010 13:40:05 GMT

Hi.

I don't know how to handle my layer control with the right JS API statements to the REST API.

I've got a very simple mapservice (called grouped) with a group layer and two sublayers:

World (0) (Grouplayer)
`-> World Country (1) (Layer)
`-> World Timezone (2) (Layer)

The JS-API Samples with the layer control makes use of the ArcGISDynamicMapServiceLayer.setVisibleLayers() method to define the visible layers. The parameters for that method are the IDs of the layer.

That doesn't work for group-layers, like this layer "World" with the ID 0. If I write this command in the JS API:

layer.setVisibleLayers([0]);

I see all layers, even the unchecked layers 1 and 2. What happens, is that the REST interface gets an ExportMap request like this, when I only check the group layer 0 to active:

http://machine/ArcGIS/rest/services/grouped/MapServer/export?layers=show:0&...

The result is that all layers are shown: World Country and World Timezone, although they are not in the list of the visible layers!

The logic of checking and unchecking grouplayers works, if I use the HIDE method in the REST API. Hiding layer 0 (the grouplayer) returns an empty map. All combinations work with the HIDE option.

Question: How can I use the HIDE logic with the JS API? Where is the ArcGISDynamicMapServiceLayer.setHiddenLayers() method? 😉 How can I make a layerlist control with grouplayers?

Can I set the esri.layers.ImageParameters() at runtime after initialization? The ImageParameters have the layerOptions LAYER_OPTION_HIDE. But they are read out and used at initialization.

How can I achive the logic with the grouplayers?

Thanks in advance,
Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Fri, 03 Sep 2010 06:32:03 GMT

edit: my reply was not a solution. Topic still open.

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Sat, 11 Dec 2021 19:29:50 GMT

The solution is: Ignore the group-layers in the updateLayerVisibility() method. Put only the array of the layers (the ones with data) in it.

The whole design of a TOC needs to reflect that. I've used now the "Dijit Tree with Multi State Checkboxes" from http://www.thejekels.com/. The Multi State Checkboxes are important because it brings this updateLayerVisibility() logic up to the interface. Something similar is done by Mansour Raad at http://thunderheadxpler.blogspot.com/2010/07/merging-table-of-content-and-legend.html but with additional legend information pictures. He also uses Multi-state Checkboxes.

However, if you use the Multi State Checkboxes, the whole group-layer logic behaves different than in ArcMap and that's mandatory. The group-layer doesn't have any information about what happens at the sublevel. It show only that something at the sublevel is checked but in fact you don't need the group-layer anymore for the request. If you click it, either all sublevels are checked or none. Otherwise if only some sublevels are checked, the grouplayer gets the "intermediate" state. So the group-layer is only for "design" not for real "functionality".

To fill my Multi-State Checkbox Tree I have to use an external configuration file, that translates the MapService REST-JSON to a hierachical JSON. With that hierachy it is easy to fill the DOJO-store, define the DOJO-model and to fill the Tree. A sample configuration file looks like this:

grouped.json:

{
identifier : 'name',
  label : 'name',
  items : [
      {
          name : 'World',
          type : 'grouplayer',
          id: 0,
          visible: true,
          children : [
              {name : 'World Country', type : 'layer', id: 1, visible: true},
              {name : 'World Timezone', type : 'layer', id: 2, visible: true}
          ]
      }
  ]
}

It contains the layer information from the REST-endpoint of the mapservice (http://localhost/ArcGIS/rest/services/grouped/MapServer?f=pjson) but moves the sublayers in the hierachy of the appropriate grouplayer. I have to put the following attributes to a layer: name, type (grouplayer or layer), id (for the ExportMap request) and visible (initially checked or not). The children list the sublayers, which recursively can be grouplayers.

Unfortunetaly this configuration file has to be written by hand, right now. But it should be possible to write a translator later. The current REST endpoint of a MapService cannot be used right now, because it lists the layers plain and the hierachy is only placed in the "parentLayerId" and "subLayerIds" attributes of a layer. (Assumed that the IDs of the layers are one after another (they are) it should be possible to parse the REST endpoint dynamically and to build the TOC directly with this plain structure and to get rid of the configuration file. But maybe you have to parse it two times to get the TOC. Remember the compilation of the table-of-contents in LaTeX? You had to do it two times. ;)).

Anyway. Here's the code for the store, model, tree, the fetch (query) after a click on a tree-branch, the fetchCompleted method and the HTML page.

Store:

store = new dojo.data.ItemFileWriteStore({
 url: "./datastore/grouped.json"
});

Model:

model = new tmpdir.CheckBoxStoreModel({
 store: store,
 query: {
  type: 'grouplayer'
 },
 rootLabel: 'Service',
 checkboxAll: true,
 checkboxRoot: false,
 checkboxState: true,
 checkboxStrict: true,
 checkboxIdent: "visible"
});

Tree:

var tree = new tmpdir.CheckBoxTree({
 model: model,
 id: "MenuTree"
},
"CheckboxTree");

Fetch:

store.fetch({
 query: {
  visible: true,
  type: "layer"
 },
 queryOptions: {
  deep: true
 },
 onBegin: fetchPrepare,
 onComplete: fetchCompleted,
 onError: fetchFailed
});

FetchCompleted:

function fetchCompleted(items, request) {
 visibleLayers = [];
 var i;
 for (i = 0; i < items.length; i++) {
  var item = items;
  visibleLayers.push(store.getValue(item, "id"));
 }
 mapServiceLayer.setVisibleLayers(visibleLayers);
}

HTML:

<div id="map" style="width: 600px; height: 400px; border: 1px solid #000;">
</div>
<div id="CheckboxTree">
</div>

Hope that helps for similar questions. Discussion and additional information is welcome!

Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

SusanMcclendon — Fri, 01 Apr 2011 16:03:43 GMT

Axel,

I'm trying to get group layers to work in a TOC and have tried to implement your suggestions. I'm fairly new to dojo, but did manage to get the multistate checkboxes example to work from the jeckels and can create my layer list successfully.

What I can't seem to wrap my head around is how to hook the onCheckboxChange function to the fetchcomplete to update my layer visibility in the map. Nor do I fully understand where to include your store.fetch method?

If you have a complete working example using the javascript API, could you share?

Thanks,

Susan

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Sat, 09 Apr 2011 17:19:13 GMT

You can see an example here: http://mohadiax.de/gis/JS_TreeClient_ArcGIS/.

See the source-code of the page to know you to do it.

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Thu, 21 Apr 2011 12:07:27 GMT

I've provided a sample in the Resource Center.

http://www.arcgis.com/home/item.html?id=98d9e760d6d1496487ca583b0e8ce73c

Best regards,
Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

SusanMcclendon — Fri, 22 Apr 2011 19:07:35 GMT

Thanks Axxl~! I did finally get it working, but your example helps me greatly. I'm now working on trying to integrate the legend into the functionality of the TOC using the JSON file for the swath.

Susan

Re: Layer control (TOC): Hide or Show layers and/or group layers

AndrewBrown1 — Tue, 14 Jun 2011 17:39:18 GMT

Axel,

Thank you for your excellent TOC example!

But I have one question: How should I deal with the FeatureLayers? If I create a couple featurelayers to select/query against, how would I control their visibility?

Currently, the featurelayer is always turned on, yet the TOC control doesn't control it as it is separate. Even though that layer is turned off in the TOC, it is still visible because that layer is also a featurelayer.

Any advise regarding the handling of the featurelayers? Should I keep the visibility turned off?

I apologize for my ignorance; i'm still fairly new at this.

Thanks,
Andrew

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Wed, 15 Jun 2011 06:31:38 GMT

But I have one question: How should I deal with the FeatureLayers? If I create a couple featurelayers to select/query against, how would I control their visibility?

Thanks for your comment, Andrew. I guess you have to deal FeatureLayers in a special way. The feature layers don't has to show anything at startup, depending on your selection mode (MODE_ONDEMAND, MODE_SELECTION, MODE_SNAPSHOT). And since it's a 'subclass' of a layer you can 'switch it off' with "myfaeturelayer.hide();"

So in most cases it depends: if you select your features, how you select them (spatial or by attributes). You can show the results of your query in a table and use that for accessing your features. So you don't need it in a TOC as a layer.

My 2 cents. 😉

Best regards,
Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

AndrewBrown1 — Wed, 15 Jun 2011 17:19:51 GMT

Hi Axel,

Thanks again for your input. You have really helped me thus far.

I understand why we wouldn't have to show the feature layer, but I'm actually selecting features by using a freehand tool, so the layer needs to be turned on in order for the selection to work. I'm currently using MODE_ONDEMAND to perform the select.

So, my problem is when I turn off the layer in the TOC, the layer is still turned on the feature layer). How do I control the feature layer in the TOC? Is it possible? I know the layer in the TOC is part of the basemap, as I created it in the grouped.json file.

In total, I'll probably have around 6 or so feature layers, so this is an important part of my application. The user needs to have the ability to turn the feature layers on and off, and be able to select the feature layers if they are turned on.

Thanks again,
Andrew

Re: Layer control (TOC): Hide or Show layers and/or group layers

mikesmith5 — Thu, 16 Jun 2011 17:13:09 GMT

We have implemented the TOC layer control and are currently saving the state of the visible layers to a database. We then retrieve the visible layers if a user presses a load button and update the map based on their saved view.

We are using a dynamicmapservice and we pass the array to the setVisibleLayers of the service after the load. This updates the map correctly, however, all of the checkboxes in the TOC remain checked. Is there a preferred way of updating the TOC checkboxes?

Re: Layer control (TOC): Hide or Show layers and/or group layers

JeffPace — Thu, 16 Jun 2011 17:17:26 GMT

We went about this slightly differently, showing layers based on scale dependencies, sort of like the old toclayer function in ArcIMS.

Our Site

It is a pretty customized version of the JavaScript sample viewer.

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Mon, 11 Jul 2011 12:11:04 GMT

Hi Axel,

Thanks again for your input. You have really helped me thus far.

I understand why we wouldn't have to show the feature layer, but I'm actually selecting features by using a freehand tool, so the layer needs to be turned on in order for the selection to work. I'm currently using MODE_ONDEMAND to perform the select.

So, my problem is when I turn off the layer in the TOC, the layer is still turned on the feature layer). How do I control the feature layer in the TOC? Is it possible? I know the layer in the TOC is part of the basemap, as I created it in the grouped.json file.

In total, I'll probably have around 6 or so feature layers, so this is an important part of my application. The user needs to have the ability to turn the feature layers on and off, and be able to select the feature layers if they are turned on.

Thanks again,
Andrew

Hi Andrew,

sorry for the delay. I guess, you have to build the logic yourself. If the layer isn't visible you have to turn off the featurelayer. I haven't worked on an app like this, so far. So I don't know how to deal with feature-layers and how to "switch them off".

I guess you may implement 2 ways: The hook of the freehand selection has to ask if the layer is visible. Otherwise it won't select. The second logic is in the tree. If the layer-id of your featurelayer isn't visible, you are not able to select it. Depends on the way of your implementation.

On the other hand you have not to show the FeatureLayers on the map, if they are visible with the map-service calls. You don't have to show the symbols. You only need the results of your selection on the map (for example the blue/green highlight).

Depending on your workflow and application. Several ways to implement, but you have to implement the communication between the map-service layers and your feature-layers.

Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Mon, 11 Jul 2011 12:20:04 GMT

We have implemented the TOC layer control and are currently saving the state of the visible layers to a database. We then retrieve the visible layers if a user presses a load button and update the map based on their saved view.

We are using a dynamicmapservice and we pass the array to the setVisibleLayers of the service after the load. This updates the map correctly, however, all of the checkboxes in the TOC remain checked. Is there a preferred way of updating the TOC checkboxes?

I don't know the preferred way of updating the checkboxes from outisde. Currently it works as the main control. Please check the documentation of the Widget: http://www.thejekels.com/ if it's possible. Since it's based on a DOJO tree, that API might also help. I guess there should be a way for doing this, but I haven't done it yet. 😞

Axel

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Tue, 09 Aug 2011 08:56:54 GMT

Just for information, since the discussion is always coming up and people may end up in this thread.

Another nice example of a TOC is here: http://www.arcgis.com/home/item.html?id=9c43bdf76a23452ba1d95684f7cd76d8 by nliu. It integrates the legend directly under the layer-control, works also with group-layers (although I don't know if you can switch them seperately), has a transparency control, a scale dependecy and other nice things.

Re: Layer control (TOC): Hide or Show layers and/or group layers

AndrewBrown1 — Tue, 09 Aug 2011 14:20:51 GMT

Thanks, this is really great! I already incorporated it into our site... now I'm going to try and modify it a little bit to include group layer control.

Thanks again

Re: Layer control (TOC): Hide or Show layers and/or group layers

jamiehollingsworth — Fri, 18 May 2012 21:51:50 GMT

very helpful thanks for posting

http://ltergis.iab.uaf.edu/nsn.html

Re: Layer control (TOC): Hide or Show layers and/or group layers

Reynaldde_Castro — Thu, 24 May 2012 21:15:04 GMT

How would I be able to keep track which layers have been checked from the TOC? This would be handy to pass this to the identify parameter.

Re: Layer control (TOC): Hide or Show layers and/or group layers

BarryGuidry — Sat, 11 Dec 2021 19:29:53 GMT

axxl,

I changed the path in the variable worldgroupedUrl to point to my map service, which displays correctly (in addition to changing the map extent of course).

I have also changed the layers in the 'worldgrouped.json' file (below; mine has no groups though only layers). Does this look correct? I cannot figure out how to change the 'WorldGrouped' title in the TOC (tried changing it in the html file), nor does it display my layer in the TOC.

Please help.

{
 identifier: 'name',
 label: 'name',
 items:
 [
  {
   name : 'Gates',
   type : 'layer',
   id: 0,
   visible: true,
   children:
  },
  {
   name : 'Fences',
   type : 'layer',
   id: 1,
   visible: true
  },
  {
   name : 'Railways',
   type : 'layer',
   id: 2,
   visible: true
  },
  {
   name : 'Primary Roads',
   type : 'layer',
   id: 3,
   visible: true
  },
  {
   name : 'Roads - Other',
   type : 'layer',
   id: 4,
   visible: true
  },
  {
   name : 'SWMUs',
   type : 'layer',
   id: 5,
   visible: true
  },
  {
   name : 'SWMU Extents',
   type : 'layer',
   id: 6,
   visible: true
  },
  {
   name : 'Lakes',
   type : 'layer',
   id: 7,
   visible: true
  },
  {
   name : 'Buildings/Structures',
   type : 'layer',
   id: 8,
   visible: true
  },
  {
   name : 'Berms',
   type : 'layer',
   id: 9,
   visible: true
  },
  {
   name : 'Property Boundary',
   type : 'layer',
   id: 10,
   visible: true
  }
 ]
}

Re: Layer control (TOC): Hide or Show layers and/or group layers

AxelSchaefer — Sat, 11 Dec 2021 19:29:56 GMT

Woo, it's been a long time... Check out also the nice example with legend symbols by nliu at: https://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109 if you like.

The "WorldGrouped" label is part of the model. The rootLabel attribute. Consider my example also as a nice way dealing with stores, models and views.

    worldgroupedModel = new tmpdir.CheckBoxStoreModel({
[...]
        rootLabel: 'Your text here...',
[...]
    });

Also your JSON has a children attribute at the "Gates" layer. Delete that line and the comma behind the last attribute.

Axel