diff --git a/components/map/Course.tsx b/components/map/Course.tsx
index 9a327e6..8f1f823 100644
--- a/components/map/Course.tsx
+++ b/components/map/Course.tsx
@@ -1,37 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { Polyline } from 'react-leaflet';
+import {CourseData} from '../../lib/gpx_parser';
-const mintrackpointdelta = 0.0001;
-
-export default function MapCourse({ map, course }) {
- const { trackpoints } = course?.tracks[0]?.segments[0] || [];
- const [polyline, setPolyline] = useState([]);
+export default function MapCourse({ map, course }: {map: any, course: CourseData}) {
+ const { trackpoints } = course?.tracks[0]?.segments[0] || {trackpoints: []};
+ const polyline = useMemo(() => trackpoints.map(({lat, lon}) => [lat, lon]), [trackpoints]);
useEffect(() => {
- const pointArray = [];
-
- if (trackpoints.length > 0) {
- let lastlon = parseFloat(trackpoints[0].lon);
- let lastlat = parseFloat(trackpoints[0].lat);
-
- pointArray.push([lastlon, lastlat]);
-
- for (let i = 1; i < trackpoints.length; i++) {
- const lon = parseFloat(trackpoints[i].lon);
- const lat = parseFloat(trackpoints[i].lat);
-
- const latdiff = lat - lastlat;
- const londiff = lon - lastlon;
- if (Math.sqrt(latdiff * latdiff + londiff * londiff) > mintrackpointdelta) {
- lastlon = lon;
- lastlat = lat;
- pointArray.push([lat, lon]);
- }
- }
+ if (map && polyline.length > 0) {
+ map.flyTo(polyline[0], map.getZoom());
}
-
- setPolyline(pointArray);
- }, [trackpoints]);
+ }, [,map, polyline]);
return ;
}
diff --git a/components/map/Marker.tsx b/components/map/Marker.tsx
index 2273342..341ceec 100644
--- a/components/map/Marker.tsx
+++ b/components/map/Marker.tsx
@@ -8,7 +8,6 @@ import MarkerShadow from '../../node_modules/leaflet/dist/images/marker-shadow.p
export default function MapMarker({ map, position }) {
useEffect(() => {
if (map) {
- console.log('fly to ', position);
map.flyTo(position, map.getZoom());
}
}, [map, position]);
diff --git a/lib/gpx_parser.ts b/lib/gpx_parser.ts
index e892b75..0243e54 100644
--- a/lib/gpx_parser.ts
+++ b/lib/gpx_parser.ts
@@ -1,3 +1,25 @@
+type Coord = {
+ lat: number;
+ lon: number;
+};
+type Trackpoint = Coord & {
+ ele: number;
+};
+type Segment = {
+ trackpoints: Trackpoint[];
+};
+type Track = {
+ name?: string;
+ segments: Segment[];
+}
+type Routepoint = Coord;
+type Waypoint = Coord;
+export type CourseData = {
+ tracks: Track[];
+ routePoints: Routepoint[],
+ waypoints: Waypoint[];
+};
+
export async function parseGpxFile2Document(file: File): Promise {
return new Promise((resolve, reject) => {
const reader = new FileReader();
@@ -15,7 +37,7 @@ export async function parseGpxFile2Document(file: File): Promise {
});
}
-function* elIter(el: HTMLCollectionOf, callback: (el: Element) => any) {
+function* elIter(el: HTMLCollectionOf, callback: (el: Element) => T) {
for (let i = 0; i < el.length; i++) {
yield callback(el[i]);
}
@@ -25,17 +47,17 @@ function getElValue(el: HTMLCollectionOf) {
return el[0].childNodes[0].nodeValue;
}
-function parseTrackpoints(trackpoints: HTMLCollectionOf) {
+function parseTrackpoints(trackpoints: HTMLCollectionOf): Trackpoint[] {
return [
- ...elIter(trackpoints, (trackpoint) => ({
- lon: parseFloat(trackpoint.getAttribute('lon')),
+ ...elIter(trackpoints, (trackpoint) => ({
lat: parseFloat(trackpoint.getAttribute('lat')),
- ele: getElValue(trackpoint.getElementsByTagName('ele')),
+ lon: parseFloat(trackpoint.getAttribute('lon')),
+ ele: parseFloat(getElValue(trackpoint.getElementsByTagName('ele'))),
})),
];
}
-function parseSegments(segments: HTMLCollectionOf) {
+function parseSegments(segments: HTMLCollectionOf): Segment[] {
return [
...elIter(segments, (segment) => ({
trackpoints: parseTrackpoints(segment.getElementsByTagName('trkpt')),
@@ -43,15 +65,32 @@ function parseSegments(segments: HTMLCollectionOf) {
];
}
-function parseTracks(tracks: HTMLCollectionOf) {
+function parseTracks(tracks: HTMLCollectionOf): Track[] {
return [
- ...elIter(tracks, (track) => ({
+ ...elIter