Merge pull request #226 from CannonLock/map-viewer

Map viewer

.gitignore

@@ -17,6 +17,7 @@ docker-compose.yaml
 !.yarn/versions
 
 # IntelliJ
+.idea
 .idea/workspace.xml
 .idea/tasks.xml
 

package.json

@@ -121,6 +121,7 @@
     "esbuild-register": "^3.5.0",
     "esprima": "^4.0.1",
     "express": "^4.18.2",
+    "express-http-proxy": "^2.0.0",
     "hex-to-css-filter": "^5.4.0",
     "history": "^5.3.0",
     "immutability-helper": "^3.1.1",

server/index.ts

@@ -1,5 +1,6 @@
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import proxy from "express-http-proxy";
 import cookieParser from "cookie-parser";
 import compression from "compression";
 
@@ -94,7 +95,23 @@ async function startServer() {
     process.env.VITE_MACROSTRAT_TILESERVER_DOMAIN,
     process.env.VITE_MACROSTRAT_INSTANCE
   );
+
+  //
+  // Proxy requests to /tile/* to https://api.cdr.land/v1/tiles/*
+  // Add the Authorization header to the proxied request
   //
+  app.use("/tiles", proxy(
+    "https://api.cdr.land", {
+      proxyReqOptDecorator: (opts) => {
+        opts.headers["Authorization"] = `Bearer ${process.env.CDR_API_KEY}`;
+        return opts;
+      },
+      proxyReqPathResolver: (req) => {
+        return `/v1/tiles${req.url}`;
+      }
+    })
+  )
+
   /**
    * Vike route
    *

src/pages/dev/+Page.mdx

@@ -10,6 +10,7 @@ import { PageBreadcrumbs } from "~/renderer";
 - [User interface tests](/dev/ui-tests)
 - [Feedback](/dev/feedback)
 - [Map filter](/dev/filtering)
+- [CDR Tileserver](/dev/maps)
 - [Sources](/dev/sources)
 
 - [Concept apps](/dev/concepts)

src/pages/dev/interval-selection/+Page.ts

@@ -193,7 +193,7 @@ export function Page() {
 
   useEffect(() => {
     async function getIntervals() {
-      let response = await fetch(`https://macrostrat.org/api/v2/defs/intervals?all`);
+      let response = await fetch(`https://macrostrat.org/api/v2/defs/intervals?timescale_id=1`);
 
       if (response.ok) {
         let response_data = await response.json();

src/pages/dev/maps/+Page.ts

@@ -0,0 +1,32 @@
+import { default as h } from "@macrostrat/hyper";
+// Page for a list of maps
+import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
+import { ContentPage } from "~/layouts";
+import { PageHeader, DevLinkButton } from "~/components";
+import { useData } from "vike-react/useData";
+
+export function Page() {
+  const data = useData();
+  const { sources } = data;
+
+  console.log(sources);
+
+  return h(ContentPage, [
+    h(PageHeader, { title: "CDR Maps", showSiteName: false }),
+    h(
+      "ul.maps-list",
+      sources.map((d) => h(SourceItem, { source: d, key: d.source_id }))
+    ),
+  ]);
+}
+
+function SourceItem({ source }) {
+  const { cog_id, system, system_version } = source;
+  const href = `./maps/${cog_id}/${system}/${system_version}`;
+
+  return h("li", [
+    h("span.source-id", {}, cog_id),
+    " ",
+    h("a", { href }, [system, system_version]),
+  ]);
+}

src/pages/dev/maps/+config.ts

@@ -0,0 +1,10 @@
+export default {
+  meta: {
+    Page: {
+      env: {
+        client: true,
+        server: false,
+      },
+    },
+  },
+};

src/pages/dev/maps/+data.ts

@@ -0,0 +1,12 @@
+export async function data(pageContext): Promise<any> {
+  // `.page.server.js` files always run in Node.js; we could use SQL/ORM queries here.
+
+  // Fetch data from local api
+  const url = `http://localhost:3000/tiles/sources`;
+  const res = await fetch(url);
+  const data = await res.json();
+
+  const nullFilteredData = data.filter((source) => source.web_geom !== null);
+
+  return { sources: nullFilteredData };
+}