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); +}