Displaying GPX tracks (1st attempt)

public/assets/test.svg

@@ -0,0 +1,18 @@
+<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
+	<g transform="scale(256) translate(-110000, -110000)  ">
+		<path d=" M 110000,110000 L 111000, 111000" pointer-events="none" style="
+			vector-effect: non-scaling-stroke; 
+			stroke-width: 2px
+			
+			fill: transparent;
+		  stroke: black;
+		  "/>
+	</g>
+</svg>
+<!--
+	vector-effect: non-scaling-stroke; 
+  stroke-width: 2
+-->
+<!-- 
+stroke-width: 0.00781211;
+-->

src/components/map/Gpx.tsx

@@ -0,0 +1,47 @@
+import react, { useEffect, useState } from 'react';
+import dispatch from '../../workers/dispatcher-main';
+import Trk from './Trk';
+import { TileKeyObject, Rectangle } from './types';
+import getUri from '../../lib/ids';
+
+export interface GpxProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Gpx: react.FC<GpxProperties> = (props: GpxProperties) => {
+  const [gpx, setGpx] = useState<any>([]);
+  useEffect(() => {
+    const getGpx = async () => {
+      const gpx = await dispatch({
+        action: 'getGpx',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Gpx>, gpx: ${JSON.stringify(gpx)}`);
+      setGpx(gpx);
+    };
+    getGpx();
+  }, [props.id]);
+
+  return (
+    <g>
+      {gpx
+        .filter((row: any) => row.doc.type === 'trk')
+        .map((row: any) => (
+          <Trk
+            key={row.id}
+            id={row.id}
+            keyObject={props.keyObject}
+            zoom={props.zoom}
+            viewPort={props.viewPort}
+          />
+        ))}
+    </g>
+  );
+};
+
+export default Gpx;

src/components/map/Gpxes.tsx

@@ -1,5 +1,6 @@
 import react, { useEffect, useState } from 'react';
 import dispatch from '../../workers/dispatcher-main';
+import Gpx from './Gpx';
 import { TileKeyObject, Rectangle } from './types';
 
 export interface GpxesProperties {
@@ -30,7 +31,19 @@ export const Gpxes: react.FC<GpxesProperties> = (props: GpxesProperties) => {
     props.viewPort?.topLeft.y,
     props.keyObject?.zoomLevel,
   ]);
-  return <></>;
+  return (
+    <>
+      {visibleGpxes.map((id: string) => (
+        <Gpx
+          key={id}
+          id={id}
+          keyObject={props.keyObject!}
+          zoom={props.zoom!}
+          viewPort={props.viewPort!}
+        />
+      ))}
+    </>
+  );
 };
 
 export default Gpxes;

src/components/map/Trk.tsx

@@ -0,0 +1,47 @@
+import react, { useEffect, useState } from 'react';
+import dispatch from '../../workers/dispatcher-main';
+import { TileKeyObject, Rectangle } from './types';
+import getUri from '../../lib/ids';
+import Trkseg from './Trkseg';
+
+export interface TrkProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Trk: react.FC<TrkProperties> = (props: TrkProperties) => {
+  const [trk, setTrk] = useState<any>([]);
+  useEffect(() => {
+    const getTrk = async () => {
+      const trk = await dispatch({
+        action: 'getTrk',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Trk>, gpx: ${JSON.stringify(trk)}`);
+      setTrk(trk);
+    };
+    getTrk();
+  }, [props.id]);
+
+  return (
+    <g>
+      {trk
+        .filter((row: any) => row.doc.type === 'trkseg')
+        .map((row: any) => (
+          <Trkseg
+            key={row.id}
+            id={row.id}
+            keyObject={props.keyObject}
+            zoom={props.zoom}
+            viewPort={props.viewPort}
+          />
+        ))}
+    </g>
+  );
+};
+
+export default Trk;

src/components/map/Trkseg.module.css

@@ -0,0 +1,8 @@
+.track {
+  fill: transparent;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: rgba(10, 1, 51, 0.8);
+  vector-effect: non-scaling-stroke;
+}

src/components/map/Trkseg.tsx

@@ -0,0 +1,74 @@
+import react, { useEffect, useState } from 'react';
+import { lon2tile, lat2tile } from '../../lib/geo';
+import dispatch from '../../workers/dispatcher-main';
+import { TileKeyObject, Rectangle } from './types';
+
+import css from './Trkseg.module.css';
+
+export interface TrksegProperties {
+  id: string;
+  keyObject: TileKeyObject;
+  zoom: number;
+  viewPort: Rectangle;
+}
+
+export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
+  const [trkseg, setTrkseg] = useState<any>([]);
+  useEffect(() => {
+    const getTrkseg = async () => {
+      const trk = await dispatch({
+        action: 'getTrkseg',
+        params: {
+          id: props.id,
+        },
+      });
+      console.log(`<Trkseg>, gpx: ${JSON.stringify(trk)}`);
+      setTrkseg(trk);
+    };
+    getTrkseg();
+  }, [props.id]);
+
+  const d = trkseg
+    .slice(1)
+    .reduce((previous: string, current: any, index: number) => {
+      const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
+      const trkpt = current.doc.doc;
+      return `${previous} ${action} ${lon2tile(
+        trkpt.$.lon,
+        props.keyObject.zoomLevel
+      )}, ${lat2tile(trkpt.$.lat, props.keyObject.zoomLevel)}`;
+    }, '');
+
+  const widthFactor = () => {
+    return 2;
+    if (props.keyObject.zoomLevel <= 12) {
+      return 2;
+    }
+    if (props.keyObject.zoomLevel <= 17) {
+      return 4;
+    }
+
+    if (props.keyObject.zoomLevel <= 18) {
+      return 8;
+    }
+    if (props.keyObject.zoomLevel <= 19) {
+      return 16;
+    }
+
+    return 64;
+  };
+
+  // style={{ strokeWidth: widthFactor() / 256 / props.zoom }}
+  return (
+    <g>
+      <path
+        d={d}
+        pointerEvents='none'
+        className={css.track}
+        
+      />
+    </g>
+  );
+};
+
+export default Trkseg;

src/db/gpx.ts

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import { Point, Rectangle } from '../components/map/types';
 import { lat2tile, lon2tile, rectanglesIntersect } from '../lib/geo';
 import getUri, { intToGpxId } from '../lib/ids';
-import { get, getDocsByType, put, putAll } from './lib';
+import { get, getDocsByType, getFamily, put, putAll } from './lib';
 
 const emptyGpx: Gpx = {
   $: {
@@ -88,9 +88,9 @@ const prune = (id: any, object: any, docs: any[]) => {
   }
 };
 
-const techFromObject = (
+const extensionsFromObject = (
   object: any,
-  tech = {
+  extensions = {
     viewport: { topLeft: <Point>{}, bottomRight: <Point>{} },
     bbox: {
       minLon: <number | undefined>undefined,
@@ -105,56 +105,75 @@ const techFromObject = (
       const attributes = object.$;
       if ('lat' in attributes) {
         const lat = +attributes.lat;
-        if (tech.bbox.minLat === undefined || lat < tech.bbox.minLat) {
+        if (
-          tech.bbox.minLat = lat;
+          extensions.bbox.minLat === undefined ||
+          lat < extensions.bbox.minLat
+        ) {
+          extensions.bbox.minLat = lat;
         }
-        if (tech.bbox.maxLat === undefined || lat > tech.bbox.maxLat) {
+        if (
-          tech.bbox.maxLat = lat;
+          extensions.bbox.maxLat === undefined ||
+          lat > extensions.bbox.maxLat
+        ) {
+          extensions.bbox.maxLat = lat;
         }
       }
       if ('lon' in attributes) {
         const lon = +attributes.lon;
-        if (tech.bbox.minLon === undefined || lon < tech.bbox.minLon) {
+        if (
-          tech.bbox.minLon = lon;
+          extensions.bbox.minLon === undefined ||
+          lon < extensions.bbox.minLon
+        ) {
+          extensions.bbox.minLon = lon;
         }
-        if (tech.bbox.maxLon === undefined || lon > tech.bbox.minLon) {
+        if (
-          tech.bbox.maxLon = lon;
+          extensions.bbox.maxLon === undefined ||
+          lon > extensions.bbox.minLon
+        ) {
+          extensions.bbox.maxLon = lon;
         }
       }
     }
     for (const key in object) {
-      techFromObject(object[key], tech);
+      extensionsFromObject(object[key], extensions);
     }
   }
-  return tech;
+  return extensions;
 };
 
-const techFromGpx = (gpx: Gpx) => {
+const extensionsFromGpx = (gpx: Gpx) => {
-  const tech = techFromObject(gpx);
+  const extensions = { ...gpx.extensions, ...extensionsFromObject(gpx) };
-  if (tech.bbox.maxLat !== undefined && tech.bbox.minLon !== undefined) {
+  gpx.extensions = undefined;
-    tech.viewport.topLeft = {
+  if (
-      x: lon2tile(tech.bbox.minLon, 0),
+    extensions.bbox.maxLat !== undefined &&
-      y: lat2tile(tech.bbox.maxLat, 0),
+    extensions.bbox.minLon !== undefined
+  ) {
+    extensions.viewport.topLeft = {
+      x: lon2tile(extensions.bbox.minLon, 0),
+      y: lat2tile(extensions.bbox.maxLat, 0),
     };
   }
-  if (tech.bbox.minLat !== undefined && tech.bbox.maxLon !== undefined) {
+  if (
-    tech.viewport.bottomRight = {
+    extensions.bbox.minLat !== undefined &&
-      x: lon2tile(tech.bbox.maxLon, 0),
+    extensions.bbox.maxLon !== undefined
-      y: lat2tile(tech.bbox.minLat, 0),
+  ) {
+    extensions.viewport.bottomRight = {
+      x: lon2tile(extensions.bbox.maxLon, 0),
+      y: lat2tile(extensions.bbox.minLat, 0),
     };
   }
 
-  return tech;
+  return extensions;
 };
 
 export const pruneAndSaveImportedGpx = async (params: any) => {
-  const { id, gpx, tech } = params;
+  const { id, gpx, extensions } = params;
   let docs: any[] = [
     { _id: getUri('gpx', id), type: 'gpx', doc: gpx },
     {
-      _id: getUri('tech', id),
+      _id: getUri('extensions', id),
-      type: 'tech',
+      type: 'extensions',
-      doc: { ...tech, ...techFromGpx(gpx) },
+      doc: { ...extensions, ...extensionsFromGpx(gpx) },
     },
   ];
   prune(id, gpx, docs);
@@ -179,11 +198,72 @@ export const getGpxesForViewport = async (params: any) => {
       y: (viewport.bottomRight.y + 1) / 2 ** zoomLevel,
     },
   };
-  const techs = await getDocsByType('tech');
+  const allExtensions = await getDocsByType('extensions');
-  console.log(`getGpxesForViewport, techs: ${JSON.stringify(techs)}`);
+  console.log(
-  return techs
+    `getGpxesForViewport, allExtensions: ${JSON.stringify(allExtensions)}`
-    .filter((tech: any) => {
+  );
-      return rectanglesIntersect(zoomedViewport, tech.doc.viewport);
+  return allExtensions
+    .filter((extensions: any) => {
+      return rectanglesIntersect(zoomedViewport, extensions.doc.viewport);
     })
-    .map((tech: any) => getUri('tech', tech._id));
+    .map((extensions: any) =>
+      getUri('gpx', getUri('extensions', extensions._id))
+    );
+};
+
+const appendToArray = (target: any, key: string, value: any) => {
+  if (!(key in target)) {
+    target[key] = <any>[];
+  }
+  target[key].push(value);
+};
+
+export const getFullGpx = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: true });
+  let target: any[];
+  let gpx: Gpx | undefined = undefined;
+  docs.rows.forEach((row: any) => {
+    // level 0
+    if (row.doc.type === 'gpx') {
+      target = [row.doc.doc];
+      gpx = row.doc.doc;
+    }
+    //level 1
+    if (
+      row.doc.type === 'wpt' ||
+      row.doc.type === 'rte' ||
+      row.doc.type === 'trk' ||
+      row.doc.type === 'extensions'
+    ) {
+      target.splice(1);
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
+      target.push(row.doc.doc);
+    }
+    // level 2
+    if (row.doc.type === 'rtept' || row.doc.type === 'trkseg') {
+      target.splice(2);
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
+      target.push(row.doc.doc);
+    }
+    // level 3
+    if (row.doc.type === 'trkpt') {
+      appendToArray(target.at(-1), row.doc.type, row.doc.doc);
+    }
+  });
+  return gpx;
+};
+
+export const getGpx = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: true });
+  console.log(`getGpx, uri: ${id} docs: ${JSON.stringify(docs)}`);
+  return docs.rows.filter(
+    (row: any) =>
+      row.doc.type === 'gpx' ||
+      row.doc.type === 'wpt' ||
+      row.doc.type === 'rte' ||
+      row.doc.type === 'trk' ||
+      row.doc.type === 'extensions'
+  );
 };

src/db/trk.ts

@@ -1,6 +1,6 @@
 import getUri from '../lib/ids';
 import { putNewGpx } from './gpx';
-import { put } from './lib';
+import { getFamily, put } from './lib';
 
 export const emptyTrk: Trk = {
   name: undefined,
@@ -31,3 +31,12 @@ export const putNewTrk = async (id?: IdTrk | IdGpx) => {
   );
   return finalId as IdTrk;
 };
+
+export const getTrk = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: true });
+  console.log(`getTrk, uri: ${id} docs: ${JSON.stringify(docs)}`);
+  return docs.rows.filter(
+    (row: any) => row.doc.type === 'trk' || row.doc.type === 'trkseg'
+  );
+};

src/db/trkseg.ts

@@ -1,5 +1,5 @@
 import getUri from '../lib/ids';
-import { put } from './lib';
+import { getFamily, put } from './lib';
 import { putNewTrk } from './trk';
 
 const emptyTrkseg: Trkseg = {
@@ -24,3 +24,10 @@ export const putNewTrkseg = async (id?: IdTrk | IdGpx | IdTrkseg) => {
   );
   return finalId as IdTrkseg;
 };
+
+export const getTrkseg = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: true });
+  console.log(`getTrkseg, uri: ${id} docs: ${JSON.stringify(docs)}`);
+  return docs.rows;
+};

src/lib/ids.ts

@@ -28,13 +28,13 @@ const routes = {
   dbdef: route('dbdef', coding),
   settings: route('settings', coding),
   gpx: route('gpx/:gpx', coding),
-  tech: route('gpx/:gpx/0tech', coding),
   wpt: route('gpx/:gpx/1wpt/:wpt', coding),
   rte: route('gpx/:gpx/2rte/:rte', coding),
   rtept: route('gpx/:gpx/2rte/:rte/:rtept', coding),
   trk: route('gpx/:gpx/3trk/:trk', coding),
   trkseg: route('gpx/:gpx/3trk/:trk/:trkseg', coding),
   trkpt: route('gpx/:gpx/3trk/:trk/:trkseg/:trkpt', coding),
+  extensions: route('gpx/:gpx/4extensions', coding),
 };
 
 type RouteKey = keyof typeof routes;

src/workers/dispatcher-worker.ts

@@ -4,8 +4,10 @@ import {
   existsGpx,
   pruneAndSaveImportedGpx,
   getGpxesForViewport,
+  getGpx,
 } from '../db/gpx';
-import { putNewTrk } from '../db/trk';
+import { getTrk, putNewTrk } from '../db/trk';
+import { getTrkseg } from '../db/trkseg';
 
 const self = globalThis as unknown as SharedWorkerGlobalScope;
 
@@ -16,6 +18,9 @@ const actions = {
   existsGpx,
   pruneAndSaveImportedGpx,
   getGpxesForViewport,
+  getGpx,
+  getTrk,
+  getTrkseg
 };
 
 self.onconnect = function (e) {