mapbox: add marker with mouse, calculate distance, drag marker

src/Mapbox.js

@@ -9,6 +9,7 @@ import {
 } from "react-map-gl";
 import "./css/maps.css";
 import mapboxToken from './config/mapboxToken.js';
+import {calcDistance} from './helpers/distance';
 
 const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
   c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
@@ -26,46 +27,97 @@ export default class Mapbox extends React.Component{
       zoom: 15,
       bearing: 0,
       pitch: 0
-    }
+    },
+    path: []
   };
   
+  addMarker = event => {
+    const lng = event.lngLat[0]
+    const lat = event.lngLat[1]
+    console.log("Clicked at", lat, "/", lng)
+    let pathCopy = this.state.path.slice();
+    pathCopy.push([lat, lng]);
+    this.setState({path: pathCopy})
+    this.getDistance()
+  }
+
+  updateMarker = (idx, event) => {
+    const lng = event.lngLat[0]
+    const lat = event.lngLat[1]
+    console.log(lat, lng, idx)
+    let pathCopy = this.state.path.slice();
+    pathCopy[idx] = [lat, lng]
+    this.setState({path: pathCopy})
+    this.getDistance()
+  }
+
+  getDistance = () => {
+    let dst = calcDistance(this.state.path)
+    this.setState({distance: dst})
+  }
+
+  clearPath = () => {
+    this.setState({path: [], distance: 0})
+  }
+
   render() {
     return (
-      <ReactMapGL
-        {...this.state.viewport}
-        onViewportChange={(viewport) => this.setState({viewport})}
-        mapboxApiAccessToken={mapboxToken}
-        mapStyle="mapbox://styles/mapbox/streets-v11"
-      >
-        <Marker
-          longitude={LONGITUDE}
-          latitude={LATITUDE}
-          captureClick={false}
-          draggable={false}
-          offsetTop={-20}
-          offsetLeft={-8}
+      <div>
+        <ReactMapGL
+          {...this.state.viewport}
+          onViewportChange={(viewport) => this.setState({viewport})}
+          mapboxApiAccessToken={mapboxToken}
+          mapStyle="mapbox://styles/mapbox/streets-v11"
+          onClick={this.addMarker}
         >
-          <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-            <path d={ICON} />
-          </svg>
-        </Marker>
         
-        <div className="controllers">
-          <div>
+        {this.state.path.map((pos, idx) =>
+          <Marker
+            longitude={pos[1]}
+            latitude={pos[0]}
+            captureClick={false}
+            draggable={true}
+            offsetTop={-20}
+            offsetLeft={-8}
+            key={idx}
+            onDragEnd={(e) => this.updateMarker(idx, e)}
+          >
+            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
+              <path d={ICON} />
+            </svg>
+          </Marker>
+        )}
+
+          <Marker
+            longitude={LONGITUDE}
+            latitude={LATITUDE}
+            captureClick={false}
+            draggable={false}
+            offsetTop={-20}
+            offsetLeft={-8}
+          >
+            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
+              <path d={ICON} />
+            </svg>
+          </Marker>
+
+          <div className="controllers">
             <GeolocateControl />
-          </div>
-          <div>
             <FullscreenControl />
-          </div>
-          <div>
             <NavigationControl />
-          </div>
-          <div>
             <ScaleControl />
+            <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
           </div>
-          <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
+        </ReactMapGL>
+
+        <div>
+          <button onClick={this.clearPath}>Clear path</button>
+          <button onClick={this.getDistance}>Calculate Distance</button>
+          <p>
+            Distanz: {Math.round(this.state.distance*100)/100} km
+          </p>
         </div>
-      </ReactMapGL>
+      </div>
     );
   }
 }