Edit features with the Editor widget

This sample demonstrates how to add an Editor widget to a web application. In addition to adding the Editor widget, it also shows how to add the SnappingControls widget to work in conjunction with the Editor. Both of these widgets used together can be useful as it provides a way to streamline the editing experience within an application while taking advantage of snapping functionality.

How it works

Instantiate the layers and specify their LayerInfos

The application loads a webmap and iterates through all of its layers and instantiates each.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
view.map.allLayers.forEach((layer) => {
  if (layer.type === 'feature') {
    switch (layer.geometryType) {
      case "polygon":
        polygonLayer = layer;
        break;
      case "polyline":
        lineLayer = layer;
        break;
      case "point":
        pointLayer = layer;
        break;
    }
  }
});

After layers are set, each layer's layerInfo is set. This takes the layer and an array of field configurations. These fields specify what field's values should be updated by the Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// Create layerInfos for layers in Editor

// Set the point layer's LayerInfo
const pointInfos = {
  layer: pointLayer,
  fieldConfig: [{
    name: "HazardType",
    label: "Hazard type"
    }, {
      name: "Description",
      label: "Description"
    }, {
      name: "SpecialInstructions",
      label: "Special Instructions"
    }, {
      name: "Status",
      label: "Status"
    }, {
      name: "Priority",
      label: "Priority"
  }]
};

// Set the line layer's LayerInfo
const lineInfos = {
  layer: lineLayer,
  fieldConfig: [{
    name: "Severity",
    label: "Severity"
  }, {
    name: "blocktype",
    label: "Type of blockage"
  }, {
    name: "fullclose",
    label: "Full closure"
  }, {
    name: "active",
    label: "Active"
  }, {
    name: "locdesc",
    label: "Location Description"
  }]
};

// Set the polygon layer's LayerInfo
const polyInfos = {
  layer: polygonLayer,
  fieldConfig: [{
    name: "incidenttype",
    label: "Incident Type"
  }, {
    name: "activeincid",
    label: "Active"
  }, {
    name: "descrip",
    label: "Description"
  }]
};

Instantiate the Editor

Based on the editing functionality set on the feature layer, you can Edit existing features and/or Add new features. The widget will take whatever editing capabilities are set on the service. If needing to override any, this can be achieved by setting specific properties within the widget's layerInfos. Properties such as allowAttachments, enabled, updateEnabled, and/or deleteEnabled can be specified to further constrain how much editing can be done per layer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Begin Editor constructor
const editor = new Editor({
  view: view,
  layerInfos: [{
    layer: pointLayer,
    fieldConfig: [pointInfos]
  },{
    layer: lineLayer,
    fieldConfig: [lineInfos]
  },{
    layer: polygonLayer,
    fieldConfig: [polyInfos]
  }
  ], // constructor snippet is finished below

Snapping

Snapping is configured in the Editor's constructor via its snappingOptions. This is where you would configure how snapping should be used within the application. There are two modes for snapping: self and feature snapping. In order for either of these modes to work, the global, enabled property must also be set to true. The sample is written to have both enabled. If one or both need disabling, set the correct property to false.

The SnappingControls widget works by associating its snappingOptions property to whatever is set on the Editor via the Editor.snappingOptions.

By default, snapping is turned off. These following lines of code set the global snapping to true, therefore the SnappingControls UI will automatically display it turned on and snapping will be enabled. In addition, the SnappingControls widget will automatically display all layers within the map that support snapping but will not be checked on and enabled. In this sample, one of the three layers, (ie. pointLayer), is set within the Editor.snappingOptions.featureSources.

If your application requires snapping to different layers within the app, specify which layers should be enabled by setting the associated feature snapping layer sources. In this example, only pointLayer is specified. The SnappingControls widget will display the additional layers within the map, but only show pointLayer as enabled for feature snapping.

1
2
3
4
5
6
7
8
9
  snappingOptions: {
    enabled: true,
    featureSources:
    [{ // Autocastable to FeatureSnappingLayerSource
      // Enable feature snapping on specified layer(s)
      layer: pointLayer
    }]
  }
}); // End Editor constructor

Next, add an instance of the Expand widget and set its content to that of snappingControls. This will keep the widget from cluttering up valuable space within your application.

1
2
3
4
5
6
7
8
  // Create the Expand widget and set its content to that of the SnappingControls
const snappingExpand = new Expand({
  expandIconClass: "esri-icon-settings2",
  expandTooltip: "Show snapping UI",
  expanded: false,
  view: view,
  content: snappingControls
});

The Editor and Expand widgets use the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget.

Lastly, we add the widgets to the application using the View's UI.

1
2
3
// Add widgets to top and bottom right of the view
view.ui.add(editor, "top-right");
view.ui.add(snappingExpand, "bottom-right");

For a more advanced sample, see Editor widget with configurations and for editing in 3D see the sample Edit features in 3D with the Editor widget.