ArcGIS Server JS API - Table of Contents (TOC) Example
Using ESRI's Dynamically create layer list example, we created a simple, easy to use table of contents for the Javascript API. The toc allows users to zoom the extent of a service, expand or collapse layers, and of course turn layers on and off.
Check it out and view the source to see the code in action: ROK ArcGIS Server Table Of Contents Example
How it works: A function named "addToTOC" takes in two parameters. Layers is the actual layer being added to the map, and listLayers is a Boolean value that will either list the layers in the service or just at the layer at the root of the TOC.
The function checks to make sure the layer has been loaded to the map. If it has not been loaded, it adds an "onLoad" listener to the layer.
After confirming the layer has been added to the map, the layer is passed to one of two functions depending on the value of the listLayers parameter.
BuildLayerList:
Adds the layer to the root of the TOC and lists the sublayers in that service. These layers can then be turned on or off. The method is good for multilayer caches or dynamic services.
BuildLayerListRoot:
Only adds the layer to the root of the TOC. This method is good for layers hosted by ESRI and fused cache layers.
There are three functions that interact w/ the table of contents once it has been created:
ZoomToLayer:
Zooms to the full extent of the service
ToogleService:
Turns a service on or off
UpdateLayerVisibility:
Turns layer in a service on or off
Extra - Transparency Slider:
Finally, we have also added a transparency slider that works with the layers added to the map. As you switch layers from the pulldown list, the slider value is updated to the current opacity of the layer. This is pretty neat.
AddToTransparencyList:
Alphabetically adds the layer to the transparency pull down list
UpdateTransparencyLayer:
Updates the global variable that stores the transparency layer id and sets the slider to the opacity of the layer
ChangeTransparency:
Updates the opacity of the layer
We have found these functions to be quite useful, so we thought we would share these with the rest of the community. We hope you find them as useful as we do. If you have any trouble with them, post in the comments.Enjoy.
Follow Us On Twitter
Thanks.
and also my web page is .XQY (server side) that generates the html that embeds the arcgis javascript api map and its corresponding logic so it's logic is one level removed from the actual html page... Just a tad more diffucult to accomplish
You can move the following div tag to any location on your webpage. You can also remove/add the custom styling within the div tag.
<div id="toc" style="width:90%; filter:alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9; background-color: white; overflow:auto; max-height:400px;" align="left"></div>
The div tag is updated by the following javascript in two functions:
dojo.byId("toc").innerHTML = tocHTML;
Hope this helps,
-Trent
When I simply replace the example map services from the index.htm file with my own the individual layers (sub layers) in the map services will not turn off when unchecked in the TOC. My map services are published in wkid 2237. Zooming in close works fine.
I set the wkid to that of the sample map services (wkid 4326) and set the extent to the extent of my data and the individual layers(sub layers) in my inserted map services will then turn on and off okay when checked and unchecked in the TOC. However, now when zooming in close the data does not draw.
Does anyone know what I need to be doing so this will function properly with my data in my data’s projection?
Can you post your code?
Thanks,
-Trent
What I have done here is replace the map services in the map element of your code with my own map services (and set the projection and extent).
With the first startExtent active I get the scenario where the check boxes in the TOC do not function. With the second startExtent active I get the scenario where zooming in on my layers they no longer display.
_________________
var startExtent
function Init() {
map = new esri.Map("map");
var startExtent = new esri.geometry.Extent(-82.1, 26.3, -81.72, 26.8, new esri.SpatialReference({ wkid: 4326 }));
//var startExtent = new esri.geometry.Extent(552315, 715933, 1208628, 1288205, new esri.SpatialReference({ wkid: 2237 }));
map.setExtent(startExtent);
var Baselayers = new esri.layers.ArcGISDynamicMapServiceLayer("http://lcfgist05/ArcGIS/rest/services/BaseLayersNo...;, { id: "Base_Layers", visible: true });
Baselayers.setOpacity(0.5);
addToTOC(Baselayers, true);
map.addLayer(Baselayers);
var Reclaim = new esri.layers.ArcGISDynamicMapServiceLayer("http://lcfgist05/ArcGIS/rest/services/Util_Reclaim...;, { id: "Reclaimed_Water_Facilities", visible: true });
Reclaim.setOpacity(0.5);
addToTOC(Reclaim, true);
map.addLayer(Reclaim);
dijit.byId('control_panel').toggle();
//dojo.connect(layer,"onLoad",layerInit);
//zoomToLayer(layer.id);
}
earthquake = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/...;,
{id:"Earthquake", visible:true, mode:esri.layers.FeatureLayer.MODE_ONDEMAND, outFields:["region,magnitude,depth,objectid"], infoTemplate: infoTemplate, outFields: ["*"]});
map.addLayer(earthquake);
earthquake.setOpacity(0.5);
addToTOC(earthquake,true);
Thanks
Jay