Edit features with the Editor widget

This sample demonstrates how to add an Editor widget to a web application. This widget is useful as it provides a way to streamline the editing experience within an application.

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.

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.

// 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 contrain how much editing can be done per layer.

// 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.

If your application requires snapping to different layers within the app, specify which layers should be used by setting the associated feature snapping layer sources. In this example, all three layers: point, line, and polygon, are specified.

Lastly, if needing to disable snapping temporarily, click the CTRL key while sketching and you should notice that snapping is temporarily turned off.

  snappingOptions: {
    enabled: true,
    selfEnabled: true,
    featureEnabled: true,
    featureSources: [
      {layer: pointLayer},
      {layer: lineLayer},
      {layer: polygonLayer}
    ]
  }
}); // End Editor constructor

The Editor widget uses the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget. Additional properties can be set as needed.

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

// Add widget to top-right of the view
view.ui.add(editor, "top-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.