Hide Table of Contents
View Move and edit vertices sample in sandbox
Move and edit vertices

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.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/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.21/"></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();

        // refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        map = new Map("map", {
          basemap: "topo",
          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>