From a8da5432288719cfff28d4426e5d67a251bc5d23 Mon Sep 17 00:00:00 2001 From: evlist Date: Sat, 3 Sep 2022 23:15:29 +0200 Subject: [PATCH] Refactoring live-overlay which was using Pigeon's GeoJson component to create a GPXOverlay. --- src/components/gpx-overlay.tsx | 54 +++++++++++++++++++++ src/components/live-map.tsx | 85 +++++++++++++++++++++------------ src/components/live-overlay.tsx | 34 ------------- 3 files changed, 109 insertions(+), 64 deletions(-) create mode 100644 src/components/gpx-overlay.tsx delete mode 100644 src/components/live-overlay.tsx diff --git a/src/components/gpx-overlay.tsx b/src/components/gpx-overlay.tsx new file mode 100644 index 0000000..9b9f928 --- /dev/null +++ b/src/components/gpx-overlay.tsx @@ -0,0 +1,54 @@ +import { Overlay, MapState, Point } from 'pigeon-maps'; +import React from 'react'; + +const GPXOverlay: React.FC<{ + mapState: any; + latLngToPixel: any; + track: any; +}> = (props: { + mapState: MapState; + latLngToPixel: + | (( + latLng: Point, + center?: Point | undefined, + zoom?: number | undefined + ) => Point) + | undefined; + track: any; +}) => { + const trkToPolyline = (trk: any) => { + const latLongs: string[] = trk.trkseg[0].trkpt.map((trkpt: any) => { + if (props.latLngToPixel === undefined) { + return ''; + } + const point: Point = [trkpt['$'].lat, trkpt['$'].lon]; + const pixelPoint = props.latLngToPixel(point); + if (pixelPoint === undefined) { + return ''; + } + return pixelPoint.join(' '); + }); + console.log('latLongs: ' + latLongs); + return latLongs.join(' '); + }; + + return ( + + {props.mapState.width > 0 && ( + + + + )} + + ); +}; + +export default GPXOverlay; diff --git a/src/components/live-map.tsx b/src/components/live-map.tsx index 6dd763b..eed4940 100644 --- a/src/components/live-map.tsx +++ b/src/components/live-map.tsx @@ -1,7 +1,7 @@ import react from 'react'; import { useState, useEffect } from 'react'; import { Map, Marker, ZoomControl } from 'pigeon-maps'; -import LiveOverlay from './live-overlay'; +import GPXOverlay from './gpx-overlay'; import { registerPlugin } from '@capacitor/core'; import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation'; const BackgroundGeolocation = registerPlugin( @@ -9,23 +9,36 @@ const BackgroundGeolocation = registerPlugin( ); const LiveMap: react.FC = () => { - const initialCenter: [number, number] = [44.73574, 6.18981]; + const initialCenter: [number, number] = [43.57154, 3.94351]; const initialZoom: number = 15; const [center, setCenter] = useState(initialCenter); const [position, setPosition] = useState(initialCenter); const [zoom, setZoom] = useState(initialZoom); const emptyTrack: any = { - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: [], - }, - properties: { foo: 'track' }, + trkseg: [ + { + trkpt: [ + { + $: { + lat: 43.57154, + lon: 3.94351, + }, + }, + { + $: { + lat: 43.56922, + lon: 3.94228, + }, + }, + ], + }, + ], }; let [track, setTrack] = useState(emptyTrack); + /* useEffect(() => { console.log('com.dyomedea.dyomedea LOG', ' - Adding the watcher'); BackgroundGeolocation.addWatcher( @@ -76,30 +89,44 @@ const LiveMap: react.FC = () => { BackgroundGeolocation.openSettings(); } } - return console.error('com.dyomedea.dyomedea LOG', ' - error: ', error); + return console.error( + 'com.dyomedea.dyomedea LOG', + ' - error: ', + error + ); } console.log(location); if (location !== undefined) { setCenter([location.latitude, location.longitude]); setPosition([location.latitude, location.longitude]); - track.geometry.coordinates.push([location.longitude, location.latitude]); - setTrack(track); + track.geometry.coordinates.push([ + location.longitude, + location.latitude, + ]); + setTrack(track); } - - return console.log('com.dyomedea.dyomedea LOG', ' - location: ', location); + + return console.log( + 'com.dyomedea.dyomedea LOG', + ' - location: ', + location + ); } - ).then(function after_the_watcher_has_been_added(watcher_id) { - // When a watcher is no longer needed, it should be removed by calling - // 'removeWatcher' with an object containing its ID. - console.log('com.dyomedea.dyomedea LOG', ' - Watcher added'); - /*BackgroundGeolocation.removeWatcher({ + ) + .then(function after_the_watcher_has_been_added(watcher_id) { + // When a watcher is no longer needed, it should be removed by calling + // 'removeWatcher' with an object containing its ID. + console.log('com.dyomedea.dyomedea LOG', ' - Watcher added'); + / *BackgroundGeolocation.removeWatcher({ id: watcher_id, - }); */ - }).catch((reason) => { - console.error('com.dyomedea.dyomedea LOG', ' - reason: ', reason) - }); + }); * / + }) + .catch((reason) => { + console.error('com.dyomedea.dyomedea LOG', ' - reason: ', reason); + }); }, [track]); + */ return ( { animate={true} > - - {track.geometry.coordinates.length !== 0 && ( - - )} + + ); }; diff --git a/src/components/live-overlay.tsx b/src/components/live-overlay.tsx deleted file mode 100644 index 2adb765..0000000 --- a/src/components/live-overlay.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { GeoJson, MapState, Point } from 'pigeon-maps'; -import React from 'react'; - -const LiveOverlay: React.FC<{ - mapState: any; - latLngToPixel: any; - track: any; -}> = (props: { - mapState: MapState; - latLngToPixel: - | (( - latLng: Point, - center?: Point | undefined, - zoom?: number | undefined - ) => Point) - | undefined; - track: any; -}) => { - - - - return ( - - ); -}; - -export default LiveOverlay;