google test: moving markers

src/maps/Google.js

@@ -91,11 +91,11 @@ export default class Google extends React.Component{
     const lng = event.lng
     const lat = event.lat
 
-//    let pathCopy = this.state.path.slice();
-//    pathCopy.push([lat, lng])
-//    this.setState({path: pathCopy})
+    let pathCopy = this.state.path.slice();
+    pathCopy.push([lat, lng])
+    this.setState({path: pathCopy})
 
-    this.getRoute(lng, lat);
+//    this.getRoute(lng, lat);
     this.getDistance()
   }
 
@@ -119,19 +119,21 @@ export default class Google extends React.Component{
   }
 
   drawPath = () => {
-    let path = this.state.path.map(p => {
-      return {lat: p[0], lng: p[1]}
-    })
-    let map = this.state.map
-    let maps = this.state.maps
-    new maps.Polyline({
-      path: path,
-      geodesic: true,
-      strokeColor: "#212529",
-      strokeOpacity: 1.0,
-      strokeWeight: 4,
-      map,
-    });
+    if (!this.props.markers){
+      let path = this.state.path.map(p => {
+        return {lat: p[0], lng: p[1]}
+      })
+      let map = this.state.map
+      let maps = this.state.maps
+      new maps.Polyline({
+        path: path,
+        geodesic: true,
+        strokeColor: "#212529",
+        strokeOpacity: 1.0,
+        strokeWeight: 4,
+        map,
+      });
+    }
   }
 
   handleApiLoaded = (map, maps) => {
@@ -140,6 +142,28 @@ export default class Google extends React.Component{
 
   render() {
     const position = [this.state.latitude, this.state.longitude]
+    let testMarkers = this.props.markers
+    let markers = <></>
+    if (testMarkers){
+      markers = this.props.markers.map((pos, idx) =>
+        <Marker
+          lat={pos[0]}
+          lng={pos[1]}
+          key={idx}
+        />
+      )
+    }else{
+      markers = 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)}
+        />
+      )}
+
     return (
       <div>
         <div className="map" style={{height: mapHeight, width: mapWidth}}>
@@ -155,16 +179,8 @@ export default class Google extends React.Component{
             onChildMouseUp={this.updateMarker}
             onGoogleApiLoaded={({map, maps}) => this.handleApiLoaded(map, maps)}
           >
-            {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)}
-              />
-            )}
+
+            {markers}
 
           </GoogleMapReact>
         </div>

src/test/Googles.js

@@ -1,26 +1,77 @@
 import React, {Profiler} from "react";
 import Google from "./../maps/Google";
 import {measureTime} from './../helpers/measureTime';
+import {CustomInput, Input} from "reactstrap";
+import {
+  createRandomMarkers,
+  calcMarkerPosition,
+  changeSwitch,
+  setNoOfMarkers
+} from "./../helpers/randomMarkers";
+import {mapTestState} from "./../config/variables"
 
 export default class Googles extends React.Component{
   constructor(props) {
     super(props)
-    this.metricsRef = React.createRef()
-    this.state = {
-      noOfMaps: 100
+    this.state = mapTestState
+
+    this.measurementsDiv = React.createRef()
+    this.markerInfoDiv = React.createRef()
+
+    this.createRandomMarkers = createRandomMarkers.bind(this)
+    this.calcMarkerPosition = calcMarkerPosition.bind(this)
+    this.changeSwitch = changeSwitch.bind(this)
+    this.setNoOfMarkers = setNoOfMarkers.bind(this)
+  }
+
+  componentDidMount() {
+    this.createRandomMarkers();
+    this.setState({startTime: performance.now()});
+    if(this.state.moveMarkers){
+      this.timer = setInterval(() => {
+        this.setState({currStep: this.state.currStep + 1});
+        this.calcMarkerPosition()
+      }, this.state.interval);
+    }
+  }
+
+  componentDidUpdate() {
+    if(this.state.currStep===this.state.noOfSteps){
+      let endTime = performance.now();
+      let duration = endTime - this.state.startTime
+      let msg = "Duration " + duration.toFixed(3) + " for " + this.state.noOfSteps + " steps"
+      console.log(msg)
+      this.markerInfoDiv.current.innerHTML = msg
+      this.setState({currStep: this.state.currStep + 1});
     }
   }
 
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
   render(){
     return (
-      <div>
-        <div ref={this.metricsRef} className="mapTime" >
+      <div className="mapTestContainer">
+
+        <div className="mapTime">
+          <CustomInput type="switch" onChange={this.changeSwitch} id="exampleCustomSwitch" name="customSwitch" label="Move markers" />
+          <div ref={this.markerInfoDiv}>
+            <span>{this.state.currStep} steps</span>
+          </div>
+          <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
+          <Input type="text" onChange={this.setNoOfMarkers} value={this.state.noOfMarkers}/>
+
+          <div ref={this.measurementsDiv}>
+          </div>
         </div>
-        <Profiler id="google" onRender={measureTime(this)}>
-          { Array.from({length: this.state.noOfMaps}, (_, index) =>
-              <Google key={index}/>
-          )}
-        </Profiler>
+
+        <div className="mapTest">
+          <Profiler id="google" onRender={measureTime(this)}>
+            <Google markers={this.state.markers}/>
+          </Profiler>
+        </div>
+
       </div>
     );
   }