outsource random marker functions

src/config/variables.js

@@ -9,4 +9,15 @@ export const mapHeight = 400;
 
 export const markerIcon = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
   c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
-  C20.1,15.8,20.2,15.8,20.2,15.7z`;
+  C20.1,15.8,20.2,15.8,20.2,15.7z`;
+
+export const mapTestState = {
+  markers: [],
+  markersFromTo: [],
+  noOfMaps: 1,
+  noOfMarkers: 100,
+  noOfSteps: 500,
+  currStep: 0,
+  interval: 1,
+  moveMarkers: false
+}

src/helpers/randomMarkers.js

@@ -0,0 +1,70 @@
+export function 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))
+    let latFrom = (latStart + latRandom) / 100000
+    latRandom = Math.floor((Math.random() * 1063))
+    let latTo = (latStart + latRandom) / 100000
+    let lngRandom = Math.floor((Math.random() * 2533))
+    let lngFrom = (lngStart + lngRandom) / 100000
+    lngRandom = Math.floor((Math.random() * 2533))
+    let lngTo = (lngStart + lngRandom) / 100000
+    markersFromTo.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
+    markers.push([latFrom, lngFrom])
+  }
+  this.setState({markersFromTo: markersFromTo})
+  this.setState({markers: markers})
+}
+
+
+export function calcMarkerPosition(){
+  let noOfSteps = this.state.noOfSteps
+  let currStep = this.state.currStep
+  if (parseInt(currStep/noOfSteps)%2 === 0){
+    currStep = currStep % noOfSteps
+  } else{
+    currStep = noOfSteps - (currStep % noOfSteps)
+  }
+  let markers = []
+  for (let marker of this.state.markersFromTo){
+    let latStart = marker.from[0]
+    let lngStart = marker.from[1]
+    let latEnd = marker.to[0]
+    let lngEnd = marker.to[1]
+//      markers.push([latStart, lngStart])
+//      markers.push([latEnd, lngEnd])
+    let latDiff = latEnd - latStart
+    let lngDiff = lngEnd - lngStart
+    let lat = latDiff / noOfSteps * currStep + latStart
+    let lng = lngDiff / noOfSteps * currStep + lngStart
+    markers.push([lat, lng])
+  }
+  this.setState({markers: markers})
+}
+
+
+export function changeSwitch(event){
+  if(this.state.moveMarkers){
+    clearInterval(this.timer);
+  }else{
+    this.timer = setInterval(() => {
+      this.setState({currStep: this.state.currStep + 1});
+      this.calcMarkerPosition()
+    }, this.state.interval);
+  }
+  this.setState({moveMarkers: !this.state.moveMarkers})
+}
+
+
+export function setNoOfMarkers(event){
+  this.setState(
+    {noOfMarkers: event.target.value, currStep: 0},
+    () => {
+      this.measurementsDiv.current.innerHTML = ""
+      this.createRandomMarkers()
+    }
+  )
+}

src/test/Leaflets.js

@@ -1,23 +1,25 @@
 import React, {Profiler} from "react";
 import Leaflet from "./../maps/Leaflet";
-import {measureTime} from './../helpers/measureTime';
-import {CustomInput, Input} from 'reactstrap';
+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 Leaflets extends React.Component{
   constructor(props) {
     super(props)
     this.measurementsDiv = React.createRef()
     this.markerInfoDiv = React.createRef()
-    this.state = {
-      markers: [],
-      markersFromTo: [],
-      noOfMaps: 1,
-      noOfMarkers: 100,
-      noOfSteps: 500,
-      currStep: 0,
-      interval: 1,
-      moveMarkers: false
-    }
+    this.state = mapTestState
+    this.createRandomMarkers = createRandomMarkers.bind(this)
+    this.calcMarkerPosition = calcMarkerPosition.bind(this)
+    this.changeSwitch = changeSwitch.bind(this)
+    this.setNoOfMarkers = setNoOfMarkers.bind(this)
   }
 
   componentDidMount() {
@@ -46,72 +48,6 @@ export default class Leaflets extends React.Component{
     clearInterval(this.timer);
   }
 
-  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))
-      let latFrom = (latStart + latRandom) / 100000
-      latRandom = Math.floor((Math.random() * 1063))
-      let latTo = (latStart + latRandom) / 100000
-      let lngRandom = Math.floor((Math.random() * 2533))
-      let lngFrom = (lngStart + lngRandom) / 100000
-      lngRandom = Math.floor((Math.random() * 2533))
-      let lngTo = (lngStart + lngRandom) / 100000
-      markersFromTo.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
-      markers.push([latFrom, lngFrom])
-    }
-    this.setState({markersFromTo: markersFromTo})
-    this.setState({markers: markers})
-  }
-
-  calcMarkerPosition = () => {
-    let noOfSteps = this.state.noOfSteps
-    let currStep = this.state.currStep
-    if (parseInt(currStep/noOfSteps)%2 === 0){
-      currStep = currStep % noOfSteps
-    } else{
-      currStep = noOfSteps - (currStep % noOfSteps)
-    }
-    let markers = []
-    for (let marker of this.state.markersFromTo){
-      let latStart = marker.from[0]
-      let lngStart = marker.from[1]
-      let latEnd = marker.to[0]
-      let lngEnd = marker.to[1]
-//      markers.push([latStart, lngStart])
-//      markers.push([latEnd, lngEnd])
-      let latDiff = latEnd - latStart
-      let lngDiff = lngEnd - lngStart
-      let lat = latDiff / noOfSteps * currStep + latStart
-      let lng = lngDiff / noOfSteps * currStep + lngStart
-      markers.push([lat, lng])
-    }
-    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()
-      }, 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">