leaflet test: create random markers and let them move on a random path

src/maps/Leaflet.js

@@ -57,6 +57,14 @@ export default class Leaflet extends React.Component{
 
   render() {
     const position = [this.state.latitude, this.state.longitude]
+    let markers = this.props.markers
+    if (markers){
+      markers = this.props.markers.map((pos, idx) =>
+        <Marker position={pos} key={idx}></Marker>
+      )
+    }else{
+      markers = <div></div>
+    }
     return (
       <div>
         <div className="map">
@@ -87,6 +95,9 @@ export default class Leaflet extends React.Component{
               )}
 
               <Polyline color="grey" positions={this.state.path} />
+
+              {markers}
+
           </Map>
         </div>
 

src/test/Leaflets.js

@@ -7,20 +7,80 @@ export default class Leaflets extends React.Component{
     super(props)
     this.metricsRef = React.createRef()
     this.state = {
-      noOfMaps: 100
+      markers: [],
+      markersFromTo: [],
+      noOfMaps: 1,
+      noOfMarkers: 10,
+      noOfSteps: 100,
+      currStep: 0,
     }
   }
 
+  componentDidMount() {
+    this.createRandomMarkers();
+    this.timer = setInterval(() => {
+      this.setState({currStep: this.state.currStep + 1});
+      this.calcMarkerPosition()
+    }, 10);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  createRandomMarkers = () => {
+    let latStart = 4833125
+    let lngStart = 1430784
+    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
+      markers.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
+    }
+    this.setState({markersFromTo: 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})
+  }
+
   render(){
     return (
       <div>
+      <h1>{this.state.currStep}</h1>
         <div ref={this.metricsRef} className="mapTime" >
         </div>
         <Profiler id="leaflet" onRender={measureTime(this)}>
-          { Array.from({length: this.state.noOfMaps}, (_, index) =>
-              <Leaflet key={index}/>
-          )}
+              <Leaflet markers={this.state.markers}/>
         </Profiler>
+        <button onClick={this.createRandomMarkers}>test</button>
       </div>
     );
   }