Supporting multiple tracks.

src/components/map/map.tsx

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

src/components/map/track.tsx

@@ -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 { 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;

src/components/map/tracks.tsx

@@ -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;

src/store/map.ts

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

src/theme/map.css

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