Deleting Features using a delete button for multiple feature layers

IanPeebles · ‎10-01-2013

I have a simple application set up where the user must use a button to activate delete features. If the button is checked, the user can left click on the feature and delete. If the button is unchecked, the user cannot delete features using the left mouse click. The problem is, that I have multiple feature layers within the application and I want to be able to delete features from each feature layer. Currently, I can only delete from one feature layer.

How can I delete features from each feature layer using the same button?

Here is my current application code:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Delete Feature</title>  <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.5/jsapi/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.5/jsapi/esri/css/esri.css">     <style>       html, body {         height: 100%;         width: 100%;         margin: 0;          padding: 0;         overflow:hidden;       }       #map{         padding:0px;         border:solid 2px #1A84AD;         -moz-border-radius: 4px;         border-radius: 4px;       }       #rightPane{         border:none;         width:300px;     </style>      <script>var dojoConfig = { parseOnLoad:true };</script>     <script src="http://localhost/arcgis_js_api/library/3.5/jsapi/init.js"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");    dojo.require("dijit.Menu");    dojo.require("dijit.form.Button");       dojo.require("esri.dijit.editing.TemplatePicker-all");       dojo.require("esri.dijit.editing.editOperation");     //VARIABLES       var map;       //var undoManager;        // FUNCTION INITIALIZE       function init() {         //specify the number of undo operations allowed using the maxOperations parameter         //undoManager = new esri.UndoManager({ maxOperations: 10 });                     // PROXY PAGE CONFIGURATION         esri.config.defaults.io.proxyUrl = "http://localhost/Proxy/proxy.ashx";    // MAP EXTENT DEFINITION   var initialExtent = new esri.geometry.Extent({xmin: 2089355.926669004,ymin: 212687.42173663445,xmax: 2198005.6105589992,ymax: 303894.02712456253,"spatialReference": {"wkid": 2267}   });      // MAP   map = new esri.Map("map", {    extent: initialExtent         });      //CONNECT MAP WITH DELETE FEATURE EDITING FUNCTIONALITY         dojo.connect(map, "onLayersAddResult", EditingDeleteFeature);            // FEATURE LAYERS FOR EDITING   var publictreeinventory = new esri.layers.FeatureLayer("http://localhost/arcgis/rest/services/UrbanForestry/PublicTreeInventorySDE02/FeatureServer/0",{     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,      outFields: ['*']    });      var emergencymanagement = new esri.layers.FeatureLayer("http://localhost/arcgis/rest/services/EmergencyManagement/EmergencyManagementSDE02/FeatureServer/0",{     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,      outFields: ['*']    });      var plantingsites = new esri.layers.FeatureLayer("http://localhost/arcgis/rest/services/UrbanForestry/PublicTreeInventorySDE02/FeatureServer/1",{    //id: plantingsitesID,    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,      outFields: ['*']    });          map.addLayers([publictreeinventory, emergencymanagement, plantingsites]);       }           // DELETE TOOL   function EditingDeleteFeature(results) {    var deleteFeatureslLayer = results[0].layer;    var layers = dojo.map(results, function(result) {    return result.layer;         });       // Ctrl+click to delete features and add this delete operation to undomanager    dojo.connect(deleteFeatureslLayer, "onClick", function(evt) {    dojo.stopEvent(evt);      // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)    if (dijit.byId("tool_delete").checked) {       deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function() {      operation = new esri.dijit.editing.Delete({       featureLayer: deleteFeatureslLayer,       deletedGraphics: [evt.graphic]       });          });     }    });   }          dojo.ready(init);     </script>   </head>   <body class="claro">     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:true, design:'sidebar'" style="width:100%;height:100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>       <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">    <div id="tool_delete" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="checked:false, iconClass:'dijitCheckBoxIcon'">Delete</div>         <div class='instructions'>           <ul style="list-style:none;padding-left:4px;">             <li><b>To delete feature:</b>    <br>    Click on the Delete button to check and activate delete features.  Left mouse click on feature to delete.  Uncheck Delete button when finished.</li>           </ul>         </div>       </div>     </div>   </body> </html>

IanPeebles · ‎10-01-2013

I think I figured out the problem. As it turns out, I had a ) missing in the code block. I can now delete from two feature layers. Here is the updated code block:

// DELETE TOOL function EditingDeleteFeature(results) {     var layers = dojo.map(results, function (result) {         return result.layer;     });      // Ctrl+click to delete features and add this delete operation to undomanager     dojo.forEach(layers, function (deleteFeatureslLayer) {   dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {         dojo.stopEvent(evt);          // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]      });     });    }   });  }); }

zj_zou, Thanks for your assistance.

View solution in original post

JasonZou · ‎10-01-2013

Try to change:

// DELETE TOOL
function EditingDeleteFeature(results) {
 var deleteFeatureslLayer = results[0].layer;
 var layers = dojo.map(results, function (result) {
  return result.layer;
 });

 // Ctrl+click to delete features and add this delete operation to undomanager
 dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
  dojo.stopEvent(evt);

  // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
  if (dijit.byId("tool_delete").checked) {
   deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
       operation = new esri.dijit.editing.Delete({
                            featureLayer: deleteFeatureslLayer,
                            deletedGraphics: [evt.graphic]
     });
   });
  }
 });
}

To:

// DELETE TOOL
function EditingDeleteFeature(results) {
    var layers = dojo.map(results, function (result) {
        return result.layer;
    });

    // Ctrl+click to delete features and add this delete operation to undomanager
    dojo.forEach(layers, function (deleteFeatureslLayer) {
 dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
        dojo.stopEvent(evt);

        // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
        if (dijit.byId("tool_delete").checked) {
            deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
              operation = new esri.dijit.editing.Delete({
                    featureLayer: deleteFeatureslLayer,
                    deletedGraphics: [evt.graphic]
  });
            });
 }
    });
};

}

IanPeebles · ‎10-01-2013

Try to change:

// DELETE TOOL
function EditingDeleteFeature(results) {
 var deleteFeatureslLayer = results[0].layer;
 var layers = dojo.map(results, function (result) {
  return result.layer;
 });

 // Ctrl+click to delete features and add this delete operation to undomanager
 dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
  dojo.stopEvent(evt);

  // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
  if (dijit.byId("tool_delete").checked) {
   deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
       operation = new esri.dijit.editing.Delete({
                            featureLayer: deleteFeatureslLayer,
                            deletedGraphics: [evt.graphic]
     });
   });
  }
 });
}

To:

// DELETE TOOL
function EditingDeleteFeature(results) {
    var layers = dojo.map(results, function (result) {
        return result.layer;
    });

    // Ctrl+click to delete features and add this delete operation to undomanager
    dojo.forEach(layers, function (deleteFeatureslLayer) {
 dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
        dojo.stopEvent(evt);

        // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
        if (dijit.byId("tool_delete").checked) {
            deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
              operation = new esri.dijit.editing.Delete({
                    featureLayer: deleteFeatureslLayer,
                    deletedGraphics: [evt.graphic]
  });
            });
 }
    });
};

}

Tried to incorporate your code changes, but I found that the following lines break the application (see bold code):

// DELETE TOOL
function EditingDeleteFeature(results) {
    var layers = dojo.map(results, function (result) {
        return result.layer;
    });

    // Ctrl+click to delete features and add this delete operation to undomanager
    dojo.forEach(layers, function (deleteFeatureslLayer) {
 dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
        dojo.stopEvent(evt);

        // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
        if (dijit.byId("tool_delete").checked) {
            deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
              operation = new esri.dijit.editing.Delete({
                    featureLayer: deleteFeatureslLayer,
                    deletedGraphics: [evt.graphic]
  });
            });
 }
    });
};

Here is an updated code block. I have commented out the dojo.forEach line. and the replaced the }; with a regular }. The functionality is still broken. Here is the code I am working with:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>UndoManager</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 0;
        overflow:hidden;
      }
      .instructions{
        padding-top:20px;
        font-size:12px;
      }
      .undoButtons{
        width:60%;
        margin-left:auto;
        margin-right:auto;
        padding-top:4px;
      }
      #map{
        padding:0px;
        border:solid 2px #1A84AD;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      #rightPane{
        border:none;
        width:300px;
      }
      .templatePicker {
        border:solid 2px #1A84AD !important;
      }
      .undoIcon { background-image:url(images/undo.png); width:16px; height:16px; }
      .redoIcon { background-image:url(images/redo.png); width:16px; height:16px;}
    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.TemplatePicker-all");
      dojo.require("esri.dijit.AttributeInspector-all");
      dojo.require("esri.dijit.editing.editOperation");

      var map;


      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
        //for details on setting up a proxy page.

        esri.config.defaults.io.proxyUrl = "/proxy";
        esri.config.defaults.io.alwaysUseProxy = false;

        map = new esri.Map("map", {
          basemap: "topo",
          center: [-97.367, 37.691],
          zoom: 14
        });

        dojo.connect(map, "onLayersAddResult", initEditing);
        
        var landuseLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
  
  var militaryareas = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });

        map.addLayers([landuseLayer, militaryareas]);
        
      }

  function initEditing(results) {
   var layers = dojo.map(results, function (result) {
   return result.layer;
  });

  // Ctrl+click to delete features and add this delete operation to undomanager
  //dojo.forEach(layers, function (deleteFeatureslLayer) {
   dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {
   dojo.stopEvent(evt);
   

        // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)
        if (dijit.byId("tool_delete").checked) {
            deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {
              operation = new esri.dijit.editing.Delete({
                    featureLayer: deleteFeatureslLayer,
                    deletedGraphics: [evt.graphic]
     });
    });
   }
        });
 }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:true, design:'sidebar'" style="width:100%;height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
        <div id="templatePickerDiv"></div>
        <div class="undoButtons">
         <button id="undo"  data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'undoIcon'" >Undo</button>
         <button id="redo"  data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'redoIcon'" >Redo</button>
   <div id="tool_delete" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="checked:false, iconClass:'dijitCheckBoxIcon'">Delete</div>
        </div>
        <div class='instructions'>
          <ul style="list-style:none;padding-left:4px;">
            <li><b>Create Features:</b> Select template then click on map.</li>
            <li><b>Delete Features:</b> Ctrl or Cmd + Click feature.</li>
          </ul>
          The undo/redo buttons will become enabled after editing the feature attributes or geometry.
        </div>
      </div>
    </div>
  </body>
</html>

IanPeebles · ‎10-01-2013

I think I figured out the problem. As it turns out, I had a ) missing in the code block. I can now delete from two feature layers. Here is the updated code block:

// DELETE TOOL function EditingDeleteFeature(results) {     var layers = dojo.map(results, function (result) {         return result.layer;     });      // Ctrl+click to delete features and add this delete operation to undomanager     dojo.forEach(layers, function (deleteFeatureslLayer) {   dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {         dojo.stopEvent(evt);          // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]      });     });    }   });  }); }

zj_zou, Thanks for your assistance.