From bd2d3eed6627fa1d04b456e5cee25cfb1a12bab2 Mon Sep 17 00:00:00 2001 From: vcoppe Date: Tue, 16 Apr 2024 22:57:28 +0200 Subject: [PATCH] first gpx file on map --- gpx/src/gpx.ts | 24 +++ gpx/tsconfig.json | 4 +- website/src/lib/components/Data.svelte | 275 +++++++++++++++++++++++++ website/src/lib/components/GPX.svelte | 30 +++ website/src/lib/components/Map.svelte | 8 +- website/src/routes/+page.svelte | 10 +- website/vite.config.ts | 2 +- 7 files changed, 343 insertions(+), 10 deletions(-) create mode 100644 website/src/lib/components/Data.svelte create mode 100644 website/src/lib/components/GPX.svelte diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts index 10c3b029..a5f11199 100644 --- a/gpx/src/gpx.ts +++ b/gpx/src/gpx.ts @@ -10,6 +10,8 @@ abstract class GPXTreeElement> { abstract getStartTimestamp(): Date; abstract getEndTimestamp(): Date; + + abstract toGeoJSON(): any; } // An abstract class that can be extended to facilitate functions working similarly with Tracks and TrackSegments @@ -80,6 +82,13 @@ export class GPXFile extends GPXTreeNode{ clone(): GPXFile { return new GPXFile(structuredClone(this)); } + + toGeoJSON(): any { + return { + type: "FeatureCollection", + features: this.getChildren().flatMap((child) => child.toGeoJSON()) + }; + } }; // A class that represents a Track in a GPX file @@ -112,6 +121,10 @@ export class Track extends GPXTreeNode { clone(): Track { return new Track(structuredClone(this)); } + + toGeoJSON(): any { + return this.getChildren().map((child) => child.toGeoJSON()); + } }; // A class that represents a TrackSegment in a GPX file @@ -150,6 +163,17 @@ export class TrackSegment extends GPXTreeLeaf { return this.trkpt[this.trkpt.length - 1].time; } + toGeoJSON(): any { + return { + type: "Feature", + geometry: { + type: "LineString", + coordinates: this.trkpt.map((point) => [point.attributes.lon, point.attributes.lat]) + }, + properties: {} + }; + } + clone(): TrackSegment { return new TrackSegment(structuredClone(this)); } diff --git a/gpx/tsconfig.json b/gpx/tsconfig.json index 0b68e2c9..5651496e 100644 --- a/gpx/tsconfig.json +++ b/gpx/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "module": "commonjs", - "target": "ES6", + "module": "ES6", + "target": "ES5", "declaration": true, "outDir": "./dist", }, diff --git a/website/src/lib/components/Data.svelte b/website/src/lib/components/Data.svelte new file mode 100644 index 00000000..3b6f6eea --- /dev/null +++ b/website/src/lib/components/Data.svelte @@ -0,0 +1,275 @@ + + +{#each files as file} + +{/each} diff --git a/website/src/lib/components/GPX.svelte b/website/src/lib/components/GPX.svelte new file mode 100644 index 00000000..d79255ec --- /dev/null +++ b/website/src/lib/components/GPX.svelte @@ -0,0 +1,30 @@ + diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte index eb892c0a..f2fc77f5 100644 --- a/website/src/lib/components/Map.svelte +++ b/website/src/lib/components/Map.svelte @@ -6,13 +6,11 @@ import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'; - import LayerControl from '$lib/components/layer-control/LayerControl.svelte'; mapboxgl.accessToken = 'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg'; - let map: mapboxgl.Map | null = null; - + export let map: mapboxgl.Map | null = null; export let distanceUnits: 'metric' | 'imperial' = 'metric'; onMount(() => { @@ -67,9 +65,7 @@
-
- -
+