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,14 +1,10 @@
-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 = useSelector((state: { tracks: any }) => state.tracks.tracks.$0);
-
-  if (track) {
-    const trkseg = track.trk[0].trkseg[0];
+const Track: React.FC<{ track: any }> = (props) => {
+  const trkseg = props.track.trk[0].trkseg[0];
 
   const d = trkseg.trkpt.reduce(
     (previous: string, current: any, index: number) => {
@@ -22,9 +18,6 @@ const Track: React.FC<{}> = () => {
   );
 
   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;
 }