Fixes #1999 - Recording line has a jump when returning from background

IsraelHikingMap · May 8, 2024 · dccc52b · dccc52b
1 parent c73bb46
commit dccc52b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 54 deletions.
diff --git a/IsraelHiking.Web/src/application/components/map/recorded-route.component.html b/IsraelHiking.Web/src/application/components/map/recorded-route.component.html
@@ -59,8 +59,9 @@
             'icon-color': 'black'
         }">
     </mgl-layer>
-    <mgl-geojson-source id="recorded-route-start-geojson" [data]="startPointGeoJson"></mgl-geojson-source>
-    <mgl-layer id="recorded-route-start-point"
+    <mgl-geojson-source *ngIf="startPointGeoJson" id="recorded-route-start-geojson" [data]="startPointGeoJson"></mgl-geojson-source>
+    <mgl-layer *ngIf="startPointGeoJson"
+        id="recorded-route-start-point"
         type="circle"
         source="recorded-route-start-geojson"
         [paint]="{

diff --git a/IsraelHiking.Web/src/application/components/map/recorded-route.component.ts b/IsraelHiking.Web/src/application/components/map/recorded-route.component.ts
@@ -8,7 +8,7 @@ import { RouteEditPoiInteraction } from "../intercations/route-edit-poi.interact
 import { ResourcesService } from "../../services/resources.service";
 import { SpatialService } from "../../services/spatial.service";
 import { GeoLocationService } from "../../services/geo-location.service";
-import { ApplicationState, RecordedRoute } from "../../models/models";
+import { ApplicationState, LatLngAltTime, RecordedRoute } from "../../models/models";
 
 @Component({
     selector: "recorded-route",
@@ -27,8 +27,8 @@ export class RecordedRouteComponent extends BaseMapComponent {
     @Select((state: ApplicationState) => state.gpsState.currentPosition)
     public currentPosition$: Observable<Immutable<GeolocationPosition>>;
 
-    public recordedRouteSegments: GeoJSON.FeatureCollection<GeoJSON.LineString>[];
-    public lastRouteSegment: GeoJSON.FeatureCollection<GeoJSON.LineString>;
+    public recordedRouteSegments: GeoJSON.Feature<GeoJSON.LineString>[];
+    public lastRouteSegment: GeoJSON.Feature<GeoJSON.LineString>;
     public startPointGeoJson: GeoJSON.Feature<GeoJSON.Point>;
 
     private lastSplit: number;
@@ -71,63 +71,37 @@ export class RecordedRouteComponent extends BaseMapComponent {
         if (recording == null || recording.latlngs.length === 0) {
             this.recordedRouteSegments = [];
             this.lastSplit = 0;
-            this.startPointGeoJson = {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: []
-                },
-                properties: {}
-            };
+            this.startPointGeoJson = null;
             return;
         }
         const latlngs = [...recording.latlngs];
-        const currentPosition = this.store.selectSnapshot((s: ApplicationState) => s.gpsState).currentPosition;
-        if (currentPosition) {
-            // Adding current position to the end of the presented recorded line
-            latlngs.push(GeoLocationService.positionToLatLngTime(currentPosition));
-        }
-        if (this.startPointGeoJson.geometry.coordinates.length <= 0) {
-            this.startPointGeoJson = {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: SpatialService.toCoordinate(latlngs[0])
-                },
-                properties: {}
-            };
+        if (!this.startPointGeoJson) {
+            this.startPointGeoJson = SpatialService.getPointFeature(latlngs[0]);
         }
 
-        // Refresh the last segment with current data
         latlngs.splice(0, this.lastSplit);
-        const currentSegment = {
-            type: "FeatureCollection",
-            features: [{
-                type: "Feature",
-                geometry: {
-                    type: "LineString",
-                    coordinates: latlngs.map(l => SpatialService.toCoordinate(l))
-                },
-                properties: {}
-            }]
-        } as GeoJSON.FeatureCollection<GeoJSON.LineString>;
         if (recording.latlngs.length - this.lastSplit <= RecordedRouteComponent.NUMBER_OF_POINTS_IN_ROUTE_SPLIT) {
-            this.lastRouteSegment = currentSegment;
+            // Refresh the last segment with current data
+            this.lastRouteSegment = this.getFeatureFromLatLngs(latlngs, true);
         } else {
-            // In case the segment is too long, update last split point, move the current segment to the list and create an empty segment
+            // In case the segment is too long, update last split point, move the current segment to the list and create a segment with last position and current position
             this.lastSplit = recording.latlngs.length - 1;
-            this.recordedRouteSegments.push(currentSegment);
-            this.lastRouteSegment = {
-                type: "FeatureCollection",
-                features: [{
-                    type: "Feature",
-                    geometry: {
-                        type: "LineString",
-                        coordinates: []
-                    },
-                    properties: {}
-                }]
-            };
+            this.recordedRouteSegments.push(this.getFeatureFromLatLngs(latlngs, false));
+            this.lastRouteSegment = this.getFeatureFromLatLngs([latlngs[latlngs.length - 1]], true);
+        }
+    }
+
+    private getFeatureFromLatLngs(latlngs: LatLngAltTime[], withCurrentPosition: boolean): GeoJSON.Feature<GeoJSON.LineString> {
+        if (withCurrentPosition) {
+            const currentPosition = this.store.selectSnapshot((s: ApplicationState) => s.gpsState).currentPosition;    
+            if (currentPosition) {
+                // Adding current position to the end of the presented recorded line
+                latlngs.push(GeoLocationService.positionToLatLngTime(currentPosition));
+            } else {
+                // In case the current position is not available, the last point is the end of the line
+                latlngs.push(latlngs[latlngs.length - 1]);
+            }
         }
+        return SpatialService.getLineString(latlngs);
     }
 }
diff --git a/IsraelHiking.Web/src/application/services/spatial.service.ts b/IsraelHiking.Web/src/application/services/spatial.service.ts
@@ -303,11 +303,15 @@ export class SpatialService {
         };
     }
 
-    private static getLineString(latlngs: LatLngAlt[]): GeoJSON.Feature<GeoJSON.LineString> {
+    public static getLineString(latlngs: LatLngAlt[]): GeoJSON.Feature<GeoJSON.LineString> {
         const coordinates = latlngs.map(l => SpatialService.toCoordinate(l));
         return lineString(coordinates);
     }
 
+    public static getPointFeature(latlng: LatLngAlt): GeoJSON.Feature<GeoJSON.Point> {
+        return point(SpatialService.toCoordinate(latlng));
+    }
+
     public static getMapBounds(map: Map): Bounds {
         const bounds = map.getBounds();
         return SpatialService.mBBoundsToBounds(bounds);