Edit features with the Editor widget

This sample demonstrates how to add the Editor widget to a web application. Once the widget loads, click on the template to add and draw a feature's geometry. Once the feature sketch is complete, update any necessary attribute information. If wanting to create more than one feature at a time, continue adding new geometries while updating their associated attributes. Once all feature creates are added, click Create and any feature creates will be applied back to the feature service.

Select a feature using the Editor's select tool to update an existing feature. The corresponding form will display for any editable fields.

How it works

The application loads a webmap and iterates through all of its editable layers. Any editable layer is added to the Editor. Based on the underlying service's editing permissions, the Editor widget automatically recognizes the permissions set on these layers and restricts the editing capabilities based on the service's permissions. In addition, the webmap contains formInfo that contains the corresponding form template information set on the layers. The template takes an array of field elements that specify what values should be updated by the Editor.

Based on the editing functionality set on a feature layer, you can select an existing feature to update or create new feature(s). The widget will take whatever editing capabilities are set on the service.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const webmap = new WebMap({
  portalItem: {
    id: "459a495fc16d4d4caa35e92e895694c8"
  }
});

const view = new MapView({
  container: "viewDiv",
  map: webmap
});

// Begin Editor constructor
const editor = new Editor({
  view: view
}); // End Editor constructor

// Add the widget to the view
view.ui.add(editor, "top-right");

The Editor uses the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget, then add the widget to the application using the View's UI.