mapgl: add draw mode

src/maps/MapGL.js

@@ -16,6 +16,18 @@ import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/
 import {Button} from "reactstrap";
 import {getRoute} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
+import {
+  Editor,
+  EditingMode,
+  DrawLineStringMode,
+  DrawPolygonMode,
+} from "react-map-gl-draw";
+
+const drawModes = [
+  {id: "drawPolyline", text: "Draw Polyline", handler: DrawLineStringMode},
+  {id: "drawPolygon", text: "Draw Polygon", handler: DrawPolygonMode},
+  {id: "editing", text: "Edit Feature", handler: EditingMode},
+];
 
 export default class MapGL extends React.Component{
   constructor(props){
@@ -32,6 +44,8 @@ export default class MapGL extends React.Component{
       },
       path: [[longitude, latitude]],
       distance: 0,
+      drawModeId: null,
+      drawModeHandler: null,
     }
     this.getRoute = getRoute.bind(this)
   }
@@ -65,6 +79,28 @@ export default class MapGL extends React.Component{
     this.setState({path: [], distance: 0})
   }
 
+  switchDrawMode = (event) => {
+    const modeId = event.target.value===this.state.drawModeId ? null:event.target.value;
+    const mode = drawModes.find((m) => m.id===modeId);
+    const modeHandler = mode ? new mode.handler() : null;
+    this.setState({"drawModeid": modeId, "drawModeHandler": modeHandler });
+  };
+
+  drawToolbar = () => {
+    return (
+      <div style={{ position: "absolute", top: 0, right: 0, maxWidth: "320px"}}>
+        <select onChange={this.switchDrawMode}>
+          <option value="">--Please choose a draw mode--</option>
+            {drawModes.map((mode) => (
+              <option key={mode.id} value={mode.id}>
+                {mode.text}
+              </option>
+            ))}
+        </select>
+      </div>
+    )
+  }
+
   render() {
     let testMarkers = this.props.markers
     let markers = <></>
@@ -136,6 +172,22 @@ export default class MapGL extends React.Component{
 
             {markers}
 
+            <Editor
+              clickRadius={12}
+              mode={this.state.drawModeHandler}
+              onSelect={(_) => {}}
+              featureStyle={({ feature, state }) => {
+                return {
+                  stroke: "rgb(189,189,189)",
+                  strokeDasharray: "4,2",
+                  strokeWidth: 2,
+                  fill: "rgb(189,189,189)",
+                  fillOpacity: 0.1
+                }
+              }}
+            />
+            {this.drawToolbar()}
+
             <div className="controllers">
               <GeolocateControl />
               <FullscreenControl />