diff --git a/src/components/map/gpx.tsx b/src/components/map/gpx.tsx
index 41439d6..d79ea8f 100644
--- a/src/components/map/gpx.tsx
+++ b/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 ;
+ return ;
};
export default Gpx;
diff --git a/src/theme/map.css b/src/theme/map.css
index 48da65d..1053002 100644
--- a/src/theme/map.css
+++ b/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);
+}