map.jsx

import React from "react";
// import { Control } from "mapbox-gl";
import { MapContext } from "react-mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";

export default class DrawControl extends React.Component {
  static contextType = MapContext;
  static defaultProps = {
    position: "top-left",
  };


  componentDidMount = () => {
    const map = this.context;
    // The map needs to be passed in the React Context, or welse we can"t do
    // anything.
    if (!map || !map.getStyle()) {
      throw new Error("Map is undefined in React context.");
    }

    const {
      modes,
      position,
    } = this.props;

    // Define a new Draw Control
    this.draw = new MapboxDraw({
      ...this.props,
      modes: {
        ...MapboxDraw.modes,
        ...modes,
      },
    });

    // Add it to our map
    map.addControl(this.draw, position);

    map.on("draw.create", this.onDrawCreate);
    map.on("draw.actionable", this.onDrawActionable);
    map.on("draw.combine", this.onDrawCombine);
    map.on("draw.delete", this.onDrawDelete);
    map.on("draw.modechange", this.onDrawModeChange);
    map.on("draw.render", this.onDrawRender);
    map.on("draw.selectionchange", this.onDrawSelectionChange);
    map.on("draw.uncombine", this.onDrawUncombine);
    map.on("draw.update", this.onDrawUpdate);
  }
  onDrawCreate = (e) => {
    if (this.props.onDrawCreate) {
      this.props.onDrawCreate(e);
    }
  }
  onDrawActionable = (e) => {
    if (this.props.onDrawActionable) {
      this.props.onDrawActionable(e);
    }
  }
  onDrawCombine = (e) => {
    if (this.props.onDrawCombine) {
      this.props.onDrawCombine(e);
    }
  }
  onDrawDelete = (e) => {
    if (this.props.onDrawDelete) {
      this.props.onDrawDelete(e);
    }
  }
  onDrawModeChange = (e) => {
    if (this.props.onDrawModeChange) {
      this.props.onDrawModeChange(e);
    }
  }
  onDrawRender = (e) => {
    if (this.props.onDrawRender) {
      this.props.onDrawRender(e);
    }
  }
  onDrawSelectionChange = (e) => {
    if (this.props.onDrawSelectionChange) {
      this.props.onDrawSelectionChange(e);
    }
  }
  onDrawUncombine = (e) => {
    if (this.props.onDrawUncombine) {
      this.props.onDrawUncombine(e);
    }
  }
  onDrawUpdate = (e) => {
    if (this.props.onDrawUpdate) {
      this.props.onDrawUpdate(e);
    }
  }

  componentWillUnmount() {
    const map = this.context;
    if (!map || !map.getStyle()) {
      return;
    }

    if (!this.draw) {
      return;
    }


    map.off("draw.create", this.onDrawCreate);
    map.off("draw.actionable", this.onDrawActionable);
    map.off("draw.combine", this.onDrawCombine);
    map.off("draw.delete", this.onDrawDelete);
    map.off("draw.modechange", this.onDrawModeChange);
    map.off("draw.render", this.onDrawRender);
    map.off("draw.selectionchange", this.onDrawSelectionChange);
    map.off("draw.uncombine", this.onDrawUncombine);
    map.off("draw.update", this.onDrawUpdate);
    map.removeControl(this.draw);
  }

  render() {
    return null;
  }
}