/
example.js
61 lines (55 loc) · 1.51 KB
/
example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* eslint-env browser */
import * as React from 'react';
import DeckGL from '@deck.gl/react';
import { EditableGeoJsonLayer } from '@nebula.gl/layers';
import { Toolbox } from '@nebula.gl/editor';
import { ViewMode } from '@nebula.gl/edit-modes';
import { StaticMap } from 'react-map-gl';
const MAPBOX_ACCESS_TOKEN =
'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
const initialViewState = {
longitude: -122.43,
latitude: 37.775,
zoom: 12,
};
export function Example() {
const [features, setFeatures] = React.useState({
type: 'FeatureCollection',
features: [],
});
const [selectedFeatureIndexes] = React.useState([]);
const [mode, setMode] = React.useState(() => ViewMode);
const layer = new EditableGeoJsonLayer({
data: features,
mode,
selectedFeatureIndexes,
onEdit: ({ updatedData }) => {
setFeatures(updatedData);
},
});
return (
<>
<DeckGL
initialViewState={initialViewState}
controller={{
doubleClickZoom: false,
}}
layers={[layer]}
getCursor={layer.getCursor.bind(layer)}
>
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
</DeckGL>
<Toolbox
mode={mode}
features={features}
onSetMode={setMode}
onImport={(featureCollection) =>
setFeatures({
...features,
features: [...features.features, ...featureCollection.features],
})
}
/>
</>
);
}