From ac4a85491707c33db5dd1de4df12b4d85261b4ad Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Sun, 6 Mar 2022 22:04:59 +0100 Subject: [PATCH 1/9] Add getMapPoints() and MapPoints for GPX waypoints Store waypoints from GPX files' tags into MapPoints, while track points remain in MapPath. --- .../app/ui/gallery/map/map.service.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/frontend/app/ui/gallery/map/map.service.ts b/src/frontend/app/ui/gallery/map/map.service.ts index 4e98aba2..b84d562c 100644 --- a/src/frontend/app/ui/gallery/map/map.service.ts +++ b/src/frontend/app/ui/gallery/map/map.service.ts @@ -84,6 +84,23 @@ export class MapService { } return points; } + + // Waypoints from GPX files: + public async getMapPoints(file: FileDTO): Promise { + const filePath = Utils.concatUrls(file.directory.path, file.directory.name, file.name); + const gpx = await this.networkService.getXML('/gallery/content/' + filePath); + const elements = gpx.getElementsByTagName('wpt'); + const wpoints: MapPoints[] = []; + // tslint:disable-next-line:prefer-for-of + for (let i = 0; i < elements.length; i++) { + wpoints.push({ + lat: parseFloat(elements[i].getAttribute('lat')), + lng: parseFloat(elements[i].getAttribute('lon')) + }); + } + console.log('From file ' + filePath + ', wpoints=' + JSON.stringify(wpoints)); + return wpoints; + } } @@ -92,3 +109,8 @@ export interface MapPath { lat: number; lng: number; } + +export interface MapPoints { + lat: number; + lng: number; +} From 7008bc9246e8dca9b36d59abdedf0c7c0ca2d57b Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Sun, 6 Mar 2022 22:16:23 +0100 Subject: [PATCH 2/9] Plot markers for wpoints from MapPoints In addition to path from getMapPath(), get wpoints from getMapPoints() and plot them on the marker layer. Somehow the for loop `wpoints_loop` tends to continue infinitely, forcing stop with `break wpoints_loop` for now. --- .../lightbox.map.gallery.component.ts | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index e207860d..5d599fc5 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -387,14 +387,32 @@ export class GalleryMapLightboxComponent implements OnChanges { for (let i = 0; i < this.gpxFiles.length; i++) { const file = this.gpxFiles[i]; const path = await this.mapService.getMapPath(file); + const wpoints = await this.mapService.getMapPoints(file); if (file !== this.gpxFiles[i]) { // check race condition return; } - if (path.length === 0) { - continue; + if (path.length !== 0) { + this.mapLayersControlOption.overlays.Paths.addLayer(marker(path[0] as LatLng)); + this.mapLayersControlOption.overlays.Paths.addLayer(polyline(path as LatLng[])); + // console.log('Trk path is not empty, in file ' + i + ', path[0]=' + JSON.stringify(path[0])); + // continue; + } else { + // console.log('No trk path in file ' + i); + // continue; + } + if (wpoints.length !== 0) { + // console.log('Wpt exist in file ' + i + ', wpoints[0]=' + JSON.stringify(wpoints[0]) +', wpoints.length=' + wpoints.length); + wpoints_loop: for (let wpt_i = 0; i < wpoints.length; wpt_i++) { + // console.log('item number ' + wpt_i + ' out of ' + wpoints.length + ', coord=' + JSON.stringify(wpoints[wpt_i])); + if (wpoints[wpt_i] === undefined) { + break wpoints_loop; + } + this.mapLayersControlOption.overlays.Paths.addLayer(marker(wpoints[wpt_i] as LatLng)); + } + // console.log('Wpoints plotted.'); + } else { + // console.log('No wpt points in file ' + i); } - this.mapLayersControlOption.overlays.Paths.addLayer(marker(path[0] as LatLng)); - this.mapLayersControlOption.overlays.Paths.addLayer(polyline(path as LatLng[])); } } } From 07a1d99e692fcd0a020869b70228ff25e701c791 Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Sun, 6 Mar 2022 22:28:07 +0100 Subject: [PATCH 3/9] Added gpx file with one single WPT For testing displaying wpt markers on the gallery map --- demo/images/emptydirectory/unique_wpt.gpx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 demo/images/emptydirectory/unique_wpt.gpx diff --git a/demo/images/emptydirectory/unique_wpt.gpx b/demo/images/emptydirectory/unique_wpt.gpx new file mode 100644 index 00000000..6f095568 --- /dev/null +++ b/demo/images/emptydirectory/unique_wpt.gpx @@ -0,0 +1,15 @@ + + + + favourites + + + + Location name + + special_star + circle + #eecc22 + + + From 52d34979b1595c59fc723e7335e6ca955a32c313 Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Sun, 6 Mar 2022 22:31:15 +0100 Subject: [PATCH 4/9] Added example GPX file with 3 wpt For testing of wpt markers from GPX file --- .../subdirectory/gpx_3locations.gpx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 demo/images/its a along directory name. with special caracters(_.-.,-.,) 1234 56789 űáéú őóüö/subdirectory/gpx_3locations.gpx diff --git a/demo/images/its a along directory name. with special caracters(_.-.,-.,) 1234 56789 űáéú őóüö/subdirectory/gpx_3locations.gpx b/demo/images/its a along directory name. with special caracters(_.-.,-.,) 1234 56789 űáéú őóüö/subdirectory/gpx_3locations.gpx new file mode 100644 index 00000000..e2b78c61 --- /dev/null +++ b/demo/images/its a along directory name. with special caracters(_.-.,-.,) 1234 56789 űáéú őóüö/subdirectory/gpx_3locations.gpx @@ -0,0 +1,35 @@ + + + + favourites + + + + Location 1 + + special_star + circle + #eecc22 + + + + + Location 2 + + Street 1, Town + special_star + circle + #eecc22 + + + + + Location 3 + + Street 2, Town + special_star + circle + #eecc22 + + + From 7928a07230f5f9187e1d5269938db77faa3512ea Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Wed, 9 Mar 2022 16:31:54 +0100 Subject: [PATCH 5/9] Refactored getMapPoints and getMapPath into getMapCoordinates Added argument tagname to getMapCoordinates() to accept 'trkpt' or 'wpt'; replaced interfaces MapPoints and MapPath with MapCoordinates. --- .../app/ui/gallery/map/map.service.ts | 31 +++---------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/map.service.ts b/src/frontend/app/ui/gallery/map/map.service.ts index b84d562c..84720e16 100644 --- a/src/frontend/app/ui/gallery/map/map.service.ts +++ b/src/frontend/app/ui/gallery/map/map.service.ts @@ -70,11 +70,11 @@ export class MapService { } - public async getMapPath(file: FileDTO): Promise { + public async getMapCoordinates(file: FileDTO, tagname: string): Promise { const filePath = Utils.concatUrls(file.directory.path, file.directory.name, file.name); const gpx = await this.networkService.getXML('/gallery/content/' + filePath); - const elements = gpx.getElementsByTagName('trkpt'); - const points: MapPath[] = []; + const elements = gpx.getElementsByTagName(tagname); + const points: MapCoordinates[] = []; // tslint:disable-next-line:prefer-for-of for (let i = 0; i < elements.length; i++) { points.push({ @@ -84,33 +84,10 @@ export class MapService { } return points; } - - // Waypoints from GPX files: - public async getMapPoints(file: FileDTO): Promise { - const filePath = Utils.concatUrls(file.directory.path, file.directory.name, file.name); - const gpx = await this.networkService.getXML('/gallery/content/' + filePath); - const elements = gpx.getElementsByTagName('wpt'); - const wpoints: MapPoints[] = []; - // tslint:disable-next-line:prefer-for-of - for (let i = 0; i < elements.length; i++) { - wpoints.push({ - lat: parseFloat(elements[i].getAttribute('lat')), - lng: parseFloat(elements[i].getAttribute('lon')) - }); - } - console.log('From file ' + filePath + ', wpoints=' + JSON.stringify(wpoints)); - return wpoints; - } - } -export interface MapPath { - lat: number; - lng: number; -} - -export interface MapPoints { +export interface MapCoordinates { lat: number; lng: number; } From ffa5ed687d5f3c0809f3c591b66796bc62408d0d Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Wed, 9 Mar 2022 16:34:57 +0100 Subject: [PATCH 6/9] Replaced getMapPoints() and getMapPath() with getMapCoordinates() Passing 'trkpt' or 'wpt' to getMapCoordinates() to handle both paths and waypoints from GPX files. --- .../gallery/map/lightbox/lightbox.map.gallery.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index 5d599fc5..7981135d 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -386,8 +386,8 @@ export class GalleryMapLightboxComponent implements OnChanges { // tslint:disable-next-line:prefer-for-of for (let i = 0; i < this.gpxFiles.length; i++) { const file = this.gpxFiles[i]; - const path = await this.mapService.getMapPath(file); - const wpoints = await this.mapService.getMapPoints(file); + const path = await this.mapService.getMapCoordinates(file,'trkpt'); + const wpoints = await this.mapService.getMapCoordinates(file,'wpt'); if (file !== this.gpxFiles[i]) { // check race condition return; } @@ -395,10 +395,8 @@ export class GalleryMapLightboxComponent implements OnChanges { this.mapLayersControlOption.overlays.Paths.addLayer(marker(path[0] as LatLng)); this.mapLayersControlOption.overlays.Paths.addLayer(polyline(path as LatLng[])); // console.log('Trk path is not empty, in file ' + i + ', path[0]=' + JSON.stringify(path[0])); - // continue; } else { // console.log('No trk path in file ' + i); - // continue; } if (wpoints.length !== 0) { // console.log('Wpt exist in file ' + i + ', wpoints[0]=' + JSON.stringify(wpoints[0]) +', wpoints.length=' + wpoints.length); From 5e56561576c8b232708c2453b4ab577380d02aec Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Wed, 9 Mar 2022 20:40:52 +0100 Subject: [PATCH 7/9] Refactor loadGPXfiles() Retrieve directly [path,wpoints] from getMapCoordinates[][] --- .../ui/gallery/map/lightbox/lightbox.map.gallery.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index 7981135d..6df38c46 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -386,8 +386,7 @@ export class GalleryMapLightboxComponent implements OnChanges { // tslint:disable-next-line:prefer-for-of for (let i = 0; i < this.gpxFiles.length; i++) { const file = this.gpxFiles[i]; - const path = await this.mapService.getMapCoordinates(file,'trkpt'); - const wpoints = await this.mapService.getMapCoordinates(file,'wpt'); + const [path,wpoints] = await this.mapService.getMapCoordinates(file); if (file !== this.gpxFiles[i]) { // check race condition return; } From f1a5c6c0ee660256ad9fe09c9e241f8571aa9cee Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Wed, 9 Mar 2022 20:44:37 +0100 Subject: [PATCH 8/9] Refactor getMapCoordinates Removed input parameter tagname, hardcoded instead the array tagnames=['trkpt,'wpt'] , and iterated through this array to get elements from the XML file at once and gather them in coordinates[ ] = [ track_path_points[ ], wpoints_points[ ] ]. --- .../app/ui/gallery/map/map.service.ts | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/map.service.ts b/src/frontend/app/ui/gallery/map/map.service.ts index 84720e16..476cc5c1 100644 --- a/src/frontend/app/ui/gallery/map/map.service.ts +++ b/src/frontend/app/ui/gallery/map/map.service.ts @@ -70,19 +70,24 @@ export class MapService { } - public async getMapCoordinates(file: FileDTO, tagname: string): Promise { + public async getMapCoordinates(file: FileDTO): Promise { const filePath = Utils.concatUrls(file.directory.path, file.directory.name, file.name); const gpx = await this.networkService.getXML('/gallery/content/' + filePath); - const elements = gpx.getElementsByTagName(tagname); - const points: MapCoordinates[] = []; - // tslint:disable-next-line:prefer-for-of - for (let i = 0; i < elements.length; i++) { - points.push({ - lat: parseFloat(elements[i].getAttribute('lat')), - lng: parseFloat(elements[i].getAttribute('lon')) - }); - } - return points; + const tagnames=['trkpt','wpt']; + var coordinates: MapCoordinates[][]=[]; + tagnames.forEach(function (item, index) { + const elements=gpx.getElementsByTagName(item); + const points: MapCoordinates[] = []; + // tslint:disable-next-line:prefer-for-of + for (let i = 0; i < elements.length; i++) { + points.push({ + lat: parseFloat(elements[i].getAttribute('lat')), + lng: parseFloat(elements[i].getAttribute('lon')) + }); + } + coordinates[index]=points; + }) + return coordinates; } } From 92f346b1ca3edab38697b1de7722c2a2f35dbbf9 Mon Sep 17 00:00:00 2001 From: zigmhount <58641590+zigmhount@users.noreply.github.com> Date: Fri, 11 Mar 2022 22:49:56 +0100 Subject: [PATCH 9/9] Cleaned up Removed unnecessary comments; replaced `break wpoints_loop` with `continue wpoints_loop` which caused infinite loops, let's see if it still happens and if I can fix it... --- .../map/lightbox/lightbox.map.gallery.component.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index 6df38c46..0b983a5f 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -386,6 +386,7 @@ export class GalleryMapLightboxComponent implements OnChanges { // tslint:disable-next-line:prefer-for-of for (let i = 0; i < this.gpxFiles.length; i++) { const file = this.gpxFiles[i]; + // get items into path[] and items into wpoints[] const [path,wpoints] = await this.mapService.getMapCoordinates(file); if (file !== this.gpxFiles[i]) { // check race condition return; @@ -393,22 +394,14 @@ export class GalleryMapLightboxComponent implements OnChanges { if (path.length !== 0) { this.mapLayersControlOption.overlays.Paths.addLayer(marker(path[0] as LatLng)); this.mapLayersControlOption.overlays.Paths.addLayer(polyline(path as LatLng[])); - // console.log('Trk path is not empty, in file ' + i + ', path[0]=' + JSON.stringify(path[0])); - } else { - // console.log('No trk path in file ' + i); } if (wpoints.length !== 0) { - // console.log('Wpt exist in file ' + i + ', wpoints[0]=' + JSON.stringify(wpoints[0]) +', wpoints.length=' + wpoints.length); wpoints_loop: for (let wpt_i = 0; i < wpoints.length; wpt_i++) { - // console.log('item number ' + wpt_i + ' out of ' + wpoints.length + ', coord=' + JSON.stringify(wpoints[wpt_i])); if (wpoints[wpt_i] === undefined) { - break wpoints_loop; - } + continue wpoints_loop; + } this.mapLayersControlOption.overlays.Paths.addLayer(marker(wpoints[wpt_i] as LatLng)); } - // console.log('Wpoints plotted.'); - } else { - // console.log('No wpt points in file ' + i); } } }