57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { Overlay, MapState, Point } from 'pigeon-maps';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
const GPXOverlay: React.FC<{
|
|
mapState: any;
|
|
latLngToPixel: any;
|
|
}> = (props: {
|
|
mapState: MapState;
|
|
latLngToPixel:
|
|
| ((
|
|
latLng: Point,
|
|
center?: Point | undefined,
|
|
zoom?: number | undefined
|
|
) => Point)
|
|
| undefined;
|
|
}) => {
|
|
const track = useSelector((state: { gpx: { current: any; }; }) => state.gpx.current.trk[0]);
|
|
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(track)}
|
|
stroke='black'
|
|
strokeWidth='3'
|
|
fill='none'
|
|
></polyline>
|
|
</svg>
|
|
)}
|
|
</Overlay>
|
|
);
|
|
};
|
|
|
|
export default GPXOverlay;
|