43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useFind } from 'react-pouchdb';
|
|
|
|
import { lat2tile, lon2tile } from '../../lib/geo';
|
|
import { zoom0 } from '../../store/map';
|
|
|
|
const Gpx: React.FC<{ gpx: any }> = (props) => {
|
|
|
|
var trkpts: any[] = [];
|
|
|
|
trkpts = useFind({
|
|
selector: {
|
|
type: 'trkpt',
|
|
gpx: props.gpx._id,
|
|
},
|
|
// sort: ['trkpt.time'],
|
|
// use_index: 'type-trkpt-gpx-time3',
|
|
});
|
|
|
|
console.log(`rendering gpx, subtype:"${props.gpx.subtype}", ${trkpts.length} points`);
|
|
|
|
|
|
trkpts.sort((first: any, second: any) =>
|
|
first.trkpt.time.localeCompare(second.trkpt.time)
|
|
);
|
|
|
|
// 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(
|
|
trkpt.$.lat,
|
|
zoom0
|
|
)}`;
|
|
}, '');
|
|
|
|
return <path d={d} className={`track ${props.gpx.subtype}`} />;
|
|
};
|
|
|
|
export default Gpx;
|