mapbox test: moving markers

src/helpers/randomMarkers.js

@@ -1,4 +1,4 @@
-export function createRandomMarkers(){
+export function createRandomMarkers(switchLatLng=false){
   let latStart = 4833125
   let lngStart = 1430784
   let markersFromTo = []
@@ -12,8 +12,13 @@ export function createRandomMarkers(){
     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])
+    if(switchLatLng){
+      markersFromTo.push({from: [lngFrom, latFrom], to: [lngTo, latTo]})
+      markers.push([lngFrom, latFrom])
+    }else{
+      markersFromTo.push({from: [latFrom, lngFrom], to: [latTo, lngTo]})
+      markers.push([latFrom, lngFrom])
+    }
   }
   this.setState({markersFromTo: markersFromTo})
   this.setState({markers: markers})
@@ -59,12 +64,12 @@ export function changeSwitch(event){
 }
 
 
-export function setNoOfMarkers(event){
+export function setNoOfMarkers(event, switchLatLng=false){
   this.setState(
     {noOfMarkers: event.target.value, currStep: 0},
     () => {
       this.measurementsDiv.current.innerHTML = ""
-      this.createRandomMarkers()
+      this.createRandomMarkers(switchLatLng)
     }
   )
 }

src/maps/Mapbox.js

@@ -5,13 +5,16 @@ import ReactMapboxGl, {
     ZoomControl,
     ScaleControl,
     RotationControl,
+    Source,
+    Marker,
 } from "react-mapbox-gl";
 import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
-import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
+import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
 import {Button} from "reactstrap";
 import {getRoute} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
+import {GeoJSONLayer} from "react-mapbox-gl";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
 
@@ -21,7 +24,7 @@ export default class Mapbox extends React.Component{
     this.state = {
       latitude: latitude,
       longitude: longitude,
-      zoom: [15],
+      zoom: [14],
       path: [[longitude, latitude], [longitude+0.003, latitude]],
       distance: 0,
       center: [longitude, latitude]
@@ -63,6 +66,32 @@ export default class Mapbox extends React.Component{
   }
 
   render() {
+    let testMarkers = this.props.markers
+    let markers = <></>
+    if (testMarkers){
+      markers = testMarkers.map((pos, idx) =>
+        <Feature
+          coordinates={pos}
+          key={idx}
+        />
+//        <Marker
+//          coordinates={pos}
+//          key={idx}
+//          anchor="bottom">
+//          <img src={markerIcon}/>
+//        </Marker>
+      )
+    }else{
+      markers = this.state.path.map((pos, idx) =>
+        <Feature
+          coordinates={pos}
+          key={idx}
+          draggable={true}
+          onDragEnd={(e) => this.updateMarker(idx, e)}
+        />
+      )
+    }
+
     return (
       <div>
         <div className="map">
@@ -76,15 +105,42 @@ export default class Mapbox extends React.Component{
             zoom={this.state.zoom}
             onClick={(e, c) => this.addMarker(e, c)}
           >
+
+            {/*<Layer type="line" layout={{'line-join': 'round', 'line-cap': 'round'}}
+  paint={{"line-color": "#888", "line-width": 3}}
+                source="routeSource"
+              id="routeSource"
+              type="line"
+  data={{type: "LineString", coordinates: this.state.path}}
+>
+    <Feature
+              source="routeSource"
+              id="route"
+              type="line"
+      data={{type: "line", coordinates: this.state.path}}
+      paint={{"line-color": "#888", "line-width": 3}}
+              layout= {{"line-join": "round", "line-cap": "round"}}
+    />
+</Layer>*/}
+
+          <Source
+            id="routeSource"
+            type="geojson"
+            data={{type: "LineString", coordinates: this.state.path}}
+          >
+            <Layer
+              source="routeSource"
+              id="route"
+              type="line"
+              paint={{"line-color": "#888", "line-width": 3}}
+              layout= {{"line-join": "round", "line-cap": "round"}}
+            />
+          </Source>
+
             <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
-              {this.state.path.map((pos, idx) =>
-                <Feature
-                  coordinates={pos}
-                  key={idx} draggable={true}
-                  onDragEnd={(e) => this.updateMarker(idx, e)}
-                />
-              )}
+              {markers}
             </Layer>
+
             <ZoomControl position={"top-right"}/>
             <ScaleControl position={"bottom-right"}/>
             <RotationControl position={"top-right"}/>

src/test/Mapboxes.js

@@ -1,26 +1,77 @@
 import React, {Profiler} from "react";
 import Mapbox from "./../maps/Mapbox";
 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 MapGLs extends React.Component{
   constructor(props) {
     super(props)
-    this.metricsRef = React.createRef()
-    this.state = {
-      noOfMaps: 100
+    this.state = mapTestState
+
+    this.measurementsDiv = React.createRef()
+    this.markerInfoDiv = React.createRef()
+
+    this.createRandomMarkers = createRandomMarkers.bind(this)
+    this.calcMarkerPosition = calcMarkerPosition.bind(this)
+    this.changeSwitch = changeSwitch.bind(this)
+    this.setNoOfMarkers = setNoOfMarkers.bind(this)
+  }
+
+  componentDidMount() {
+    this.createRandomMarkers(true);
+    this.setState({startTime: performance.now()});
+    if(this.state.moveMarkers){
+      this.timer = setInterval(() => {
+        this.setState({currStep: this.state.currStep + 1});
+        this.calcMarkerPosition()
+      }, this.state.interval);
+    }
+  }
+
+  componentDidUpdate() {
+    if(this.state.currStep===this.state.noOfSteps){
+      let endTime = performance.now();
+      let duration = endTime - this.state.startTime
+      let msg = "Duration " + duration.toFixed(3) + " for " + this.state.noOfSteps + " steps"
+      console.log(msg)
+      this.markerInfoDiv.current.innerHTML = msg
+      this.setState({currStep: this.state.currStep + 1});
     }
   }
 
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
   render(){
     return (
-      <div>
-        <div ref={this.metricsRef} className="mapTime" >
+      <div className="mapTestContainer">
+
+        <div className="mapTime">
+          <CustomInput type="switch" onChange={this.changeSwitch} id="exampleCustomSwitch" name="customSwitch" label="Move markers" />
+          <div ref={this.markerInfoDiv}>
+            <span>{this.state.currStep} steps</span>
+          </div>
+          <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
+          <Input type="text" onChange={(e) => this.setNoOfMarkers(e, true)} value={this.state.noOfMarkers}/>
+
+          <div ref={this.measurementsDiv}>
+          </div>
         </div>
-        <Profiler id="mapbox" onRender={measureTime(this)}>
-          { Array.from({length: this.state.noOfMaps}, (_, index) =>
-              <Mapbox key={index}/>
-          )}
-        </Profiler>
+
+        <div className="mapTest">
+          <Profiler id="mapbox" onRender={measureTime(this)}>
+            <Mapbox markers={this.state.markers}/>
+          </Profiler>
+        </div>
+
       </div>
     );
   }