feat: web-map-links for TileJSON (#311)

Cool! I really need a visual loading indicator, but that can be tricky
with these layers which might fail? cc @hrodmn


https://github.com/user-attachments/assets/9abb7d34-69e1-4035-b97d-1a1a430a69a2

Author: gadomski

src/components/map.tsx

@@ -17,8 +17,10 @@ import { toProj4 } from "geotiff-geokeys-to-proj4";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { type RefObject, useEffect, useMemo, useRef, useState } from "react";
 import {
+  Layer as MaplibreLayer,
   Map as MaplibreMap,
   type MapRef,
+  Source,
   useControl,
 } from "react-map-gl/maplibre";
 import { useColorModeValue } from "../components/ui/color-mode";
@@ -64,6 +66,7 @@ export default function Map() {
   const lineWidth = useStore((store) => store.lineWidth);
   const collectionBounds = useCollectionBounds();
   const items = useItems();
+  const webMapLink = useStore((store) => store.webMapLink);
   const [hoveredStacGeoparquetItemId, setHoveredStacGeoparquetItemId] =
     useState<string | null>(null);
 
@@ -262,6 +265,16 @@ export default function Map() {
         if (sanitizedBbox) setBbox(sanitizedBbox);
       }}
     >
+      {webMapLink && webMapLink.rel === "tilejson" && (
+        <Source
+          key={webMapLink.href}
+          id="web-map-link"
+          type="raster"
+          url={webMapLink.href}
+        >
+          <MaplibreLayer id="web-map-link-layer" type="raster" />
+        </Source>
+      )}
       <DeckGLOverlay
         layers={layers}
         getCursor={(props) => getCursor(mapRef, props)}

src/components/value/buttons.tsx

@@ -1,3 +1,4 @@
+import { useStore } from "@/store";
 import type { StacValue } from "@/types/stac";
 import { fitBounds } from "@/utils/map";
 import { getSelfHref } from "@/utils/stac";
@@ -11,9 +12,17 @@ import {
   Portal,
   createShikiAdapter,
 } from "@chakra-ui/react";
-import { LuExternalLink, LuFileJson, LuFocus } from "react-icons/lu";
+import { useMemo } from "react";
+import {
+  LuExternalLink,
+  LuEye,
+  LuEyeClosed,
+  LuFileJson,
+  LuFocus,
+} from "react-icons/lu";
 import { useMap } from "react-map-gl/maplibre";
 import type { HighlighterGeneric } from "shiki";
+import type { StacLink } from "stac-ts";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
@@ -33,9 +42,19 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
 export default function Buttons({ value }: { value: StacValue }) {
   const selfHref = getSelfHref(value);
   const { map } = useMap();
+  const webMapLink = useStore((store) => store.webMapLink);
+  const setWebMapLink = useStore((store) => store.setWebMapLink);
+
+  const tileJsonLinks = useMemo(
+    () =>
+      (value.links as StacLink[] | undefined)?.filter(
+        (link) => link.rel === "tilejson"
+      ) ?? [],
+    [value]
+  );
 
   return (
-    <ButtonGroup variant={"surface"} size="xs">
+    <ButtonGroup variant={"surface"} size="xs" flexWrap="wrap">
       <Button onClick={() => map && fitBounds(map, value, null)}>
         <LuFocus />
         Zoom to extents
@@ -55,6 +74,20 @@ export default function Buttons({ value }: { value: StacValue }) {
           </a>
         </Button>
       )}
+      {tileJsonLinks.map((link) => {
+        const active = webMapLink?.href === link.href;
+        return (
+          <Button
+            key={link.href}
+            onClick={() =>
+              setWebMapLink(active ? null : { href: link.href, rel: link.rel })
+            }
+          >
+            {active ? <LuEye /> : <LuEyeClosed />}
+            {link.title || "Tiles"}
+          </Button>
+        );
+      })}
       <JsonButton value={value} />
     </ButtonGroup>
   );

src/store/href.ts

@@ -36,6 +36,7 @@ export const createHrefSlice: StateCreator<State, [], [], HrefState> = (
       cogHref: null,
       cogSources: null,
       pagedCogSources: null,
+      webMapLink: null,
     });
   },
 });

src/store/index.ts

@@ -21,6 +21,7 @@ import {
   type UploadedFileState,
 } from "./uploaded-file";
 import { createValueSlice, type ValueState } from "./value";
+import { createWebMapLinksSlice, type WebMapLinksState } from "./web-map-links";
 
 export interface State
   extends
@@ -38,7 +39,8 @@ export interface State
     DatetimeState,
     MapState,
     SettingsState,
-    StacGeoparquetState {
+    StacGeoparquetState,
+    WebMapLinksState {
   fillColor: [number, number, number, number];
   lineColor: [number, number, number, number];
   lineWidth: number;
@@ -62,6 +64,7 @@ export const useStore = create<State>()(
       ...createDatetimeSlice(...a),
       ...createMapSlice(...a),
       ...createSettingsSlice(...a),
+      ...createWebMapLinksSlice(...a),
       fillColor: [207, 63, 2, 50] as [number, number, number, number],
       lineColor: [207, 63, 2, 100] as [number, number, number, number],
       lineWidth: 2,

src/store/web-map-links.ts

@@ -0,0 +1,22 @@
+import type { StateCreator } from "zustand";
+import type { State } from ".";
+
+export interface WebMapLink {
+  href: string;
+  rel: string;
+}
+
+export interface WebMapLinksState {
+  webMapLink: WebMapLink | null;
+  setWebMapLink: (link: WebMapLink | null) => void;
+}
+
+export const createWebMapLinksSlice: StateCreator<
+  State,
+  [],
+  [],
+  WebMapLinksState
+> = (set) => ({
+  webMapLink: null,
+  setWebMapLink: (link) => set({ webMapLink: link }),
+});