add test pages

src/App.js

@@ -14,7 +14,10 @@ import Google from './Google';
 import Mapbox from './Mapbox';
 
 import Pigeons from './test/Pigeons';
+import MapGLs from './test/MapGLs';
 import Leaflets from './test/Leaflets';
+import Googles from './test/Googles';
+import Mapboxes from './test/Mapboxes';
 
 import {calcDistance} from './helpers/distance';
 import {longitude, latitude} from "./config/variables";
@@ -72,6 +75,7 @@ export class App extends React.Component{
               <Route path="/leaflet/test" exact component={Leaflets} />
 
               <Route path="/google-map" exact component={Google} />
+              <Route path="/google-map/test" exact component={Googles} />
 
               <Route path="/mapbox" exact component={Mapbox} />
               <Route path="/mapbox/test" exact component={Mapboxes} />

src/config/navLinks.js

@@ -41,6 +41,10 @@
       name: "Google Map",
       url: "/google-map",
       sublinks: [
+        {
+          name: "Google Map Test",
+          url: "/google-map/test"
+        }
       ]
     },
   ];

src/css/maps.css

@@ -3,6 +3,7 @@
 }
 
 .map{
+  clear: both;
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
@@ -10,6 +11,7 @@
 
 .mapInfo{
   float: left;
+  margin-bottom: 30px;
 }
 
 .controllers{  
@@ -26,3 +28,6 @@
   display: none;
 }
 
+.metrics{
+  float: right;
+}

src/helpers/measureTime.js

@@ -0,0 +1,12 @@
+  export const measureTime = (self) => {
+    return (profilerId, mode, actualTime, baseTime, startTime, commitTime) => {
+      console.log({profilerId, mode, actualTime, baseTime, startTime, commitTime});
+      self.metricsRef.current.innerHTML = `
+            Mode: ${mode}<br/>
+            Actual Time: ${actualTime}<br/>
+            Base Time: ${baseTime}<br/>
+            Start Time: ${startTime}<br/>
+            Commit Time: ${commitTime}
+            `
+    }
+  }

src/test/Googles.js

@@ -0,0 +1,24 @@
+import React, {Profiler} from "react";
+import Google from "./../Google";
+import {measureTime} from './../helpers/measureTime';
+                                  
+export default class Googles extends React.Component{
+  constructor(props) {
+    super(props)
+    this.metricsRef = React.createRef()
+  }
+
+  render(){
+    return (
+      <div>
+        <div ref={this.metricsRef} className="mapTime" >
+        </div>
+        <Profiler id="google" onRender={measureTime(this)}>
+          { Array.from({length:30}, (_, index) => 
+              <Google key={index}/>
+          )}
+        </Profiler>
+      </div>
+    );
+  }
+} 

src/test/Leaflets.js

@@ -0,0 +1,24 @@
+import React, {Profiler} from "react";
+import Leaflet from "./../Leaflet";
+import {measureTime} from './../helpers/measureTime';
+                                  
+export default class Leaflets extends React.Component{
+  constructor(props) {
+    super(props)
+    this.metricsRef = React.createRef()
+  }
+
+  render(){
+    return (
+      <div>
+        <div ref={this.metricsRef} className="mapTime" >
+        </div>
+        <Profiler id="leaflet" onRender={measureTime(this)}>
+          { Array.from({length:30}, (_, index) => 
+              <Leaflet key={index}/>
+          )}
+        </Profiler>
+      </div>
+    );
+  }
+} 

src/test/MapGLs.js

@@ -0,0 +1,25 @@
+import React, {Profiler} from "react";
+import MapGL from "./../MapGL";
+import {measureTime} from './../helpers/measureTime';
+
+
+export default class MapGLs extends React.Component{
+  constructor(props) {
+    super(props)
+    this.metricsRef = React.createRef()
+  }
+
+  render(){
+    return (
+      <div>
+        <div ref={this.metricsRef} className="mapTime" >
+        </div>
+        <Profiler id="mapgl" onRender={measureTime(this)}>
+          { Array.from({length:30}, (_, index) => 
+              <MapGL key={index} />
+          )}
+        </Profiler>
+      </div>
+    );
+  }
+} 

src/test/Mapboxes.js

@@ -0,0 +1,24 @@
+import React, {Profiler} from "react";
+import Mapbox from "./../Mapbox";
+import {measureTime} from './../helpers/measureTime';
+                                  
+export default class MapGLs extends React.Component{
+  constructor(props) {
+    super(props)
+    this.metricsRef = React.createRef()
+  }
+
+  render(){
+    return (
+      <div>
+        <div ref={this.metricsRef} className="mapTime" >
+        </div>
+        <Profiler id="mapbox" onRender={measureTime(this)}>
+          { Array.from({length:30}, (_, index) => 
+              <Mapbox key={index}/>
+          )}
+        </Profiler>
+      </div>
+    );
+  }
+} 

src/test/Pigeons.js

@@ -0,0 +1,56 @@
+import React, {Profiler} from "react";
+import Pigeon from "./../Pigeon";
+
+import {calcDistance} from './../helpers/distance';
+import {measureTime} from './../helpers/measureTime';
+import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
+
+                                  
+export default class Pigeons extends React.Component{
+  constructor(props) {
+    super(props)
+    this.metricsRef = React.createRef()
+
+    this.state = {
+      mapConfig: {
+        zoom: 15,
+        path: [],
+        coords: [latitude, longitude],
+        width: mapWidth,
+        height: mapHeight,
+        defaultZoom: 15,
+        distance: 0,
+      }
+    }
+  }
+
+  updateMapState = (key, value) => {
+    let mapConfigCopy = JSON.parse(JSON.stringify(this.state.mapConfig));
+    mapConfigCopy[key] = value;
+    this.setState({mapConfig: mapConfigCopy})
+  }
+
+  getDistance = () => {
+    let dst = calcDistance(this.state.mapConfig.path)
+    this.updateMapState("distance", dst)
+  }
+
+  render(){
+    return (
+      <div>
+        <div ref={this.metricsRef} className="mapTime" >
+        </div>
+        <div>
+          <Profiler id="pigeons" onRender={measureTime(this)}>
+            { Array.from({length:200}, (_, index) => <Pigeon
+              mapConfig={this.state.mapConfig}
+              updateMapState={this.updateMapState}
+              getDistance={this.getDistance}
+              key={index}
+            />) }
+          </Profiler>
+        </div>
+      </div>
+    );
+  }
+}