leaftlet test: added input field to set no of markers; interval to state

src/test/Leaflets.js

@@ -1,7 +1,7 @@
 import React, {Profiler} from "react";
 import Leaflet from "./../maps/Leaflet";
 import {measureTime} from './../helpers/measureTime';
-import {CustomInput} from 'reactstrap';
+import {CustomInput, Input} from 'reactstrap';
 
 export default class Leaflets extends React.Component{
   constructor(props) {
@@ -12,9 +12,10 @@ export default class Leaflets extends React.Component{
       markers: [],
       markersFromTo: [],
       noOfMaps: 1,
-      noOfMarkers: 10,
+      noOfMarkers: 100,
       noOfSteps: 500,
       currStep: 0,
+      interval: 1,
       moveMarkers: false
     }
   }
@@ -26,7 +27,7 @@ export default class Leaflets extends React.Component{
       this.timer = setInterval(() => {
         this.setState({currStep: this.state.currStep + 1});
         this.calcMarkerPosition()
-      }, 10);
+      }, this.state.interval);
     }
   }
 
@@ -98,11 +99,19 @@ export default class Leaflets extends React.Component{
       this.timer = setInterval(() => {
         this.setState({currStep: this.state.currStep + 1});
         this.calcMarkerPosition()
-      }, 10);
+      }, this.state.interval);
     }
     this.setState({moveMarkers: !this.state.moveMarkers})
   }
 
+  setNoOfMarkers = (event) => {
+    console.log(event.target.value)
+    this.setState({noOfMarkers: event.target.value}, () =>{
+        this.metricsRef.current.innerHTML = ""
+        this.createRandomMarkers()}
+    )
+  }
+
   render(){
     return (
       <div className="mapTestContainer">
@@ -111,7 +120,9 @@ export default class Leaflets extends React.Component{
           <div ref={this.metricsRef2}>
             <span>{this.state.currStep} steps</span>
           </div>
-          <span>Number of Markers: {this.state.noOfMarkers}</span>
+          <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
+          <Input type="text" onChange={this.setNoOfMarkers} value={this.state.noOfMarkers}/>
+
           <div ref={this.metricsRef}>
           </div>
         </div>