Rework development layers

pages/_error/+Page.ts

@@ -1,15 +1,23 @@
-export { Page };
-
 import h from "@macrostrat/hyper";
 import { CenteredContentPage } from "~/layouts";
 import { PageHeader } from "~/components";
+import { usePageContext } from "vike-react/usePageContext";
+
+export function Page() {
+  const ctx = usePageContext();
+  const is404 = ctx.is404;
+
+  return h(CenteredContentPage, [
+    h(PageHeader, { title: "Macrostrat" }),
+    h(PageContent, { is404, path: ctx.urlPathname }),
+  ]);
+}
 
-function PageContent({ is404 }: { is404: boolean }) {
+function PageContent({ is404, path }: { is404: boolean; path: string }) {
   if (is404) {
     return h([
-      h("h1", "Page Not Found"),
-      h("p", " This page could not be found."),
-      h("p", ["Code: ", h("code", "404")]),
+      h("h1", [h("code.bp5-code", "404"), " Page Not Found"]),
+      h("p", ["Could not find a page at path ", h("code.bp5-code", path), "."]),
     ]);
   } else {
     return h([
@@ -19,10 +27,3 @@ function PageContent({ is404 }: { is404: boolean }) {
     ]);
   }
 }
-
-function Page({ is404 }: { is404: boolean }) {
-  return h(CenteredContentPage, [
-    h(PageHeader, { title: "Macrostrat" }, [h("span.secondary", "v2")]),
-    h(PageContent, { is404 }),
-  ]);
-}

pages/dev/+Page.mdx

@@ -1,25 +1,28 @@
 export { ContentPage as default } from "~/layouts";
-import { PageHeader, PageBreadcrumbs } from "~/components";
+import { PageHeaderV2 } from "~/components";
 
-<PageHeader title="Development pages"></PageHeader>
-<PageBreadcrumbs></PageBreadcrumbs>
+<PageHeaderV2 title="Development" showLogo></PageHeaderV2>
 
+## Maps
+
+- [Map development pages](/dev/map)
 - [Globe](/dev/globe)
 - [Paleogeography](/dev/paleo)
-- [User interface tests](/dev/ui-tests)
-- [Feedback](/dev/feedback)
-- [Map filter](/dev/filtering)
-- [CriticalMAAS](/integrations/criticalmaas)
-- [Sources](/dev/sources)
 
-## xDD integration
 
-- [Map legend affinity](/dev/legend-affinity)
+## xDD
+
+- [Map legend affinity](/dev/map/legend-affinity)
 - [Extractions](/integrations/xdd/extractions)
 
-## Apps
+## Concept apps
 
-- [Concept apps](/dev/concepts)
-- [Built with Macrostrat](/dev/apps)
-- [Test Site](/dev/test-site/main-page)
+- [Concept app index](/dev/concepts)
+- [Built with Macrostrat](/dev/test-site/about)
+- [New homepage](/dev/test-site/main-page)
 - [Documentation](/dev/docs)
+
+## Miscellaneous
+
+- [User interface tests](/dev/ui-tests)
+- [CriticalMAAS](/integrations/criticalmaas)

pages/dev/map/+Page.mdx

@@ -0,0 +1,17 @@
+export { ContentPage as default } from "~/layouts";
+import { PageHeaderV2 } from "~/components";
+
+<PageHeaderV2 title="Map pages" showLogo></PageHeaderV2>
+
+Pages for development of Macrostrat mapping interfaces
+
+- [Map layers](/dev/map/layers) - core map layers from Macrostrat's tile server
+- [Server-side filtering](/dev/map/filter) - Map filtering using Macrostrat's *v3* API
+- [Legend affinity](/dev/map/legend-affinity) - xDD integration
+- [Sources](/dev/map/sources) - Map data sources and "reference geometries"
+- [Color schemes](/dev/map/color-schemes) - Color schemes for map layers
+
+## Integrations
+
+- [StraboSpot](/dev/map/strabospot) - StraboSpot development integration
+- [Weaver](/dev/map/weaver) - point data experiments

pages/map/dev/color-schemes.ts → pages/dev/map/color-schemes/+Page.client.ts

@@ -1,4 +1,4 @@
-import { VectorMapInspectorPage, MacrostratVectorTileset } from "./map-layers";
+import { VectorMapInspectorPage, MacrostratVectorTileset } from "../layers/lib";
 import h from "@macrostrat/hyper";
 import { useState } from "react";
 import { ButtonGroup, Button } from "@blueprintjs/core";
@@ -71,7 +71,7 @@ const newStyle = {
   }),
 };
 
-export function MapColorsInspector() {
+export function Page() {
   const [tileset, setTileset] = useState(MacrostratVectorTileset.CartoSlim);
   const tilesetSwitch = h("p.tileset-switch", [
     h(ButtonGroup, [

pages/dev/map/layers/@layer/+Page.client.ts

@@ -0,0 +1,14 @@
+import { RasterMapInspectorPage, VectorMapInspectorPage } from "../lib";
+import h from "@macrostrat/hyper";
+import { useData } from "vike-react/useData";
+
+export function Page() {
+  const layerInfo: any = useData();
+
+  const { title, tileset, type } = layerInfo;
+
+  const component: any =
+    type == "raster" ? RasterMapInspectorPage : VectorMapInspectorPage;
+
+  return h(component, { title, tileset });
+}

pages/dev/map/layers/@layer/+data.ts

@@ -0,0 +1,78 @@
+import { PageContextServer } from "vike/types";
+import { useConfig } from "vike-react/useConfig";
+import {
+  MacrostratRasterTileset,
+  MacrostratVectorTileset,
+} from "~/_utils/map-layers";
+import { render } from "vike/abort";
+
+export async function data(pageContext: PageContextServer) {
+  const config = useConfig();
+  const { layer } = pageContext.routeParams;
+
+  const layerInfo = layerIndex.find((l) => l.slug == layer);
+
+  if (layerInfo == null) {
+    throw render(404, "Layer not found");
+  }
+
+  const { title, tileset, type } = layerInfo;
+
+  let _title = title;
+  if (_title == null) {
+    // Capitalize the first letter
+    _title = tileset.charAt(0).toUpperCase() + tileset.slice(1);
+  }
+
+  config({
+    title: _title + "– Layer",
+  });
+
+  return { title: _title, tileset, type };
+}
+
+type LayerInfo = {
+  title?: string;
+  slug: string;
+  tileset: MacrostratRasterTileset | MacrostratVectorTileset | string;
+  type: "raster" | "vector";
+};
+
+/** Index of allowed map layers.
+ * TODO: we could get this from the Macrostrat API somehow
+ */
+
+const layerIndex: LayerInfo[] = [
+  { slug: "carto", tileset: MacrostratRasterTileset.Carto, type: "vector" },
+  {
+    slug: "carto-slim",
+    tileset: MacrostratVectorTileset.CartoSlim,
+    type: "vector",
+  },
+  {
+    slug: "carto-v1",
+    tileset: "https://tiles.macrostrat.org/carto/{z}/{x}/{y}.mvt",
+    type: "vector",
+  },
+  {
+    slug: "carto-slim-v1",
+    tileset: "https://tiles.macrostrat.org/carto-slim/{z}/{x}/{y}.mvt",
+    type: "vector",
+  },
+  {
+    slug: "all-maps",
+    tileset: MacrostratVectorTileset.AllMaps,
+    type: "vector",
+  },
+  {
+    slug: "carto-raster",
+    tileset: MacrostratRasterTileset.Carto,
+    type: "raster",
+    title: "Carto (raster)",
+  },
+  {
+    slug: "emphasized",
+    tileset: MacrostratRasterTileset.Emphasized,
+    type: "raster",
+  },
+];

pages/dev/map/layers/index/+Page.ts

@@ -0,0 +1,24 @@
+import h from "@macrostrat/hyper";
+import { PageHeaderV2 } from "~/components";
+import { ContentPage } from "~/layouts";
+
+export function Page() {
+  return h(ContentPage, [
+    h(PageHeaderV2, { title: "Layer inspectors", showLogo: true }),
+    h("h2", "Core layers"),
+    h("ul.layers", [
+      h(LinkItem, { to: "carto" }, "Carto"),
+      h(LinkItem, { to: "carto-slim" }, "Carto (slim)"),
+      h(LinkItem, { to: "carto-v1" }, "Carto (v1)"),
+      h(LinkItem, { to: "carto-slim-v1" }, "Carto (slim, v1)"),
+      h(LinkItem, { to: "carto-raster" }, "Carto (image)"),
+      h(LinkItem, { to: "emphasized" }, "Carto (image, emphasized)"),
+      h(LinkItem, { to: "all-maps" }, "All maps"),
+    ]),
+    h("h2", h("a", { href: "./layers/tables" }, "Table catalog")),
+  ]);
+}
+
+function LinkItem({ to, children }) {
+  return h("li", h("a", { href: "./layers/" + to }, children));
+}

pages/map/dev/main.module.styl → pages/dev/map/layers/index/main.module.styl

@@ -5,16 +5,20 @@
 .key-value
   display: inline-block
   margin-right: 1em
+
   .key
     font-weight: bold
     font-size: 0.9em
+
     &:after
       content: ': '
+
   .value
     font-size: 0.9em
 
 .feature-properties
   position: relative
+
   &:before
     content: "–"
     position: absolute
@@ -31,6 +35,7 @@
   margin-left: -1em
   margin-right: -1em
   margin-bottom: 0.5em
+
   &:last-child
     border-bottom: none
 
@@ -39,15 +44,9 @@
   flex-direction: row
   align-items: baseline
   padding 0 1em
-  h3
-    margin-right: 0.5em    
 
-.opacity-slider
-  margin: 0 1em 0.5em
-  :global
-    .bp5-slider-handle .bp5-slider-label
-      background-color: var(--secondary-color)
-      color: var(--text-color)
+  h3
+    margin-right: 0.5em
 
 .unit-number
   .unit
@@ -60,4 +59,4 @@
   max-width: 50em
 
 .dev-index-page
-  overflow-y: scroll
+  overflow-y: scroll