Refactoring live-overlay which was using Pigeon's GeoJson component to create a GPXOverlay.
This commit is contained in:
parent
194b46bad0
commit
a8da543228
|
|
@ -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;
|
||||
|
|
@ -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: [],
|
||||
trkseg: [
|
||||
{
|
||||
trkpt: [
|
||||
{
|
||||
$: {
|
||||
lat: 43.57154,
|
||||
lon: 3.94351,
|
||||
},
|
||||
properties: { foo: 'track' },
|
||||
},
|
||||
{
|
||||
$: {
|
||||
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]);
|
||||
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) {
|
||||
)
|
||||
.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({
|
||||
/ *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
|
||||
<Marker width={20} anchor={center} />
|
||||
<GPXOverlay
|
||||
mapState={undefined}
|
||||
latLngToPixel={undefined}
|
||||
track={track}
|
||||
/>
|
||||
)}
|
||||
</Map>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue