Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Different colors for the current GPX track and other tracks.

This commit is contained in:
Eric van der Vlist 2022-09-27 09:40:49 +02:00
parent 0f0f1c8639
commit 32f147bdb6
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/map/gpx.tsx
View File

@ -6,11 +6,10 @@ import { lat2tile, lon2tile } from '../../lib/geo';
import { zoom0 } from '../../store/map'; import { zoom0 } from '../../store/map';
const Gpx: React.FC<{ gpx: any }> = (props) => { const Gpx: React.FC<{ gpx: any }> = (props) => {
console.log('gpx');
var gpxes: any[] = []; var trkpts: any[] = [];
gpxes = useFind({ trkpts = useFind({
selector: { selector: {
type: 'trkpt', type: 'trkpt',
gpx: props.gpx._id, gpx: props.gpx._id,
@ -19,11 +18,16 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
// use_index: 'type-trkpt-gpx-time3', // 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) 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 action = index === 0 ? 'M' : index === 1 ? 'L' : '';
const trkpt = current.trkpt; const trkpt = current.trkpt;
return `${previous} ${action} ${lon2tile(trkpt.$.lon, zoom0)}, ${lat2tile( 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; export default Gpx;

11
src/theme/map.css
View File

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