Displaying a GPX track

This commit is contained in:
Eric van der Vlist 2022-09-22 23:05:50 +02:00
parent a559a37952
commit 3856e4b516
4 changed files with 42 additions and 2 deletions

View File

@ -19,6 +19,7 @@ import {
} from '@ionic/react'; } from '@ionic/react';
import GpxImport from './gpx-import'; import GpxImport from './gpx-import';
import Track from './track';
const Map: react.FC<{}> = (props: {}) => { const Map: react.FC<{}> = (props: {}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -43,6 +44,7 @@ const Map: react.FC<{}> = (props: {}) => {
<Slippy> <Slippy>
<Whiteboard> <Whiteboard>
<CurrentLocation /> <CurrentLocation />
<Track />
</Whiteboard> </Whiteboard>
</Slippy> </Slippy>
<Layer> <Layer>

View File

@ -0,0 +1,30 @@
import React, { Fragment } from 'react';
import { useSelector } from 'react-redux';
import { lat2tile, lon2tile } from '../../lib/geo';
import { zoom0 } from '../../store/map';
const Track: React.FC<{}> = () => {
const track = useSelector((state: { tracks: any }) => state.tracks.tracks.$0);
if (track) {
const trkseg = track.trk[0].trkseg[0];
const d = trkseg.trkpt.reduce(
(previous: string, current: any, index: number) => {
const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
return `${previous} ${action} ${lon2tile(
current.$.lon,
zoom0
)}, ${lat2tile(current.$.lat, zoom0)}`;
},
''
);
return <path d={d} className='track'/>;
}
return <Fragment />;
};
export default Track;

View File

@ -10,13 +10,14 @@ export interface geoPoint {
// cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.) // cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
export const lon2tile = (lon: number, zoom: number) => { export const lon2tile = (lon: number, zoom: number) => {
return ((lon + 180) / 360) * Math.pow(2, zoom); return ((Number(lon) + 180) / 360) * Math.pow(2, zoom);
}; };
export const lat2tile = (lat: number, zoom: number) => { export const lat2tile = (lat: number, zoom: number) => {
return ( return (
((1 - ((1 -
Math.log( Math.log(
Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180) Math.tan((Number(lat) * Math.PI) / 180) +
1 / Math.cos((Number(lat) * Math.PI) / 180)
) / ) /
Math.PI) / Math.PI) /
2) * 2) *

View File

@ -20,4 +20,11 @@ ion-button.get-location {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
}
.track {
fill: transparent;
stroke-width: 2px;
stroke: green;
vector-effect: non-scaling-stroke;
} }