From 3856e4b5161eea43117cfd8cecc68e677edd4f86 Mon Sep 17 00:00:00 2001 From: evlist Date: Thu, 22 Sep 2022 23:05:50 +0200 Subject: [PATCH] Displaying a GPX track --- src/components/map/map.tsx | 2 ++ src/components/map/track.tsx | 30 ++++++++++++++++++++++++++++++ src/lib/geo.ts | 5 +++-- src/theme/map.css | 7 +++++++ 4 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 src/components/map/track.tsx diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx index 59d3abf..d305ee1 100644 --- a/src/components/map/map.tsx +++ b/src/components/map/map.tsx @@ -19,6 +19,7 @@ import { } from '@ionic/react'; import GpxImport from './gpx-import'; +import Track from './track'; const Map: react.FC<{}> = (props: {}) => { const dispatch = useDispatch(); @@ -43,6 +44,7 @@ const Map: react.FC<{}> = (props: {}) => { + diff --git a/src/components/map/track.tsx b/src/components/map/track.tsx new file mode 100644 index 0000000..b9347b2 --- /dev/null +++ b/src/components/map/track.tsx @@ -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 ; + } + + return ; +}; + +export default Track; diff --git a/src/lib/geo.ts b/src/lib/geo.ts index 2c24d1d..989ac9d 100644 --- a/src/lib/geo.ts +++ b/src/lib/geo.ts @@ -10,13 +10,14 @@ export interface geoPoint { // cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.) 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) => { return ( ((1 - 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) / 2) * diff --git a/src/theme/map.css b/src/theme/map.css index 74e4aa5..8c5e5e9 100644 --- a/src/theme/map.css +++ b/src/theme/map.css @@ -20,4 +20,11 @@ ion-button.get-location { overflow: hidden; position: absolute; z-index: -1; +} + +.track { + fill: transparent; + stroke-width: 2px; + stroke: green; + vector-effect: non-scaling-stroke; } \ No newline at end of file