EditMode
s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.
The following are the built-in EditMode
s provided by nebula.gl:
No edits are possible, but selection is still possible.
User can move existing points, add intermediate points along lines, and remove points.
editContext
argument to the onEdit
callback contains the following properties:
positionIndexes
(Array): An array of numbers representing the indexes of the edited position within the feature's coordinates
arrayposition
(Array): An array containing the ground coordinates (i.e. [lng, lat]) of the edited positionUser can move edge. Click and drag from anywhere between 2 points in edge.
User can scale a feature about its centroid by clicking and dragging (inward or outward) the selected geometry. This mode supports multiple selections.
User can rotate a feature about its centroid by clicking and dragging the selected geometry. This mode supports multiple selections.
The user can move a feature by selecting one or more features and dragging anywhere within the screen. Additionally, the user can initiate snapping by clicking and dragging the selected feature's vertex handles. If the vertex handle is close enough to another feature's vertex, the two features will snap together.
A single mode that provides translating, rotating, and scaling capabilities. Translation can be performed by clicking and dragging the selected feature itself. Rotating can be performed by clicking and dragging the top-most edit handle around a centroid pivot. Scaling can be performed by clicking and dragging one of the corner edit handles. Just like the individual modes, this mode supports multiple selections and feature snapping.
User can duplicate and translate a feature by clicking selected feature and dragging anywhere on the screen. This mode is extends TranslateMode. This mode supports multiple selections.
User can draw a new Point
feature by clicking where the point is to be.
User can draw a new LineString
feature by clicking positions to add. User finishes drawing by double-clicking.
User can extend an existing LineString
feature by clicking positions to add. A single LineString
feature must be selected for this mode.
The following options can be provided in the modeConfig
object:
drawAtFront
(optional): <boolean>
true
, will extend from the "beginning" of the line, i.e. relative to the start of the coordinates array.editContext
argument to the onEdit
callback contains the following properties:
positionIndexes
(Array): An array of numbers representing the indexes of the added position within the feature's coordinates
arrayposition
(Array): An array containing the ground coordinates (i.e. [lng, lat]) of the added positionUser can draw a new Polygon
feature by clicking positions to add then closing the polygon (or double-clicking).
editContext
argument to the onEdit
callback contains the following properties:
positionIndexes
(Array): An array of numbers representing the indexes of the added position within the feature's coordinates
arrayposition
(Array): An array containing the ground coordinates (i.e. [lng, lat]) of the added positionUser can draw a new Polygon
feature with 90 degree corners (right angle) by clicking positions to add then closing the polygon (or double-clicking). After clicking the 2 points, the draw mode guides/allows to have right angle polygon.
User can draw a new Polygon
feature by dragging (similar to the lasso tool commonly found in photo editing software).
The following options can be provided in the modeConfig
object:
throttleMs
(optional): number
User can draw a new rectangular Polygon
feature by clicking two opposing corners of the rectangle.
The following options can be provided in the modeConfig
object:
dragToDraw
(optional): boolean
true
, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.User can draw a new rectangular Polygon
feature by clicking three corners of the rectangle.
User can draw a new circular Polygon
feature by clicking the center then along the ring.
The following options can be provided in the modeConfig
object:
steps
(optional): x <number>
x
means the circle will be drawn using x
number of points.dragToDraw
(optional): boolean
true
, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.User can draw a new circular Polygon
feature by clicking the two ends of its diameter.
The following options can be provided in the modeConfig
object:
steps
(optional): x <number>
x
means the circle will be drawn using x
number of points.dragToDraw
(optional): boolean
true
, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.User can draw a new ellipse shape Polygon
feature by clicking two corners of bounding box.
The following options can be provided in the modeConfig
object:
dragToDraw
(optional): boolean
true
, user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.User can draw a new ellipse shape Polygon
feature by clicking center and two corners of the ellipse.
User can split a polygon by drawing a new LineString
feature on top of the polygon.
User can measure a distance between two points.
The following options can be provided in the modeConfig
object:
turfOptions
(Object, optional)
options
object passed to turf's distance functionundefined
formatTooltip
(Function, optional)
(distance) => parseFloat(distance).toFixed(2) + units
measurementCallback
(Function, optional)
undefined
User can measure an area by drawing an arbitrary polygon.
The following options can be provided in the modeConfig
object:
formatTooltip
(Function, optional)
(distance) => parseFloat(distance).toFixed(2) + units
measurementCallback
(Function, optional)
undefined
User can measure an angle by drawing two lines.
The following options can be provided in the modeConfig
object:
formatTooltip
(Function, optional)
(distance) => parseFloat(angle).toFixed(2) + units
measurementCallback
(Function, optional)
undefined
User can move a point up and down.
The following options can be provided in the modeConfig
object:
minElevation
(Number, optional)
0
maxElevation
(Number, optional)
20000
calculateElevationChange
(Function, optional)
10 * <vertical movement in pixels>
if (mode === 'elevation') {
modeConfig.calculateElevationChange = (opts) =>
ElevationMode.calculateElevationChangeWithViewport(viewport, opts);
}
For all polygon drawing modes, the following options can be provided in the modeConfig
object:
booleanOperation
(optional): null|'union'|'difference'|'intersection'
Polygon
or MultiPolygon
selectionnull
, the drawn Polygon
is added as a new feature regardless of selectionunion
, the drawn Polygon
is unioned with the selected geometrydifference
, the drawn Polygon
is subtracted from the selected geometryintersection
, the drawn Polygon
is intersected with the selected geometryUse CompositeMode
to combine multiple modes.
Not all combinations are guaranteed to work.
new CompositeMode(modes, options = {})
modes
: Array<EditMode>
Modes you want to combine. Order is very important.options
(optional): Options to be added later.new CompositeMode([new DrawLineStringMode(), new ModifyMode()])