I'm having a hard time figuring out the best way to remove all of the layers in my map except two (my base map and feature layer). User selects from the feature layer and the results are populated in a datagrid. User can then use a checkbox to add multiple rasters and can turn them off. However, if they don't turn them off and then clear the datagrid the rasters are still there. There might be one, there might be many. What's the best way to query all layers, and then remove all the rasters?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>UW Libraries Aerial Photo Finder</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/TundraGrid.css"> <link rel="stylesheet" type="text/css" href="css/aerials.css" /> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"> </script> <script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.CheckBox"); dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.tasks.query"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("esri.dijit.Popup"); var map, toolbar; var aerialsLayer; var layerList = []; function init() { //function init sets up the map with initial extent set to the Washington state borders adds the toolbar for the selection tool var initialExtent = new esri.geometry.Extent({ "xmin": -13888062, "ymin": 5779365, "xmax": -12794704, "ymax": 6237988, "spatialReference": { "wkid": 102100 } }); map = new esri.Map("map", { extent: initialExtent }); dojo.connect(map, 'onLoad', function (map) { //initialize the toolbar toolBar = new esri.toolbars.Draw(map); dojo.connect(toolBar, "onDrawEnd", onDrawEnd); //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"; var featureLayerUrl = "http://wagda.lib.washington.edu/rest/services/WAGDA_Aerials/MapServer/0"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); var content = "<b>Project Name</b>: ${prjname}" + "<br><b>Title</b>: ${title}" + "<br><b>Author</b>: ${author}"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); //the infoTemplate sets up the pop up box aerialsLayer = new esri.layers.FeatureLayer(featureLayerUrl, { mode: esri.layers.FeatureLayer.MODE_SELECTION, infoTemplate: infoTemplate, outFields: ["title", "prjname", "author", "objectid_1", "pdf", "indexmap", "scale", "date_", "color", "subject", "note_", "desc_", "rasterurl"] }); aerialsLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([160, 214, 238, 0.25]))); map.addLayer(basemap); map.addLayer(aerialsLayer); } function onDrawEnd(extent) { //function onDrawEnd sets up the selection tool and sends results to datagrid toolBar.deactivate(); //select features within the draw extent var query = new esri.tasks.Query(); query.geometry = extent; aerialsLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (features, selectionMethod) { //adds selected features to the grid var items = dojo.map(features, function (feature) { return feature.attributes; }); var data = { identifier: "objectid_1", items: items }; var store = new dojo.data.ItemFileReadStore({ data: data }); grid.setStore(store); grid.setSortIndex(3); }); } function clearGrid() { //function clearGrid clears the datagrid and the aerialsLayer features var emptyCells = { items: "" }; var emptyStore = new dojo.data.ItemFileReadStore({ data: emptyCells }); grid.setStore(emptyStore); removeLayer(); } function makeRasterButton(rid) { //datagrid formatter for raster button var rasterButtonCheckboxHandler = function () { if (rBtn.checked === true) { addRaster(rid); } else { removeRaster(rid); } }; var rBtn = new dijit.form.CheckBox({ name: "checkBox", value: "On", checked: false, onClick: rasterButtonCheckboxHandler }); return rBtn; } function addRaster(rid) { //adds raster to map var params = new esri.layers.ImageServiceParameters(); params.noData = 0; var rasterUrl = rid; var raster = new esri.layers.ArcGISImageServiceLayer(rasterUrl, { id: rid, imageServiceParameters: params, "opacity": .70 }) //alert(rid); map.addLayer(raster); layerList.push({ layer:rid }); alert(layerList[0]); } function removeRaster(rid) { //removes raster from map var rasterLayer = map.getLayer(rid); map.removeLayer(rasterLayer); } //show map on load dojo.addOnLoad(init); </script> </head> <body class="tundra"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" region="top">UW Libraries Aerial Photography</div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div> <div dojotype="dijit.layout.ContentPane" id="leftPane" style="width:140px;height:100%" region="left" splitter="false"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="toolPane" title="Tools" selected="true"> <div id="toolDiv"></div>To select features by drawing a rectangle, click select and draw a box on the map. To clear selection, click Clear.</br> <button dojoType="dijit.form.Button" onClick="toolBar.activate(esri.toolbars.Draw.EXTENT);">Select</button> <button dojoType="dijit.form.Button" onClick="toolBar.deactivate();aerialsLayer.clearSelection();clearGrid();">Clear</button> </br>To select features by using a text search, enter the text in the box.</div> <div dojoType="dijit.layout.ContentPane" title="About">Description <div id="about" style="padding: 2px 2px;"></div> </div> </div> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" style="height:150px"> <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" style="width:100%;height:100%;" selectionMode="none"> <thead> <tr> <th field="rasterurl" formatter="makeRasterButton" width="50px">On/Off</th> <th field="title" width="75px">Title</th> </tr> </thead> </table> </div> </div> </body> </html>
