Merge branch 'map-page' into ssr

* map-page:
  Added skeletal map marker. May not keep this
  Added legend info
  Map now works OK
  basic source maps works
  Uodated map interface
  Server seems to work OK
  Basic page for each map
  Added a skeletal index page for maps

package.json

@@ -60,12 +60,14 @@
     "@macrostrat/mapbox-react": "^2.1.0",
     "@macrostrat/mapbox-styles": "workspace:*",
     "@macrostrat/mapbox-utils": "workspace:*",
+    "@macrostrat/style-system": "workspace:*",
     "@macrostrat/timescale": "workspace:*",
     "@macrostrat/ui-components": "workspace:*",
     "@mapbox/point-geometry": "^0.1.0",
     "@mapbox/tilebelt": "^1.0.2",
     "@mapbox/vector-tile": "^1.3.1",
     "@turf/boolean-contains": "^6.5.0",
+    "@turf/buffer": "^6.5.0",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/geojson": "^7946.0.10",

server/index.js

@@ -31,7 +31,7 @@ async function startServer() {
     const viteDevMiddleware = (
       await vite.createServer({
         root,
-        server: { middlewareMode: true }
+        server: { middlewareMode: true },
       })
     ).middlewares
     app.use(viteDevMiddleware)
@@ -45,19 +45,12 @@ async function startServer() {
   // catch-all middleware superseding any middleware placed after it).
   app.get('*', async (req, res, next) => {
 
-    console.log(new Date().toISOString(), "Starting Response", req.method, req.originalUrl)
-
-
     const pageContextInit = {
       urlOriginal: req.originalUrl
     }
 
-    console.log(new Date().toISOString(), "Starting Rendering", req.method, req.originalUrl)
-
     const pageContext = await renderPage(pageContextInit)
 
-    console.log(new Date().toISOString(), "End Rendering", req.method, req.originalUrl)
-
     const { httpResponse } = pageContext
     if (!httpResponse) {
       return next()
@@ -66,12 +59,10 @@ async function startServer() {
       if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
       headers.forEach(([name, value]) => res.setHeader(name, value))
       res.status(statusCode)
+      if (!res.hasHeader('Content-Type')) res.setHeader('Content-Type', 'text/html');
       // For HTTP streams use httpResponse.pipe() instead, see https://vite-plugin-ssr.com/stream
       res.send(body)
     }
-
-    console.log(new Date().toISOString(), "Concluding Response", req.method, req.originalUrl)
-
   })
 
   const port = process.env.PORT || 3000

src/dev/map-layers/index.ts

@@ -200,6 +200,8 @@ export function VectorMapInspectorPage({
 }
 */
 
+function LineSymbolMapControls() {}
+
 export function buildRasterStyle(layer: MacrostratRasterTileset) {
   let tileURL = SETTINGS.burwellTileDomain + `/${layer}/{z}/{x}/{y}.png`;
 

src/dev/map-layers/utils.ts

@@ -1,10 +1,21 @@
 import { LinkButton } from "~/map-interface/components/buttons";
+import { AnchorButton } from "@blueprintjs/core";
 import mapboxgl from "mapbox-gl";
 import { useEffect, useState } from "react";
 import { h, buildMapStyle } from "./index";
+import { FloatingNavbar, MapLoadingButton } from "@macrostrat/map-interface";
+import { useMapStatus } from "@macrostrat/mapbox-react";
 
-export function ParentRouteButton({ icon = "arrow-left", ...rest }) {
+export function ParentRouteButton({
+  parentRoute,
+  icon = "arrow-left",
+  ...rest
+}) {
   // A button that links to the parent route
+  if (parentRoute != null) {
+    return h(AnchorButton, { href: parentRoute, icon, minimal: true });
+  }
+
   return h(LinkButton, { to: "..", icon, minimal: true, ...rest });
 }
 
@@ -18,3 +29,16 @@ export function useMapStyle(
   }, [baseMapURL, overlayStyle]);
   return style;
 }
+
+export function MapNavbar({ title, isOpen, setOpen, parentRoute }) {
+  const { isLoading } = useMapStatus();
+  return h(FloatingNavbar, { className: "searchbar" }, [
+    h([h(ParentRouteButton, { parentRoute }), h("h2", title)]),
+    h("div.spacer"),
+    h(MapLoadingButton, {
+      active: isOpen,
+      onClick: () => setOpen(!isOpen),
+      isLoading,
+    }),
+  ]);
+}

src/pages/maps/@id/index.page.ts

@@ -0,0 +1,36 @@
+import { PageContextBuiltInServer } from "vite-plugin-ssr/types";
+import { SETTINGS } from "~/map-interface/settings";
+import h from "@macrostrat/hyper";
+import { ClientOnly } from "~/renderer/client-only";
+
+const apiAddress = SETTINGS.apiDomain + "/api/v2/defs/sources";
+
+export async function onBeforeRender(pageContext: PageContextBuiltInServer) {
+  const { id } = pageContext.routeParams;
+
+  const params = new URLSearchParams({
+    format: "geojson",
+    source_id: id,
+  });
+  const response = await fetch(apiAddress + "?" + params);
+  const data: any = await response.json();
+  const map = data?.success?.data?.features[0];
+
+  return {
+    pageContext: {
+      pageProps: {
+        map,
+      },
+      documentProps: {
+        // The page's <title>
+        title: map.properties.name,
+      },
+    },
+  };
+}
+
+const MapInterface = () => import("./map-interface");
+
+export function Page({ map }) {
+  return h("div.single-map", h(ClientOnly, { component: MapInterface, map }));
+}

src/pages/maps/@id/main.module.sass

@@ -0,0 +1,34 @@
+body
+  margin: 0
+  padding: 0
+
+.single-map
+  width: 100vh
+  height: 100vh
+  margin: 0
+  --map-context-stack-width: 16em
+
+.map-legend-container
+  overflow-y: scroll
+
+.map-legend
+  margin: 1em
+
+.legend-entry
+  margin: 0.5em 0
+
+.legend-title
+  display: flex
+  flex-direction: row
+  &:hover
+    cursor: pointer
+    background: #eee
+  h4
+    margin: 0
+    margin-right: 0.5em
+
+.legend-swatch
+  width: 1em
+  height: 1em
+  display: inline-block
+  margin-right: 0.5em