Chevron Down
Table of Contents
Chevron DownOverview
Chevron DownInteractive Examples
Chevron DownAPI Reference (Modes)
Chevron DownAPI Reference (Overlays)
Chevron DownAPI Reference (Map GL Draw)

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