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
Solved! Go to Solution.
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.
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.
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.
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.
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
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...",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{ 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>