Making multi layer gpx path render properly. Fixes #703

src/frontend/app/ui/gallery/blog/blog.gallery.component.ts

@@ -15,14 +15,6 @@ export class GalleryBlogComponent implements OnChanges {
 
   constructor(public blogService: BlogService) {}
 
-  get SampleText(): string {
-    if (!this.markdowns || this.markdowns.length < 1) {
-      return '';
-    }
-    return this.markdowns[0].length < 203
-      ? this.markdowns[0]
-      : this.markdowns[0].substring(0, 200) + '...';
-  }
 
   ngOnChanges(): void {
     this.loadMarkdown().catch(console.error);

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts

@@ -521,9 +521,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
     );
   }
 
-  private addArchForLongDistancePaths(parsedGPX: { name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }) {
+  private addArchForLongDistancePaths(path: LatLngLiteral[]) {
 
-    for (let i = 0; i < parsedGPX.path.length - 1; ++i) {
+    for (let i = 0; i < path.length - 1; ++i) {
       const dst = (a: LatLngLiteral, b: LatLngLiteral) => {
         return Math.sqrt(Math.pow(a.lat - b.lat, 2) +
           Math.pow(a.lng - b.lng, 2));
@@ -550,9 +550,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
         return `${a.lat.toFixed(KEY_PRECISION)},${a.lng.toFixed(KEY_PRECISION)},${b.lat.toFixed(KEY_PRECISION)},${b.lng.toFixed(KEY_PRECISION)}`;
 
       };
-      if (Math.abs(parsedGPX.path[i].lng - parsedGPX.path[i + 1].lng) > Config.Map.bendLongPathsTrigger) {
+      if (Math.abs(path[i].lng - path[i + 1].lng) > Config.Map.bendLongPathsTrigger) {
-        const s = parsedGPX.path[i];
+        const s = path[i];
-        const e = parsedGPX.path[i + 1];
+        const e = path[i + 1];
         const k = getKey(s, e);
         this.longPathSEPairs[k] = (this.longPathSEPairs[k] || 0) + 1;
         const occurrence = this.longPathSEPairs[k] - 1;
@@ -590,7 +590,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
           //   pathLayer.layer.addLayer(mkr);
         });
 
-        parsedGPX.path.splice(i + 1, 0, ...newPoints);
+        path.splice(i + 1, 0, ...newPoints);
         i += newPoints.length;
       }
     }
@@ -644,9 +644,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
         pathLayer = {layer: this.pathLayersConfigOrdered[0].layer, icon: MarkerFactory.defIcon};
       }
 
-      if (parsedGPX.path.length !== 0) {
+      if (parsedGPX.path.length !== 0 && parsedGPX.path[0].length !== 0) {
         // render the beginning of the path with a marker
-        const mkr = marker(parsedGPX.path[0]);
+        const mkr = marker(parsedGPX.path[0][0]);
         pathLayer.layer.addLayer(mkr);
 
         mkr.setIcon(pathLayer.icon);
@@ -655,16 +655,19 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
         mkr.bindPopup(file.name + ': ' + parsedGPX.name);
 
         //add arch for long paths
-        this.addArchForLongDistancePaths(parsedGPX);
+        parsedGPX.path.forEach(p => {
+          this.addArchForLongDistancePaths(p);
+          pathLayer.layer.addLayer(
+            polyline(p, {
+              smoothFactor: 3,
+              interactive: false,
+              color: pathLayer?.theme?.color,
+              dashArray: pathLayer?.theme?.dashArray
+            })
+          );
+        });
+
 
-        pathLayer.layer.addLayer(
-          polyline(parsedGPX.path, {
-            smoothFactor: 3,
-            interactive: false,
-            color: pathLayer?.theme?.color,
-            dashArray: pathLayer?.theme?.dashArray
-          })
-        );
       }
       parsedGPX.markers.forEach((mc) => {
         const mkr = marker(mc);

src/frontend/app/ui/gallery/map/map.service.ts

@@ -100,7 +100,7 @@ export class MapService {
 
   public async getMapCoordinates(
     file: FileDTO
-  ): Promise<{ name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }> {
+  ): Promise<{ name: string, path: LatLngLiteral[][]; markers: LatLngLiteral[] }> {
     const filePath = Utils.concatUrls(
       file.directory.path,
       file.directory.name,
@@ -109,8 +109,8 @@ export class MapService {
     const gpx = await this.networkService.getXML(
       '/gallery/content/' + filePath + '/bestFit'
     );
-    const getCoordinates = (tagName: string): LatLngLiteral[] => {
+    const getCoordinates = (inputElement: Document, tagName: string): LatLngLiteral[] => {
-      const elements = gpx.getElementsByTagName(tagName);
+      const elements = inputElement.getElementsByTagName(tagName);
       const ret: LatLngLiteral[] = [];
       // eslint-disable-next-line @typescript-eslint/prefer-for-of
       for (let i = 0; i < elements.length; i++) {
@@ -121,10 +121,21 @@ export class MapService {
       }
       return ret;
     };
+    const trksegs = gpx.getElementsByTagName('trkseg');
+    if (!trksegs) {
+
+      return {
+        name: gpx.getElementsByTagName('name')?.[0]?.textContent || '',
+        path: [getCoordinates(gpx, 'trkpt')],
+        markers: getCoordinates(gpx, 'wpt'),
+      };
+    }
+    const trksegArr = [].slice.call(trksegs);
     return {
       name: gpx.getElementsByTagName('name')?.[0]?.textContent || '',
-      path: getCoordinates('trkpt'),
+      path: [...trksegArr].map(t => getCoordinates(t,'trkpt')),
-      markers: getCoordinates('wpt'),
+      markers: getCoordinates(gpx, 'wpt'),
     };
   }
 }
+