Starting to implement GPX visualization.

src/db/gpx.ts

@@ -1,8 +1,8 @@
 import { PureComponent } from 'react';
-import { Point } from '../components/map/types';
-import { lat2tile, lon2tile } from '../lib/geo';
+import { Point, Rectangle } from '../components/map/types';
+import { lat2tile, lon2tile, rectanglesIntersect } from '../lib/geo';
 import getUri, { intToGpxId } from '../lib/ids';
-import { get, put, putAll } from './lib';
+import { get, getDocsByType, put, putAll } from './lib';
 
 const emptyGpx: Gpx = {
   $: {
@@ -166,3 +166,24 @@ export const pruneAndSaveImportedGpx = async (params: any) => {
     console.error(`error: ${err}`);
   }
 };
+
+export const getGpxesForViewport = async (params: any) => {
+  const { viewport, zoomLevel } = params;
+  const zoomedViewport: Rectangle = {
+    topLeft: {
+      x: viewport.topLeft.x / 2 ** zoomLevel,
+      y: viewport.topLeft.y / 2 ** zoomLevel,
+    },
+    bottomRight: {
+      x: (viewport.bottomRight.x + 1) / 2 ** zoomLevel,
+      y: (viewport.bottomRight.y + 1) / 2 ** zoomLevel,
+    },
+  };
+  const techs = await getDocsByType('tech');
+  console.log(`getGpxesForViewport, techs: ${JSON.stringify(techs)}`);
+  return techs
+    .filter((tech: any) => {
+      return rectanglesIntersect(zoomedViewport, tech.doc.viewport);
+    })
+    .map((tech: any) => getUri('tech', tech._id));
+};

src/db/index.ts

@@ -53,7 +53,7 @@ export const initDb = async (params: any) => {
   // WARNING: defs must use the canonical form and be identical to what will be returned by db.getIndexes
   const requiredIndexes: any = [
     {
-      name: 'type-subtype',
+      name: 'type',
       def: {
         fields: [{ type: 'asc' }],
       },

src/db/lib.test.ts

@@ -1,6 +1,6 @@
 import { initDb } from '.';
 import uri from '../lib/ids';
-import { getFamily } from './lib';
+import { getDocsByType, getFamily } from './lib';
 import { putNewRte } from './rte';
 import { putNewRtept } from './rtept';
 import { putNewTrk } from './trk';
@@ -269,3 +269,31 @@ Object {
 `);
   });
 });
+
+describe('getDocsByType', () => {
+  beforeEach(async () => {
+    await initDb({});
+    globalThis.Date.now = () => 0;
+  });
+  afterEach(async () => {
+    await db.destroy();
+    db = undefined;
+    globalThis.Date.now = originalDateNow;
+  });
+  test('gets the rte amongst other docs', async () => {
+    await putNewRtept();
+    const rtes = await getDocsByType('rte');
+    expect(rtes).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "_id": "gpx/4320000000000000/2rte/000000",
+    "_rev": "1-2ca14f512a9c83f5a239389e580befce",
+    "doc": Object {
+      "number": 0,
+    },
+    "type": "rte",
+  },
+]
+`);
+  });
+});

src/db/lib.ts

@@ -46,3 +46,7 @@ export const get = async (id: string) => {
 export const putAll = async (docs: any[]) => {
   return await db.bulkDocs(docs);
 };
+
+export const getDocsByType = async (type: string) => {
+  return (await db.find({ selector: { type: type } })).docs;
+};