This sample shows how to use the edit toolbar to move and edit vertices. The edit toolbar is a non-ui component that provides events that simplify the process of moving and editing vertices. To activate the toolbar, pass in a graphic and a constant defining the type of editing you want to perform.
The map displays polygons representing fire perimeter boundaries. To edit a boundary, zoom-in and double-click to activate the edit toolbar.
Note that once you double-click the feature both vertices and ghost vertices (white) appear. Once the vertices are active you do the following:
Double-click the feature to exit editing and have changes pushed back to the service.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Update Fire Perimeter</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; }
#map, #header {
border: 1px solid #444;
}
#map {
padding: 0;
margin: 5px;
}
#header {
height: 45px;
margin: 5px 5px 0 5px;
padding: 0.5em;
font-family: sans-serif;
font-weight: 500;
color: #0f3b5f;
font-size: 1.1em;
}
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
.dj_ie .simpleInfoWindow .content { position: relative; }
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/edit",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/config",
"dojo/_base/event",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, Edit, FeatureLayer, Query, esriConfig,
event, parser
) {
parser.parse();
map = new Map("map", {
basemap: "topo-vector",
center: [-117.72, 34.352],
zoom: 11
});
map.on("layers-add-result", initEditing);
var firePerimeterFL = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
id: "firePerimeterFL"
});
map.addLayers([firePerimeterFL]);
function initEditing(evt) {
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) {
editingEnabled = false;
editToolbar.deactivate();
firePerimeterFL.clearSelection();
}
else {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);
// select the feature to prevent it from being updated by map navigation
var query = new Query();
query.objectIds = [evt.graphic.attributes[firePerimeterFL.objectIdField]];
firePerimeterFL.selectFeatures(query);
}
});
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;" gutters="false">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<center>Zoom in to a fire perimeter and double click a feature to edit its vertices. Double click again on the feature to stop editing and apply edits.</center>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>