mapbox: drawing mode on and off switch

src/maps/Mapbox.js

@@ -12,7 +12,7 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
-import {Button} from "reactstrap";
+import {Button, CustomInput, Label} from "reactstrap";
 import {getRoute, mapStyles} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
 import EvaluationTable from "./../EvaluationTable";
@@ -28,7 +28,8 @@ export default class Mapbox extends React.Component{
       zoom: [14],
       path: [],
       distance: 0,
-      center: [longitude, latitude]
+      center: [longitude, latitude],
+      drawing: false
     }
     this.getRoute = getRoute.bind(this)
   }
@@ -39,13 +40,15 @@ export default class Mapbox extends React.Component{
   }
 
   addMarker = (event, click) => {
-    const lng = click.lngLat.lng
-    const lat = click.lngLat.lat
-    this.getRoute(lng, lat);
-//    let pathCopy = this.state.path.slice();
-//    pathCopy.push([lng, lat]);
-//    this.setState({path: pathCopy})
-    this.getDistance()
+    if (!this.state.drawing){
+      const lng = click.lngLat.lng
+      const lat = click.lngLat.lat
+      this.getRoute(lng, lat);
+  //    let pathCopy = this.state.path.slice();
+  //    pathCopy.push([lng, lat]);
+  //    this.setState({path: pathCopy})
+      this.getDistance()
+    }
   }
 
   updateMarker = (idx, event) => {
@@ -145,7 +148,7 @@ export default class Mapbox extends React.Component{
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
-          <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
+          <CustomInput type="switch" onChange={() => this.setState({"drawing": !this.state.drawing})} id="drawMode" name="drawMode"/>
         </div>
 
         <EvaluationTable mapId="mapbox"/>