leaflet test: switch moving markers on/off; draw start markers on mount to measure; some styling

src/css/maps.css

@@ -14,6 +14,19 @@
   margin-bottom: 30px;
 }
 
+.mapTestContainer{
+  display: flex;
+}
+
+.mapTime{
+  order: 2;
+}
+
+.mapTest{
+  order: 1;
+  max-width: 620px;
+}
+
 .form-control{
   display: inline;
   width: auto;

src/helpers/measureTime.js

@@ -1,15 +1,18 @@
   export const measureTime = (self) => {
     return (profilerId, mode, actualTime, baseTime, startTime, commitTime) => {
-      if(mode==="mount"){
-        console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
-        self.metricsRef.current.innerHTML = `
+//      if(mode==="mount"){
+//        console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
+      let prevContent = self.metricsRef.current.innerHTML
+      self.metricsRef.current.innerHTML = `
+          ${prevContent}<br/>
           Mode: ${mode}<br/>
-          Number of Markers: ${self.state.noOfMarkers}<br/>
-          Actual Time: ${actualTime}<br/>
-          Base Time: ${baseTime}<br/>
-          Start Time: ${startTime}<br/>
-          Commit Time: ${commitTime}
+          Actual Time: ${actualTime.toFixed(3)} ms<br/>
+          ------------------------
           `
+//          <br/>
+//          Base Time: ${baseTime}<br/>
+//          Start Time: ${startTime}<br/>
+//          Commit Time: ${commitTime}
       }
-    }
+//    }
   }

src/maps/Leaflet.js

@@ -20,7 +20,7 @@ export default class Leaflet extends React.Component{
       latitude: latitude,
       longitude: longitude,
       zoom: 15,
-      path: testPath,
+      path: [],
       distance: 0,
     }
   }

src/test/Leaflets.js

@@ -1,6 +1,7 @@
 import React, {Profiler} from "react";
 import Leaflet from "./../maps/Leaflet";
 import {measureTime} from './../helpers/measureTime';
+import {CustomInput} from 'reactstrap';
 
 export default class Leaflets extends React.Component{
   constructor(props) {
@@ -14,23 +15,26 @@ export default class Leaflets extends React.Component{
       noOfMarkers: 10,
       noOfSteps: 500,
       currStep: 0,
+      moveMarkers: false
     }
   }
 
   componentDidMount() {
     this.createRandomMarkers();
     this.setState({startTime: performance.now()});
-    this.timer = setInterval(() => {
-      this.setState({currStep: this.state.currStep + 1});
-      this.calcMarkerPosition()
-    }, 10);
+    if(this.state.moveMarkers){
+      this.timer = setInterval(() => {
+        this.setState({currStep: this.state.currStep + 1});
+        this.calcMarkerPosition()
+      }, 10);
+    }
   }
 
   componentDidUpdate() {
     if(this.state.currStep===this.state.noOfSteps){
       let endTime = performance.now();
       let duration = endTime - this.state.startTime
-      let msg = "Duration " + duration + " for " + this.state.noOfSteps + " steps"
+      let msg = "Duration " + duration.toFixed(3) + " for " + this.state.noOfSteps + " steps"
       console.log(msg)
       this.metricsRef2.current.innerHTML = msg
       this.setState({currStep: this.state.currStep + 1});
@@ -44,6 +48,7 @@ export default class Leaflets extends React.Component{
   createRandomMarkers = () => {
     let latStart = 4833125
     let lngStart = 1430784
+    let markersFromTo = []
     let markers = []
     for (let i=0; i<this.state.noOfMarkers; i++) {
       let latRandom = Math.floor((Math.random() * 1063))
@@ -54,9 +59,11 @@ export default class Leaflets extends React.Component{
       let lngFrom = (lngStart + lngRandom) / 100000
       lngRandom = Math.floor((Math.random() * 2533))
       let lngTo = (lngStart + lngRandom) / 100000
-      markers.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
+      markersFromTo.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
+      markers.push([latFrom, lngFrom])
     }
-    this.setState({markersFromTo: markers})
+    this.setState({markersFromTo: markersFromTo})
+    this.setState({markers: markers})
   }
 
   calcMarkerPosition = () => {
@@ -84,18 +91,35 @@ export default class Leaflets extends React.Component{
     this.setState({markers: markers})
   }
 
+  changeSwitch = (event) => {
+    if(this.state.moveMarkers){
+      clearInterval(this.timer);
+    }else{
+      this.timer = setInterval(() => {
+        this.setState({currStep: this.state.currStep + 1});
+        this.calcMarkerPosition()
+      }, 10);
+    }
+    this.setState({moveMarkers: !this.state.moveMarkers})
+  }
+
   render(){
     return (
-      <div>
-        <h1>{this.state.currStep}</h1>
-        <div ref={this.metricsRef2} className="mapTime">
+      <div className="mapTestContainer">
+        <div className="mapTime">
+          <CustomInput type="switch" onChange={this.changeSwitch} id="exampleCustomSwitch" name="customSwitch" label="Move markers" />
+          <div ref={this.metricsRef2}>
+            <span>{this.state.currStep} steps</span>
+          </div>
+          <span>Number of Markers: {this.state.noOfMarkers}</span>
+          <div ref={this.metricsRef}>
+          </div>
         </div>
-        <div ref={this.metricsRef} className="mapTime">
+        <div className="mapTest">
+          <Profiler id="leaflet" onRender={measureTime(this)}>
+            <Leaflet markers={this.state.markers}/>
+          </Profiler>
         </div>
-        <Profiler id="leaflet" onRender={measureTime(this)}>
-          <Leaflet markers={this.state.markers}/>
-        </Profiler>
-        <button onClick={this.createRandomMarkers}>test</button>
       </div>
     );
   }