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 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