leaflet: add switch for draw mode

src/maps/Leaflet.js

@@ -15,6 +15,7 @@ import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
+import {CustomInput} from "reactstrap";
 
 export default class Leaflet extends React.Component{
   constructor(props){
@@ -25,6 +26,7 @@ export default class Leaflet extends React.Component{
       zoom: 15,
       path: [],
       distance: 0,
+      drawMode: false
     }
   }
 
@@ -34,11 +36,14 @@ export default class Leaflet extends React.Component{
   }
 
   addMarker = event => {
-    const { lat, lng } = event.latlng
-    let pathCopy = this.state.path.slice();
-    pathCopy.push([lat, lng]);
-    this.setState({path: pathCopy})
-    this.getDistance()
+    if(!this.state.drawMode){
+      console.log("addmarker")
+      const { lat, lng } = event.latlng
+      let pathCopy = this.state.path.slice();
+      pathCopy.push([lat, lng]);
+      this.setState({path: pathCopy})
+      this.getDistance()
+    }
   }
 
   updateMarker = (idx, event) => {
@@ -94,6 +99,10 @@ export default class Leaflet extends React.Component{
     onChange(geojsonData);
   }
 
+  changeDrawSwitch = () => {
+    this.setState({drawMode: !this.state.drawMode})
+  }
+
   render() {
     const position = [this.state.latitude, this.state.longitude]
     let testMarkers = this.props.markers
@@ -152,7 +161,7 @@ export default class Leaflet extends React.Component{
         <div className="mapInfo">
           <Button onClick={this.clearPath}>Clear path</Button>
           <Button onClick={this.getDistance}>Calculate Distance</Button>
-
+          <CustomInput type="switch" onChange={this.changeDrawSwitch} id="drawMode" name="drawMode" label="draw" />
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>