feat: extra maplibre layers (#421)

To configure:

```javascript
 <StacMap
      defaultHref={defaultHref}
      auth={auth}
      stacBrowserUrl={stacBrowserUrl}
      extraLayers={[
        {
          layer: {
            id: "oam-global-coverage",
            type: "fill",
            "source-layer": "globalcoverage",
            minzoom: 0,
            maxzoom: 15,
            filter: ["==", ["geometry-type"], "Polygon"],
            paint: {
              "fill-color": "#d43f3f",
              "fill-opacity": 0.2,
              "fill-outline-color": "#d43f3f",
            },
          },
          source: {
            type: "vector",
            url: "pmtiles://https://s3.amazonaws.com/oin-hotosm-temp/global-coverage.pmtiles",
          },
        },
      ]}
      footer={<Footer version={version} changelog={changelog} />}
    />
```

Got:

<img width="3024" height="1730" alt="Screenshot 2026-04-30 at 13-33-34
stac-map eoAPI-stac"
src="https://github.com/user-attachments/assets/34bd4e58-4ed0-4da6-a631-e6a3897e1d20"
/>

Author: gadomski

package.json

@@ -55,6 +55,7 @@
     "duckdb-wasm-kit": "^0.1.38",
     "geotiff-geokeys-to-proj4": "^2024.4.13",
     "next-themes": "^0.4.3",
+    "pmtiles": "^4.4.1",
     "react-error-boundary": "^6.1.1",
     "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",

src/app.tsx src/components/app.tsxsrc/app.tsx renamed to src/components/app.tsx

@@ -2,11 +2,12 @@ import { AbsoluteCenter, Box, Center, FileUpload } from "@chakra-ui/react";
 import { useDuckDb } from "duckdb-wasm-kit";
 import { type ReactNode, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import Map from "./components/map";
-import Overlay from "./components/overlay";
-import { ErrorBoundaryAlert } from "./components/ui/error-alert";
-import { useStore } from "./store";
-import { uploadFile } from "./utils/upload";
+import { useStore } from "../store";
+import { uploadFile } from "../utils/upload";
+import Map from "./map";
+import Overlay from "./overlay";
+import type { ExtraLayerProps } from "./stac-map";
+import { ErrorBoundaryAlert } from "./ui/error-alert";
 
 function MapFallback({ error }: { error: unknown }) {
   return (
@@ -26,7 +27,13 @@ function OverlayFallback({ error }: { error: unknown }) {
   );
 }
 
-export default function App({ footer }: { footer?: ReactNode }) {
+export default function App({
+  footer,
+  extraLayers,
+}: {
+  footer?: ReactNode;
+  extraLayers?: ExtraLayerProps[];
+}) {
   const setUploadedFile = useStore((state) => state.setUploadedFile);
   const setConnection = useStore((state) => state.setConnection);
   const { db } = useDuckDb();
@@ -66,7 +73,7 @@ export default function App({ footer }: { footer?: ReactNode }) {
             }}
           >
             <ErrorBoundary FallbackComponent={MapFallback}>
-              <Map />
+              <Map extraLayers={extraLayers} />
             </ErrorBoundary>
           </FileUpload.Dropzone>
         </FileUpload.Root>

src/components/map.tsx

@@ -25,10 +25,15 @@ import {
 } from "react-map-gl/maplibre";
 import { useColorModeValue } from "../components/ui/color-mode";
 import { useStore } from "../store";
+import type { ExtraLayerProps } from "./stac-map";
 
 type Color = [number, number, number, number];
 
-export default function Map() {
+export default function Map({
+  extraLayers,
+}: {
+  extraLayers?: ExtraLayerProps[];
+}) {
   const mapRef = useRef<MapRef>(null);
   const [isLoaded, setIsLoaded] = useState(false);
   const mapStyle = useColorModeValue(
@@ -310,6 +315,12 @@ export default function Map() {
         layers={layers}
         getCursor={(props) => getCursor(mapRef, props)}
       ></DeckGLOverlay>
+      {extraLayers &&
+        extraLayers.map((layer, i) => (
+          <Source key={"extra-layer-" + i} {...layer.source}>
+            <MaplibreLayer {...layer.layer} />
+          </Source>
+        ))}
     </MaplibreMap>
   );
 }

src/components/stac-map.tsx

@@ -5,12 +5,16 @@ import {
 } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { type ReactNode, useEffect, useMemo } from "react";
-import { MapProvider } from "react-map-gl/maplibre";
+import { useEffect, useMemo, type ReactNode } from "react";
+import {
+  MapProvider,
+  type LayerProps,
+  type SourceProps,
+} from "react-map-gl/maplibre";
 import { AuthProvider, type AuthProviderProps } from "react-oidc-context";
-import App from "../app";
 import { AuthEnabledProvider } from "../contexts/auth-enabled";
 import { StacBrowserUrlProvider } from "../contexts/stac-browser";
+import App from "./app";
 import { HrefBootstrap } from "./href-bootstrap";
 import { OidcTokenSync } from "./oidc-token-sync";
 import { LoginSplash } from "./ui/auth";
@@ -19,6 +23,11 @@ import {
   type ColorModeProviderProps,
 } from "./ui/color-mode";
 
+export interface ExtraLayerProps {
+  source: SourceProps;
+  layer: LayerProps;
+}
+
 export interface StacMapProps {
   /** Initial STAC URL to load on mount when no `?href=` is present in the URL. */
   defaultHref?: string;
@@ -36,6 +45,8 @@ export interface StacMapProps {
   stacBrowserUrl?: string;
   /** Optional footer rendered below the map (e.g. version + changelog). */
   footer?: ReactNode;
+  /** Source and layer information for extra maplibre layers */
+  extraLayers?: ExtraLayerProps[];
 }
 
 let mountCount = 0;
@@ -54,6 +65,7 @@ export function StacMap({
   auth,
   stacBrowserUrl,
   footer,
+  extraLayers,
 }: StacMapProps) {
   useEffect(() => {
     mountCount += 1;
@@ -82,7 +94,7 @@ export function StacMap({
         <StacBrowserUrlProvider url={stacBrowserUrl}>
           <MapProvider>
             <HrefBootstrap defaultHref={defaultHref} syncWithUrl={syncWithUrl}>
-              <App footer={footer} />
+              <App footer={footer} extraLayers={extraLayers} />
             </HrefBootstrap>
           </MapProvider>
         </StacBrowserUrlProvider>

tests/app.spec.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, expect, test } from "vitest";
 import { render } from "vitest-browser-react";
 import { userEvent } from "vitest/browser";
-import App from "../src/app";
+import App from "../src/components/app";
 import { Provider } from "../src/components/ui/provider";
 
 async function renderApp() {

yarn.lock

@@ -2883,7 +2883,7 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/react-dom@^19.1.2":
+"@types/react-dom@^19.2.3":
   version "19.2.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
   integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
@@ -5196,6 +5196,11 @@ fflate@0.7.4:
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.7.4.tgz#61587e5d958fdabb5a9368a302c25363f4f69f50"
   integrity sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==
 
+fflate@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
+  integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -7573,6 +7578,13 @@ playwright@^1.59.1:
   optionalDependencies:
     fsevents "2.3.2"
 
+pmtiles@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/pmtiles/-/pmtiles-4.4.1.tgz#11ecb2a01453ba7c0ce88027e15f768aba18913b"
+  integrity sha512-5oTeQc/yX/ft1evbpIlnoCZugQuug/iYIAj/ZTqIqzdGek4uZEho99En890EE6NOSI3JTI3IG8R7r8+SltphxA==
+  dependencies:
+    fflate "^0.8.2"
+
 pngjs@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-7.0.0.tgz#a8b7446020ebbc6ac739db6c5415a65d17090e26"