55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
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" strokeWidth="3" fill="none"
|
|
></polyline>
|
|
</svg>
|
|
)}
|
|
</Overlay>
|
|
);
|
|
};
|
|
|
|
export default GPXOverlay;
|