Different colors for the current GPX track and other tracks.

src/components/map/gpx.tsx

@@ -6,11 +6,10 @@ import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
 const Gpx: React.FC<{ gpx: any }> = (props) => {
-  console.log('gpx');
 
-  var gpxes: any[] = [];
+  var trkpts: any[] = [];
 
-  gpxes = useFind({
+  trkpts = useFind({
     selector: {
       type: 'trkpt',
       gpx: props.gpx._id,
@@ -19,11 +18,16 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
     //   use_index: 'type-trkpt-gpx-time3',
   });
 
-  gpxes.sort((first: any, second: any) =>
+  console.log(`rendering gpx, subtype:"${props.gpx.subtype}", ${trkpts.length} points`);
+
+
+  trkpts.sort((first: any, second: any) =>
     first.trkpt.time.localeCompare(second.trkpt.time)
   );
 
-  const d = gpxes.reduce((previous: string, current: any, index: number) => {
+//  console.log(`gpx: ${JSON.stringify(props.gpx)}`);
+
+  const d = trkpts.reduce((previous: string, current: any, index: number) => {
     const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
     const trkpt = current.trkpt;
     return `${previous} ${action} ${lon2tile(trkpt.$.lon, zoom0)}, ${lat2tile(
@@ -32,7 +36,7 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
     )}`;
   }, '');
 
-  return <path d={d} className='track' />;
+  return <path d={d} className={`track ${props.gpx.subtype}`} />;
 };
 
 export default Gpx;

src/theme/map.css

@@ -27,11 +27,18 @@ ion-button.get-location {
   z-index: -1;
 }
 
-.track {
+path.track {
   fill: transparent;
   stroke-width: 4px;
-  stroke: rgba(10, 1, 51,.8);
   stroke-linecap: round;
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
 }
+
+path {
+  stroke: rgba(10, 1, 51, 0.8);
+}
+
+path.current {
+  stroke: rgba(2, 71, 20, 0.8);
+}