Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Move and edit vertices
Explore in the sandbox
Open in CodePen
View live sample
Description
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:
- Drag a vertex to move it to a new location.
- Right-click to delete a vertex.
- Drag a ghost vertices to add a new point.
Double-click the feature to exit editing and have changes pushed back to the service.
Code
<!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>