topic Re: edits-complete event of feature layer is not firing after moving a feature in ArcGIS JavaScript Maps SDK Questions

edits-complete event of feature layer is not firing after moving a feature

AzizaParveen2 — Mon, 09 Feb 2015 19:05:53 GMT

ArcGIS JavaScript API issue, I am developing a web editing application and if I move any feature, edits-complete event of feature
layer does not fire, I need to run a function feature move/update completes. Is it a bug or I am missing something here, if you guys know any work around or having same issue please let me know.

Thanks

Aziza

Re: edits-complete event of feature layer is not firing after moving a feature

ReneRubalcava — Mon, 09 Feb 2015 19:13:55 GMT

Do you have some sample code to get a better idea of what's happening?

Are you using the Edit Toolbar?

The edits-complete method is only emitted from a FeatureLayer after you use the applyEdits method.

Re: edits-complete event of feature layer is not firing after moving a feature

JakeSkinner — Sat, 11 Dec 2021 23:29:07 GMT

Hi Aziza,

This should work. Below is a modified sample that writes the array of results returned from the edits-complete event after the waterbodies feature layer is edited.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Edit rivers and waterbodies</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" />
    <style>
      html,body{height:100%;width:100%;margin:0;overflow:hidden;}
      #map{
        padding:0;
      }
      #header{
        font-size: 1.1em;
        font-family: sans-serif;
        padding-left: 1em;
        padding-top:4px;
        color:#660000;
      }
      .templatePicker {
        border: none;
      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    
    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;
      
      require([
        "esri/map", 
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
        Color, SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys
      ) {
        parser.parse();       

        // snapping is enabled for this sample - change the tooltip to reflect this
        jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";
       
        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";    

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. 
        esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        
        map = new Map("map", { 
          basemap: "satellite",
          center: [-96.541, 38.351],
          zoom: 14,
          slider: false 
        });

        map.on("layers-add-result", initEditor);
       
        //add boundaries and place names 
        var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(labels);

        var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });

        var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers]);
        
        waterbodies.on("edits-complete", function(results){
          console.log(results);
        })

        function initEditor(evt) {
          var templateLayers = arrayUtils.map(evt.layers, function(result){
            return result.layer;
          });
          var templatePicker = new TemplatePicker({
            featureLayers: templateLayers,
            grouping: true,
            rows: "auto",
            columns: 3
          }, "templateDiv");
          templatePicker.startup();

          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var settings = {
            map: map,
            templatePicker: templatePicker,
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                Editor.CREATE_TOOL_CIRCLE,
                Editor.CREATE_TOOL_TRIANGLE,
                Editor.CREATE_TOOL_RECTANGLE
              ]
            },
            toolbarOptions: {
              reshapeVisible: true
            }
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');
          //define snapping options
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CROSS, 
            15, 
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID, 
              new Color([255, 0, 0, 0.5]), 
              5
            ), 
            null
          );
          map.enableSnapping({
            snapPointSymbol: symbol,
            tolerance: 20,
            snapKey: keys.ALT
          });
    
          myEditor.startup();
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
        Edit Hydrography
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
        <div id="templateDiv"></div>
        <div id="editorDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

Re: edits-complete event of feature layer is not firing after moving a feature

AzizaParveen2 — Mon, 09 Feb 2015 19:23:04 GMT

Hi Rene, Thank you so much for your response. I am not using applyEdits since I am using editor widget.

Yes I am using the toolbar but it also happens if I just click on the feature and move it. This event firs just fine if I add a new feature or delete one. Here is the sample code

Hydrants.on("edits-complete", refreshLayer);

CPN.on("edits-complete", refreshLayer);

Street.on("edits-complete", refreshLayer);

refreshLayer = function () {

webEditedLayers.refresh();

CPN.refresh();

Hydrants.refresh();

Street.refresh();

}

If it only works when using applyEdits, then is there any other event fire after moving a feature?

Thanks and I really appreciate your help.

Re: edits-complete event of feature layer is not firing after moving a feature

AzizaParveen2 — Mon, 09 Feb 2015 19:31:28 GMT

Thanks so much Jake, I will try it and let you know☺

Re: edits-complete event of feature layer is not firing after moving a feature

ReneRubalcava — Sat, 11 Dec 2021 23:29:10 GMT

Check out this sample.

When you are done moving the vertices, you need to deactivate the toolbar. You'll need to wire up when this happens, in this case the sample deactivates the toolbar on a dbl-click and then applies the edits to the FeatureLayer.

function initEditing(evt) {
  var firePerimeterFL = map.getLayer("firePerimeterFL");
  var editToolbar = new Edit(map);
  editToolbar.on("deactivate", function(evt) {
    if ( evt.info.isModified ) {
      firePerimeterFL.applyEdits(null, [evt.graphic], null);
    }
  });
  var editingEnabled = false;
  firePerimeterFL.on("dbl-click", function(evt) {
    event.stop(evt);
    if (editingEnabled === false) {
      editingEnabled = true;
      editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
    } else {
      editToolbar.deactivate();
      editingEnabled = false;
    }
  });
}

Hope that helps.

Re: edits-complete event of feature layer is not firing after moving a feature

AzizaParveen2 — Mon, 09 Feb 2015 21:33:16 GMT

Thanks so much Rene, I got it to work from your suggestion, I was using editor widget instead of coding for editing, editor toolbar activates when you single click on a feature and deactivates when any feature gets unselected or you click any place on the map other than features and then edits-completes fires..thanks so much for pointing me to the right direction.

Regards

Aziza

Re: edits-complete event of feature layer is not firing after moving a feature

AzizaParveen2 — Mon, 09 Feb 2015 21:35:04 GMT

Jake the sample didn’t work for me, since I was using editor widget, all I needed was to deactivate the toolbar,. Thanks so much for your time.