Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Refactoring live-overlay which was using Pigeon's GeoJson component to create a GPXOverlay.

This commit is contained in:
Eric van der Vlist 2022-09-03 23:15:29 +02:00
parent 194b46bad0
commit a8da543228
3 changed files with 109 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/gpx-overlay.tsx Normal file
View File

@ -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 (
<Overlay mapState={props.mapState} latLngToPixel={props.latLngToPixel}>
{props.mapState.width > 0 && (
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox={'0 0 ' + props.mapState.width + ' ' + props.mapState.height}
width={props.mapState.width}
height={props.mapState.height}
>
<polyline
points={trkToPolyline(props.track)}
stroke="black" stroke-width="3" fill="none"
></polyline>
</svg>
)}
</Overlay>
);
};
export default GPXOverlay;

85
src/components/live-map.tsx
View File

@ -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<BackgroundGeolocationPlugin>(
@ -9,23 +9,36 @@ const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
);
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 (
<Map
center={center}
@ -111,14 +138,12 @@ const LiveMap: react.FC = () => {
animate={true}
>
<ZoomControl />
<Marker width={20} anchor={position} />
{track.geometry.coordinates.length !== 0 && (
<LiveOverlay
mapState={undefined}
latLngToPixel={undefined}
track={track}
/>
)}
<Marker width={20} anchor={center} />
<GPXOverlay
mapState={undefined}
latLngToPixel={undefined}
track={track}
/>
</Map>
);
};

34
src/components/live-overlay.tsx
View File

@ -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 (
<GeoJson
data={{
type: 'FeatureCollection',
features: [props.track],
}}
mapState={props.mapState}
latLngToPixel={props.latLngToPixel}
/>
);
};
export default LiveOverlay;