I (finally) see!OK, here's one way:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Toggle Test</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<style>
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
font-size:small;
}
</style>
</head>
<body class="claro">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
var map;
function init() {
var extent = new esri.geometry.Extent({
"xmin": -90.6063,
"ymin": 38.3106,
"xmax": -88.4764,
"ymax": 38.3689,
"spatialReference": { "wkid": 4269 }
});
map = new esri.Map("mapDiv",
{
extent: esri.geometry.geographicToWebMercator(extent)
}
);
dojo.connect(window, "resize", map, map.resize);
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
//Roads
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/77",
{
id:"road1",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/78",
{
id: "road2",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/74",
{
id: "road3",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/75",
{
id: "road4",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/71",
{
id: "road5",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/72",
{
id: "road6",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
//Rivers & Lakes
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/95",
{
id: "river1",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/96",
{
id: "river2",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/97",
{
id: "river3",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/98",
{
id: "river4",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
map.addLayer(new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/99",
{
id: "river5",
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
}
));
checkLayerState();
}
//Will set the visibility of each layer to the opposite of its current state i.e. toggle
function layerToggle(/*Array of strings*/layerIds) {
//Could use dojo.forEach here if you prefer
for (var i = 0; i < layerIds.length; i++) {
var layer = map.getLayer(layerIds);
if (layer) {
//Set the layer's visibility to NOT its current visibility
layer.setVisibility(!layer.visible);
}
}
checkLayerState();
}
function checkLayerState() {
var div = document.getElementById("layerstate");
var s = "<p>Non-Graphics Layers:";
for (var i = 0; i < map.layerIds.length; i++) {
var layer = map.getLayer(map.layerIds);
s += "<br />" + layer.id + " : " + (layer.visible?"on":"off");
}
s += "</p><p>Graphics Layers:";
for (var i = 0; i < map.graphicsLayerIds.length; i++) {
var layer = map.getLayer(map.graphicsLayerIds);
s += "<br />" + layer.id + " : " + (layer.visible ? "on" : "off");
}
div.innerHTML = "</p>" + s;
}
dojo.ready(init);
</script>
<div id="mapDiv" style="height:100%;width:100%;"></div>
<div style="position:absolute;bottom:10px;left:10px;background-color:#000;color:#fff;">
<input type="checkbox" checked="checked" onclick="layerToggle(['road1', 'road2', 'road3', 'road4', 'road5', 'road6']);" />Toggle All Roads<br />
<input type="checkbox" checked="checked" onclick="layerToggle(['river1', 'river2', 'river3', 'river4', 'river5']);" />Toggle All Rivers<br />
</div>
<div id="layerstate" style="position:absolute;top:10px;right:10px;background-color:#000;color:#fff;"></div>
</body>
</html>
It's a bit rough and horribly hard-coded...but then it's only a (knocked-up in 5 mins) sample and hopefully the approach is clearly demonstrated 🙂P.S. Did you see the PM I sent you?