Digifarm Field Editor

Suggest Edits

Getting started

To see how the Field Editor works please visit https://demo.digifarm.io/norway. Click on any field on that page and play around with the editing options that show up on the left side of the screen. In Edit mode the rectangle draw option lets the user select multiple vertices by drawing a rectangle.

Add the link to the location of the Digifarm Field Editor JS and CSS files in your webpage using a script tag in the head section of the HTML- 

<script src="{Path to the Digifarm Field Editor JS file}"></script>
<link href="{Path to the Digifarm Field Editor CSS file}" rel="stylesheet"/>

Initialise and add the DigifarmFieldEditor plugin and add it to your Mapbox GL map instance.

let editor = new DigifarmEditor.DigifarmFieldEditor(Options);

map.addControl(editor, "bottom-left");

editor only works after the Mapbox GL JS map has loaded, so you must interact with the editor only after your map's load event:

Options

All of the following options are required.

  • layer, string : The vector layer of the fields you want to edit. Make sure the features in the layer have an id property.
  • sourceLayer, string : sourceLayer property the vector layer passed via the layer option.
  • onModify, function : The callback function that will be called when a user edits a field and clicks on the save button. This function will be called when in edit, add hole and remove hole modes. The function will be called with three arguments -
    id, geometry, mode.
    • id, string : id of the edited field.
    • geometry, geometry : the resultant geometry after editing.
    • mode string: edit, cutHoles or removeHoles
  • onSplit, function : The callback function that will be called when a user splits a field and clicks on the save button. The function will be called with three arguments -
    id, features, mode.
    • id, string : id of the original field that was split.
    • features, array of features : the resultant features after splitting the field.
    • mode string: split
  • onMerge, function : The callback function that will be called when a user splits a field and clicks on the save button. The function will be called with three arguments -
    ids, feature, mode.
    • ids, array : ids of the fields chosen for merging.
    • feature, features : the resultant feature after merging the fields.
    • mode string: merge

Updated over 1 year ago