Supporting multiple tracks.

This commit is contained in:
Eric van der Vlist 2022-09-23 15:01:02 +02:00
parent 0c615ee00c
commit a212841c6c
6 changed files with 54 additions and 3622 deletions

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,30 +1,23 @@
import React, { Fragment } from 'react'; import React from 'react';
import { useSelector } from 'react-redux';
import { lat2tile, lon2tile } from '../../lib/geo'; import { lat2tile, lon2tile } from '../../lib/geo';
import { zoom0 } from '../../store/map'; import { zoom0 } from '../../store/map';
const Track: React.FC<{}> = () => { const Track: React.FC<{ track: any }> = (props) => {
const track = useSelector((state: { tracks: any }) => state.tracks.tracks.$0); const trkseg = props.track.trk[0].trkseg[0];
if (track) { const d = trkseg.trkpt.reduce(
const trkseg = track.trk[0].trkseg[0]; (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)}`;
},
''
);
const d = trkseg.trkpt.reduce( return <path d={d} className='track' />;
(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; export default Track;

View File

@ -0,0 +1,36 @@
import React, { Fragment, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Drivers, Storage } from '@ionic/storage';
import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
import Track from './track';
var store: Storage;
const Tracks: React.FC<{}> = () => {
useEffect(() => {
store = new Storage({
driverOrder: [
CordovaSQLiteDriver._driver,
Drivers.IndexedDB,
Drivers.LocalStorage,
],
});
store
.defineDriver(CordovaSQLiteDriver)
.then(() => console.log('CordovaSQLiteDriver registered'));
}, []);
const tracks = useSelector((state: { tracks: any }) => state.tracks.tracks);
return (
<Fragment>
{Object.keys(tracks).map((key: any) => (
<Track key={key} track={tracks[key]} />
))}
</Fragment>
);
};
export default Tracks;

View File

@ -10,7 +10,7 @@ import {
tile2long, tile2long,
} from '../lib/geo'; } from '../lib/geo';
export const zoom0 = 10; export const zoom0 = 18;
// Top level properties (the other properties can be derived from them) // Top level properties (the other properties can be derived from them)

View File

@ -24,7 +24,7 @@ ion-button.get-location {
.track { .track {
fill: transparent; fill: transparent;
stroke-width: 2px; stroke-width: 4px;
stroke: green; stroke: green;
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
} }