mapgl test: moving markers

src/maps/MapGL.js

@@ -26,7 +26,7 @@ export default class MapGL extends React.Component{
         height: mapHeight,
         latitude: latitude,
         longitude: longitude,
-        zoom: 15,
+        zoom: 14,
         bearing: 0,
         pitch: 0
       },
@@ -66,6 +66,49 @@ export default class MapGL extends React.Component{
   }
 
   render() {
+    let testMarkers = this.props.markers
+    let markers = <></>
+    if (testMarkers){
+      markers = testMarkers.map((pos, idx) => {
+        return(
+          <Marker
+            longitude={pos[0]}
+            latitude={pos[1]}
+            captureClick={false}
+            offsetTop={-20}
+            offsetLeft={-8}
+            key={idx}
+          >
+            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none", position: "absolute", top: "3px"}}>
+                <path d={markerIcon} />
+            </svg>
+          </Marker>
+        )}
+      )
+    }else{
+      markers = this.state.path.map((pos, idx) => {
+        return(
+          <Marker
+            longitude={pos[0]}
+            latitude={pos[1]}
+            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", position: "absolute", top: "3px"}}>
+              {(idx===0 || idx===this.state.path.length-1 ?
+                (<path d={markerIcon} /> )
+                : (<circle cx="10" cy="19" r="5"/>)
+              )}
+            </svg>
+          </Marker>
+        )
+      })
+    }
+
     return (
       <div>
         <div className="map">
@@ -91,26 +134,7 @@ export default class MapGL extends React.Component{
             />
           </Source>
 
-          {this.state.path.map((pos, idx) => {
-            return(
-            <Marker
-              longitude={pos[0]}
-              latitude={pos[1]}
-              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", position: "absolute", top: "3px"}}>
-                {(idx===0 || idx===this.state.path.length-1 ?
-                  (<path d={markerIcon} /> )
-                  : (<circle cx="10" cy="19" r="5"/>)
-                )}
-              </svg>
-            </Marker>
-          )})}
+            {markers}
 
             <div className="controllers">
               <GeolocateControl />

src/test/MapGLs.js

@@ -1,27 +1,78 @@
 import React, {Profiler} from "react";
 import MapGL from "./../maps/MapGL";
 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 MapGLs 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(true);
+    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={(e) => this.setNoOfMarkers(e, true)} value={this.state.noOfMarkers}/>
+
+          <div ref={this.measurementsDiv}>
+          </div>
         </div>
-        <Profiler id="mapgl" onRender={measureTime(this)}>
-          { Array.from({length: this.state.noOfMaps}, (_, index) =>
-              <MapGL key={index} />
-          )}
-        </Profiler>
+
+        <div className="mapTest">
+          <Profiler id="mapgl" onRender={measureTime(this)}>
+            <MapGL markers={this.state.markers}/>
+          </Profiler>
+        </div>
+
       </div>
     );
   }