leaflet test: small changes

src/helpers/distance.js

@@ -1,6 +1,9 @@
   export const calcDistance = (path) => {
     let distance = 0;
     for(let i=0; i<path.length-1; i++) {
+      if (path[i]===undefined | path[i+1]===undefined){
+        continue
+      }
       var radlat1 = Math.PI * path[i][0]/180;
       var radlat2 = Math.PI * path[i+1][0]/180;
       var theta = path[i][1]-path[i+1][1];

src/maps/Leaflet.js

@@ -9,8 +9,8 @@ import {
 } from "react-leaflet";
 import "./../css/maps.css";
 import {calcDistance} from "./../helpers/distance";
-import {longitude, latitude, mapWidth, mapHeight, testPath} from "./../config/variables";
-import {Button, Input} from "reactstrap";
+import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
+import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
 
 export default class Leaflet extends React.Component{
@@ -57,14 +57,27 @@ export default class Leaflet extends React.Component{
 
   render() {
     const position = [this.state.latitude, this.state.longitude]
-    let markers = this.props.markers
-    if (markers){
+    let testMarkers = this.props.markers
+    let markers = <></>
+    if (testMarkers){
       markers = this.props.markers.map((pos, idx) =>
         <Marker position={pos} key={idx}></Marker>
       )
     }else{
-      markers = <div></div>
+      markers = this.state.path.map((pos, idx) =>
+        <Marker
+          position={pos}
+          draggable
+          key={idx}
+          onDragend={(e) => this.updateMarker(idx, e)}
+        >
+          <Popup>
+            {idx}
+          </Popup>
+        </Marker>
+      )
     }
+
     return (
       <div>
         <div className="map">
@@ -81,19 +94,6 @@ export default class Leaflet extends React.Component{
               />
               <ZoomControl position="bottomright" />
 
-              {this.state.path.map((pos, idx) =>
-                <Marker
-                  position={pos}
-                  draggable
-                  key={idx}
-                  onDragend={(e) => this.updateMarker(idx, e)}
-                >
-                  <Popup>
-                    {idx}
-                  </Popup>
-                </Marker>
-              )}
-
               <Polyline color="grey" positions={this.state.path} />
 
               {markers}

src/test/Leaflets.js

@@ -13,9 +13,11 @@ import {mapTestState} from "./../config/variables"
 export default class Leaflets extends React.Component{
   constructor(props) {
     super(props)
+    this.state = mapTestState
+
     this.measurementsDiv = React.createRef()
     this.markerInfoDiv = React.createRef()
-    this.state = mapTestState
+
     this.createRandomMarkers = createRandomMarkers.bind(this)
     this.calcMarkerPosition = calcMarkerPosition.bind(this)
     this.changeSwitch = changeSwitch.bind(this)
@@ -62,6 +64,7 @@ export default class Leaflets extends React.Component{
           <div ref={this.measurementsDiv}>
           </div>
         </div>
+
         <div className="mapTest">
           <Profiler id="leaflet" onRender={measureTime(this)}>
             <Leaflet markers={this.state.markers}/>