Make changes for update

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

@@ -3,29 +3,30 @@ import { default as h } from "@macrostrat/hyper";
 import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
 import { ContentPage } from "~/layouts";
 import { PageHeader, DevLinkButton } from "~/components";
+import { useData } from "vike-react/useData";
 
-export function Page({ sources }) {
+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 })
-      )
+      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}`
+  const href = `./maps/${cog_id}/${system}/${system_version}`;
 
   return h("li", [
     h("span.source-id", {}, cog_id),
     " ",
-    h("a", { href }, [system, system_version])
+    h("a", { href }, [system, system_version]),
   ]);
 }
-

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 };
+}

src/pages/dev/maps/@cog_id/@system/@system_version/+Page.ts

@@ -6,6 +6,8 @@ import {
   Spinner,
   Tag,
 } from "@blueprintjs/core";
+import { useData } from "vike-react/useData";
+
 import { SETTINGS, apiV2Prefix } from "../../../../../../../packages/settings";
 import hyper from "@macrostrat/hyper";
 import {
@@ -30,10 +32,7 @@ import { LngLatBoundsLike } from "mapbox-gl";
 import { useEffect, useMemo, useState } from "react";
 import { MapNavbar } from "~/components/map-navbar";
 import "~/styles/global.styl";
-import { MapReference, DevLink } from "~/components";
 import styles from "./main.module.sass";
-import { PageBreadcrumbs } from "~/renderer";
-import { urlencoded } from "express";
 
 const h = hyper.styled(styles);
 
@@ -45,7 +44,7 @@ interface StyleOpts {
     raster: number | null;
   };
   rasterURL?: string;
-  tileURL: string
+  tileURL: string;
 }
 
 const emptyStyle: any = {
@@ -57,12 +56,12 @@ const emptyStyle: any = {
 };
 
 function buildOverlayStyle({
-                             style,
-                             focusedMap,
-                             layerOpacity,
-                             rasterURL = null,
-                             tileURL
-                           }: StyleOpts): any {
+  style,
+  focusedMap,
+  layerOpacity,
+  rasterURL = null,
+  tileURL,
+}: StyleOpts): any {
   let mapStyle = emptyStyle;
   if (layerOpacity.vector != null) {
     mapStyle = buildMacrostratStyle({
@@ -72,7 +71,7 @@ function buildOverlayStyle({
       strokeOpacity: layerOpacity.vector + 0.2,
       lineOpacity: layerOpacity.vector + 0.4,
     });
-    mapStyle.sources.burwell.tiles = [tileURL]
+    mapStyle.sources.burwell.tiles = [tileURL];
   }
 
   if (rasterURL != null && layerOpacity.raster != null) {
@@ -83,8 +82,8 @@ function buildOverlayStyle({
           type: "raster",
           tiles: [
             SETTINGS.burwellTileDomain +
-            "/cog/tiles/{z}/{x}/{y}.png?url=" +
-            rasterURL,
+              "/cog/tiles/{z}/{x}/{y}.png?url=" +
+              rasterURL,
           ],
           tileSize: 256,
         },
@@ -139,12 +138,14 @@ function basemapStyle(basemap, inDarkMode) {
   }
 }
 
-export default function MapInterface({ cog_id, system, system_version, envelope }) {
+export default function MapInterface() {
+  const data = useData();
+  const { cog_id, system, system_version, envelope } = data;
 
   const [isOpen, setOpen] = useState(false);
   const dark = useDarkMode()?.isEnabled ?? false;
-  const title = `${cog_id.substring(0, 10)} ${system} ${system_version}`
-  const hasRaster = false
+  const title = `${cog_id.substring(0, 10)} ${system} ${system_version}`;
+  const hasRaster = false;
 
   const bounds: LngLatBoundsLike = useMemo(() => {
     return ensureBoxInGeographicRange(boundingBox(envelope));
@@ -177,15 +178,14 @@ export default function MapInterface({ cog_id, system, system_version, envelope
         focusedMap: null,
         layerOpacity,
         rasterURL: null,
-        tileURL: `/tiles/cog/${cog_id}/system/${encodeURIComponent(system)}/system_version/${encodeURIComponent(system_version)}/tile/{z}/{x}/{y}`
+        tileURL: `/tiles/cog/${cog_id}/system/${encodeURIComponent(
+          system
+        )}/system_version/${encodeURIComponent(
+          system_version
+        )}/tile/{z}/{x}/{y}`,
       })
     );
-  }, [
-    null,
-    style,
-    layerOpacity.raster == null,
-    layerOpacity.vector == null,
-  ]);
+  }, [null, style, layerOpacity.raster == null, layerOpacity.vector == null]);
 
   // Layer opacity
   useEffect(() => {
@@ -232,8 +232,7 @@ export default function MapInterface({ cog_id, system, system_version, envelope
   if (bounds == null || mapStyle == null) return h(Spinner);
 
   const contextPanel = h(PanelCard, [
-    h("div.map-meta", [
-    ]),
+    h("div.map-meta", []),
     h("div.vector-controls", [
       h("h3", "Vector map"),
       h(OpacitySlider, {
@@ -265,7 +264,7 @@ export default function MapInterface({ cog_id, system, system_version, envelope
       contextStackProps: {
         adaptiveWidth: true,
       },
-      detailPanelStyle: DetailPanelStyle.FLOATING
+      detailPanelStyle: DetailPanelStyle.FLOATING,
     },
     [
       h(
@@ -314,7 +313,6 @@ function BaseLayerSelector({ layer, setLayer }) {
   ]);
 }
 
-
 function OpacitySlider(props) {
   return h("div.opacity-slider", [
     h(NullableSlider, {
@@ -328,4 +326,4 @@ function OpacitySlider(props) {
       },
     }),
   ]);
-}
+}

src/pages/dev/maps/@cog_id/@system/@system_version/+data.ts

@@ -0,0 +1,16 @@
+import { PageContext } from "vike/types";
+
+export async function data(pageContext: PageContext) {
+  const { cog_id, system, system_version } = pageContext.routeParams;
+
+  const url = `http://localhost:3000/tiles/cog/${cog_id}/system/${system}/system_version/${system_version}`;
+  const res = await fetch(url);
+  const data = await res.json();
+
+  return {
+    cog_id,
+    system,
+    system_version,
+    envelope: data.web_geom,
+  };
+}