Map.js

import React from "react";
import { GoogleMapsOverlay as DeckOverlay } from "@deck.gl/google-maps";
import { EditableGeoJsonLayer, DrawPolygonMode } from "nebula.gl";

import mapStyle from "./mapStyle";

const myFeatureCollection = {
  type: "FeatureCollection",
  features: [
    /* insert features here */
  ],
};

const selectedFeatureIndexes = [];

class Map extends React.Component {
  constructor() {
    super();
    this.mapRef = React.createRef();
    this.state = {
      data: myFeatureCollection,
    };
  }

  componentDidMount() {
    const map = new window.google.maps.Map(this.mapRef.current, {
      center: { lat: 40, lng: -100 },
      zoom: 5,
      styles: mapStyle,
      mapTypeId: "terrain",
      mapTypeControlOptions: {
        mapTypeIds: ["roadmap", "terrain"],
      },
      streetViewControl: false,
    });
    const overlay = new DeckOverlay({
      layers: [
        new EditableGeoJsonLayer({
          id: "geojson-layer",
          data: this.state.data,
          mode: DrawPolygonMode,
          selectedFeatureIndexes,

          onEdit: ({ updatedData }) => {
            console.log("updating data");
            this.setState({
              data: updatedData,
            });
          },
        }),
      ],
    });

    overlay.setMap(map);
  }

  render() {
    return (
      <div style={{ width: "100vw", height: "100vh" }} ref={this.mapRef}></div>
    );
  }
}

export default Map;