Get Started
Installation
For yarn
yarn add @deck.gl-community/editable-layers
Quick Overview of the API
EditableGeoJsonLayer
EditableGeoJsonLayer is implemented as a deck.gl layer. It provides the ability to view and edit multiple types of geometry formatted as GeoJSON (an open standard format for geometry) including polygons, lines, and points.
Edit Modes
TBA
Callbacks
When there is the ability to edit, callbacks are provided to inform you of edits.
Small example
import React from 'react';
import DeckGL from 'deck.gl';
import {
EditableGeoJsonLayer,
DrawLineStringMode,
DrawPolygonMode
} from '@deck.gl-community/editable-layers';
import { StaticMap } from 'react-map-gl';
const INITIAL_VIEW_STATE = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0
};
export function GeometryEditor() {
const [features, setFeatures] = React.useState({
type: 'FeatureCollection',
features: []
});
const [mode, setMode] = React.useState(() => DrawPolygonMode);
const [selectedFeatureIndexes] = React.useState([]);
const layer = new EditableGeoJsonLayer({
data: features,
mode,
selectedFeatureIndexes,
onEdit: ({ updatedData }) => {
setFeatures(updatedData);
}
});
return (
<>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={{
doubleClickZoom: false
}}
layers={[layer]}
getCursor={layer.getCursor.bind(layer)}
>
<StaticMap mapboxApiAccessToken={YOUR_TOKEN_HERE} />
</DeckGL>
<div className='controls'>
<button
className={`button ${mode === DrawLineStringMode ? 'active' : ''}`}
onClick={() => setMode(() => DrawLineStringMode)}
>
Line
</button>
<button
className={`button ${mode === DrawPolygonMode ? 'active' : ''}`}
onClick={() => setMode(() => DrawPolygonMode)}
>
Polygon
</button>
</div>
</>
);
}
Live example on codesandbox