-
Notifications
You must be signed in to change notification settings - Fork 166
editable geojson layer
The Editable GeoJSON layer accepts a GeoJSON FeatureCollection
and renders the features as editable polygons, lines, and points.
import DeckGL from 'deck.gl';
import { EditableGeoJsonLayer } from 'nebula.gl';
const myFeatureCollection = {
type: 'FeatureCollection',
features: [
/* insert features here */
]
};
class App extends React.Component {
state = {
mode: 'modify',
selectedFeatureIndexes: [0],
data: myFeatureCollection
};
render() {
const layer = new EditableGeoJsonLayer({
id: 'geojson-layer',
data: this.state.data,
mode: this.state.mode,
selectedFeatureIndexes: this.state.selectedFeatureIndexes,
onEdit: ({ updatedData }) => {
this.setState({
data: updatedData,
});
}
});
return <DeckGL {...this.props.viewport} layers={[layer]} />;
}
}
Inherits all deck.gl's Base Layer properties.
- Default:
null
A GeoJSON FeatureCollection
object. The following types of geometry are supported:
Point
LineString
Polygon
MultiPoint
MultiLineString
MultiPolygon
-
GeometryCollection
is not supported.
Note: passing a single Feature
is not supported. However, you can pass a FeatureCollection
containing a single Feature
and pass selectedFeatureIndexes: [0]
to achieve the same result.
- Default:
modify
The mode
property dictates which ModeHandler
from the modeHandlers
prop will be used to handle user interaction events (e.g. pointer events) in order to accomplish edits. See mode handlers overview for a description of the built-in modes.
- Default:
null
An arbitraty object used to further configure the current ModeHandler
.
- Default: see mode handlers overview
A object containing a mapping of mode name (string) to an instance of a ModeHandler
.
For example, you can use this to provide your own custom ModeHandler
:
{
//...
modeHandlers: {
...EditableGeoJsonLayer.defaultProps.modeHandlers,
myCustomMode: new MyCustomModeHandler()
}
}
- Default:
[]
The selectedFeatueIndexes
property distinguishes which features to treat as selected.
-
Features are identified by their index in the collection.
-
Selection of a feature causes style accessors to render a different style, defined in function such as
getLineColor
andgetFillColor
. -
Selected features in mode
modify
will render edit handles. Only one feature may be selected while in modedrawLineString
ordrawPolygon
to draw a feature.
The onEdit
event is the core event provided by this layer and must be handled in order to accept and render edits. The event
argument includes the following properties:
-
updatedData
(Object): A newFeatureCollection
with the edit applied.-
To accept the edit as is, supply this object into the
data
prop on the next render cycle (e.g. by calling React'ssetState
function) -
To reject the edit, do nothing
-
You may also supply a modified version of this object into the
data
prop on the next render cycle (e.g. if you have your own snapping logic).
-
-
editType
(String): The type of edit requested. One of:-
movePosition
: A position was moved. -
addPosition
: A position was added (either at the beginning, middle, or end of a feature's coordinates). -
removePosition
: A position was removed. Note: it may result in multiple positions being removed in order to maintain valid GeoJSON (e.g. removing a point from a triangular hole will remove the hole entirely). -
addFeature
: A new feature was added. Its index is reflected infeatureIndexes
-
finishMovePosition
: A position finished moving (e.g. user finished dragging). -
scaling
: A feature is being scaled. -
scaled
: A feature finished scaling (increase/decrease) (e.g. user finished dragging). -
rotating
: A feature is being rotated. -
rotated
: A feature finished rotating (e.g. user finished dragging). -
translating
: A feature is being translated. -
translated
: A feature finished translating (e.g. user finished dragging). -
startExtruding
: An edge started extruding (e.g. user started dragging). -
extruding
: An edge is extruding. -
extruded
: An edge finished extruding (e.g. user finished dragging). -
split
: A feature finished splitting.
-
-
featureIndexes
(Array<number>): The indexes of the edited/added features. -
editContext
(Object):null
or an object containing additional context about the edit. This is populated by the active mode handler, see mode handlers overview.
Consider the user removed the third position from a Polygon
's first ring, and that Polygon
was the fourth feature in the FeatureCollection
. The event
argument would look like:
{
updatedData: {...},
editType: 'removePosition',
featureIndexes: [3],
editContext: {
positionIndexes: [1, 2],
position: null
}
}
- Default:
true
Defaulted to true
for interactivity.
The following properties from GeoJsonLayer are supported and function the same:
filled
stroked
lineWidthScale
lineWidthMinPixels
lineWidthMaxPixels
lineJointRounded
lineMiterLimit
pointRadiusScale
pointRadiusMinPixels
pointRadiusMaxPixels
lineDashJustified
fp64
The following accessors function the same, but can accept additional arguments:
getLineColor
getFillColor
getRadius
getLineWidth
getLineDashArray
The additional arguments (in order) are:
-
feature
: the given feature -
isSelected
: indicates if the given feature is a selected feature -
mode
: the current value of themode
prop
While creating a new feature in any of the draw
modes, portion of a feature which has not been "committed" yet can hold its own props. For example, in drawLineString
mode, the tentative feature is the last line segment moving under the mouse. For polygons and ellipses, this would be the whole feature during drawing. Define the properties with the following accessors:
getTentativeLineColor
getTentativeFillColor
getTentativeLineWidth
getTentativeLineDashArray
The following accessors default to the same values as the existing feature accessors above. The arguments in order:
-
feature
: the segment/polygon that represents the tentative feature -
mode
: the current value of themode
prop
Edit handles are the points rendered on a feature to indicate interactive capabilities (e.g. vertices that can be moved).
-
type
(String): eitherexisting
for existing positions orintermediate
for positions half way between two other positions.
-
Default:
point
-
point
: Edit handles endered as points -
icons
: Edit handles rendered as provided icons
Edit handle objects can be represented by either points or icons. editHandlePoint...
are proxies for the ScatterplotLayer
props, and editHandleIcon...
are proxies for the IconLayer
props.
-
Default:
{}
-
Set luma.gl parameters for handles (eg. depthTest, blend)
- Default:
1
- Default:
false
- Default:
1
- Default:
4
- Default:
Number.MAX_SAFE_INTEGER
- Default:
handle => handle.type === 'existing' ? [0xc0, 0x0, 0x0, 0xff] : [0x0, 0x0, 0x0, 0x80]
- Default:
handle => (handle.type === 'existing' ? 5 : 3)
- Default:
null
Atlas image url or texture.
- Default:
null
Icon names mapped to icon definitions. See Icon Layer
.
- Default:
null
Edit handle icon size multiplier.
- Default:
handle => handle.type
Method called to retrieve the icon name of each edit handle, returns string.
- Default:
10
The height of each edit handle, in pixels.
- Default:
handle => handle.type === 'existing' ? [0xc0, 0x0, 0x0, 0xff] : [0x0, 0x0, 0x0, 0x80]
- Default:
0
The rotating angle of each object, in degrees.
These methods can be overridden in a derived class in order to customize event handling.
The pointer went down and up without dragging. This method is called regardless if something was picked.
-
picks
(Array): An array containing deck.gl Picking Info Objects for all objects that were under the pointer when clicked, or an empty array if nothing from this layer was under the pointer. -
screenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas. -
groundCoords
(Array):[lng, lat]
ground coordinates.
The pointer went down on something rendered by this layer and the pointer started to move.
-
picks
(Array): An array containing deck.gl Picking Info Objects for all objects that were under the pointer when it went down. -
screenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer was when it was considered to start dragging (should be very close topointerDownScreenCoords
). -
groundCoords
(Array):[lng, lat]
ground coordinates where the pointer was when it was considered to start dragging (should be very close topointerDownGroundCoords
). -
pointerDownScreenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer went down. -
pointerDownGroundCoords
(Array):[lng, lat]
ground coordinates where the pointer went down.
Note: this method is not called if nothing was picked when the pointer went down
The pointer went down on something rendered by this layer, the pointer moved, and now the pointer is up.
-
picks
(Array): An array containing deck.gl Picking Info Objects for all objects that were under the pointer when it went down. -
screenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer went up. -
groundCoords
(Array):[lng, lat]
ground coordinates where the pointer went up. -
pointerDownScreenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer went down. -
pointerDownGroundCoords
(Array):[lng, lat]
ground coordinates where the pointer went down.
The pointer moved, regardless of whether the pointer is down, up, and whether or not something was picked
-
screenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer is now. -
groundCoords
(Array):[lng, lat]
ground coordinates where the pointer is now. -
picks
(Array): An array containing deck.gl Picking Info Objects for all objects that are under the pointer now. -
isDragging
(Boolean):true
if the pointer went down and has moved enough to consider the movement a drag gesture, otherwisefalse
. -
pointerDownPicks
(Array): An array containing deck.gl Picking Info Objects for all objects that were under the pointer when it went down, if any. This will be populated even if the pointer hasn't yet moved enough to setisDragging
totrue
. -
pointerDownScreenCoords
(Array):[x, y]
screen pixel coordinates relative to the deck.gl canvas where the pointer went down. -
pointerDownGroundCoords
(Array):[lng, lat]
ground coordinates where the pointer went down.
Footer
Sidebar