google: add marker, drag, distance

src/Google.js

@@ -2,40 +2,107 @@ import React from "react";
 import GoogleMapReact from 'google-map-react';
 import "./css/maps.css";
 import apiKey from './config/googleApiKey.js';
-import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
+import {calcDistance} from './helpers/distance';
+import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./config/variables";
 
-const AnyReactComponent = ({ text }) => <div>{text}</div>;
+const svgStyle = {
+  fill: "#343a40",
+  stroke: "none",
+  top: "-20",
+  left: "-8",
+  position: "absolute"
+};
+
+const Marker = ({ text }) =>
+  <div>
+    <svg height={20} viewBox="0 0 24 24" style={svgStyle}>
+      <path d={markerIcon}/>
+    </svg>
+    <p>{text}</p>
+  </div>;
 
 export default class Google extends React.Component{
   state = {
     latitude: latitude,
     longitude: longitude,
     zoom: 15,
+    distance: 0,
+    path: testPath,
+    draggable: true
     }
+
+  onMarkerInteraction = (childKey, childProps, mouse) => {
+    this.setState({draggable: false});
+  }
   
+  addMarker = (event) => {
+    const lng = event.lng
+    const lat = event.lat
+    console.log("Clicked at", lat, "/", lng)
+    let pathCopy = this.state.path.slice();
+    pathCopy.push([lat, lng]);
+    this.setState({path: pathCopy})
+    this.getDistance()
+  }
+
+  updateMarker = (childKey, childProps, mouse) => {
+    const lng = mouse.lng
+    const lat = mouse.lat
+    console.log("new position (marker", childKey, "):", lat, lng)
+    let pathCopy = this.state.path.slice();
+    pathCopy[childKey] = [lat, lng]
+    this.setState({path: pathCopy, draggable: true})
+    this.getDistance()
+  }
+
+  getDistance = () => {
+    let dst = calcDistance(this.state.path)
+    this.setState({distance: dst})
+  }
+
+  clearPath = () => {
+    this.setState({path: [], distance: 0})
+  }
+
   render() {
     const position = [this.state.latitude, this.state.longitude]
     return (
       <div>
-        <div style={{ height: mapHeight, width: mapWidth }}>
+        <div className="map" style={{height: mapHeight, width: mapWidth}}>
           <GoogleMapReact
             bootstrapURLKeys={{ key: apiKey }}
             defaultCenter={position}
             defaultZoom={this.state.zoom}
             yesIWantToUseGoogleMapApiInternals
             layerTypes={['TrafficLayer', 'TransitLayer']}
-          >
+            onClick={(e, c) => this.addMarker(e, c)}
 
-            <AnyReactComponent
-              lat={latitude}
-              lng={longitude}
-              text="My Marker"
-            />
+            draggable={this.state.draggable}
+            onChildMouseDown={this.onMarkerInteraction}
+            onChildMouseUp={this.updateMarker}
+            onChildMouseMove={this.onMarkerInteraction}
+            onChildClick={() => console.log('child click')}
+          >
+            {this.state.path.map((pos, idx) =>
+              <Marker
+                lat={pos[0]}
+                lng={pos[1]}
+                text={idx}
+                key={idx}
+                draggable={true}
+                onDragEnd={(e) => this.updateMarker(idx, e)}
+              />
+            )}
 
           </GoogleMapReact>
         </div>
 
         <div className="mapInfo">
+          <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>
       </div>
     );