Remove some layers - not all

AllisonAnderson · ‎08-13-2012

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>

AndreyLabodin · ‎08-14-2012

you mean something like this?

 function RemoveAllLayers() {             for (var j = 0; j < map.layerIds.length; j++) {                 var layer = map.getLayer(map.layerIds);                 if (layer.url.indexOf('basemap') == -1) {                     map.removeLayer(layer);                 }             }         }

this function is for removing all layers from the "map" except those which url parameter contains "basemap" word.
You could change this condition "if (layer.url.indexOf('basemap') == -1)" to something else.

View solution in original post

AndreyLabodin · ‎08-14-2012

you mean something like this?

 function RemoveAllLayers() {             for (var j = 0; j < map.layerIds.length; j++) {                 var layer = map.getLayer(map.layerIds);                 if (layer.url.indexOf('basemap') == -1) {                     map.removeLayer(layer);                 }             }         }

this function is for removing all layers from the "map" except those which url parameter contains "basemap" word.
You could change this condition "if (layer.url.indexOf('basemap') == -1)" to something else.

AllisonAnderson · ‎08-14-2012

Thanks! That got me most of the way with a little fiddling. I ended up with this

      function removeAllLayers() {
           
           var mapLayers = map.layerIds.length
           for (var j = mapLayers-1; j >=0; j--){

                var layer = map.getLayer(map.layerIds);
                                
                if (layer.id !== 'layer0') {map.removeLayer(layer);}
        } 
      }

I had to loop backwards because the for loop didn't seem to continue looping when it hit my basemap. It would leave one or two rasters in the map. Anyway, the reverse looping works and I'm happy.