Basic usage
Imports
import * as React from 'react';
import DeckGL from '@deck.gl/react';
import { EditableGeoJsonLayer } from '@nebula.gl/layers';
import { StaticMap } from 'react-map-gl';
Inside your React component
Initialize
constructor(props) {
super(props);
this.state = {
geojson: {
type: 'FeatureCollection',
features: []
}
};
}
Render
render() {
const editableLayer = new EditableGeoJsonLayer({
id: 'geojson',
data: this.state.geojson,
mode: 'drawPoint',
onEdit: ({ updatedData }) => {
this.setState({ geojson: updatedData });
}
});
return (
<DeckGL
initialViewState={initialViewState}
controller={true}
layers={[editableLayer]}
>
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
</DeckGL>
);
}
See Also