pigeon: make marker draggable

src/maps/Pigeon.js

@@ -2,6 +2,7 @@ import React from "react";
 import Map from "pigeon-maps";
 import Marker from "pigeon-marker";
 import Overlay from "pigeon-overlay";
+import Draggable from "pigeon-draggable";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 
@@ -34,13 +35,21 @@ export default class Pigeon extends React.Component{
   addMarker = (event) => {
     const lat = event.latLng[0]
     const lng = event.latLng[1]
-    console.log("Clicked at", lat, "/", lng)
     let pathCopy = this.props.mapConfig.path.slice();
     pathCopy.push([lat, lng]);
     this.props.updateMapState("path", pathCopy)
     this.props.getDistance()
   }
 
+  updateMarker = (event, idx) => {
+    const lat = event[0]
+    const lng = event[1]
+    let pathCopy = this.props.mapConfig.path.slice();
+    pathCopy[idx] = [lat, lng];
+    this.props.updateMapState("path", pathCopy)
+    this.props.getDistance()
+  }
+
   render(){
     const mapConfig = this.props.mapConfig;
     return (
@@ -60,7 +69,14 @@ export default class Pigeon extends React.Component{
             onClick={(event) => this.addMarker(event)}
           >
               {mapConfig.path.map((pos, idx) =>
-                <Marker anchor={pos} key={idx}/>
+                <Draggable
+                  anchor={pos}
+                  key={idx}
+                  offset={[15, 32]}
+                  onDragEnd={(event) => this.updateMarker(event, idx)}
+                >
+                  <Marker anchor={pos} key={idx}/>
+                </Draggable>
               )}
 
               <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>