col-browser 2.3.10 → 2.5.0

package/types/index.d.ts

@@ -82,6 +82,12 @@ export interface TaxonProps
   identifierLabel?: string;
   showDistributionMap?: boolean;
   gbifChecklistKey?: string | number;
+  /**
+   * MapLibre basemap for the distribution map: a style URL (with your
+   * provider's API key baked in) or an inline style object. Overrides the
+   * global `configure({ basemapStyle })` default for this instance.
+   */
+  basemapStyle?: string | Record<string, unknown>;
   /** HTTP Basic Auth credentials in `user:password` form. */
   auth?: string;
 }
@@ -126,11 +132,44 @@ export interface TaxonDistributionProps extends ThemeProps, NavigationProps {
   taxonId?: string;
   datasetKey?: string | number;
   gbifChecklistKey?: string | number;
+  /**
+   * MapLibre basemap for the distribution map: a style URL (with your
+   * provider's API key baked in) or an inline style object. Overrides the
+   * global `configure({ basemapStyle })` default for this instance.
+   */
+  basemapStyle?: string | Record<string, unknown>;
   style?: React.CSSProperties;
   /** HTTP Basic Auth credentials in `user:password` form. */
   auth?: string;
 }
 
+/** Base URLs the components talk to. Override them with `configure`. */
+export interface ColBrowserConfig {
+  /** ChecklistBank API base. Defaults to "https://api.checklistbank.org/". */
+  dataApi: string;
+  /** Human-facing ChecklistBank portal, for outbound dataset/publisher links. */
+  clbPortal: string;
+  /** GBIF API base, for the occurrence count and map tiles. */
+  gbifApi: string;
+  /** GBIF portal the occurrence attribution link points at. */
+  gbifPortal: string;
+  /**
+   * MapLibre basemap for the distribution map: a style URL (with your
+   * provider's API key baked in) or an inline style object. Defaults to
+   * CARTO's keyless Positron CDN. Stored verbatim — not URL-normalised.
+   */
+  basemapStyle: string | Record<string, unknown>;
+}
+
+/**
+ * Override the base URLs the components talk to, e.g. to point them at the
+ * ChecklistBank dev API. Merges into the shared config — keys left out keep
+ * their current value. Call once before rendering.
+ */
+export function configure(
+  overrides: Partial<ColBrowserConfig>
+): ColBrowserConfig;
+
 export const Tree: React.FC<TreeProps>;
 export const Search: React.FC<SearchProps>;
 export const Taxon: React.FC<TaxonProps>;

package/umd/col-browser.js

@@ -29818,7 +29818,7 @@ html body {
     });
   }
   const SPLIT = "__@field_split__";
-  function normalize(namePath) {
+  function normalize$1(namePath) {
     return namePath.map((cell) => `${typeof cell}:${cell}`).join(SPLIT);
   }
   class NameMap {
@@ -29826,13 +29826,13 @@ html body {
       __publicField(this, "kvs", /* @__PURE__ */ new Map());
     }
     set(key2, value) {
-      this.kvs.set(normalize(key2), value);
+      this.kvs.set(normalize$1(key2), value);
     }
     get(key2) {
-      return this.kvs.get(normalize(key2));
+      return this.kvs.get(normalize$1(key2));
     }
     getAsPrefix(key2) {
-      const normalizedKey = normalize(key2);
+      const normalizedKey = normalize$1(key2);
       const normalizedPrefix = normalizedKey + SPLIT;
       const results = [];
       const current = this.kvs.get(normalizedKey);
@@ -29856,7 +29856,7 @@ html body {
       }
     }
     delete(key2) {
-      this.kvs.delete(normalize(key2));
+      this.kvs.delete(normalize$1(key2));
     }
     // Since we only use this in test, let simply realize this
     map(callback) {
@@ -67804,8 +67804,22 @@ html body {
     gbifApi: "https://api.gbif.org",
     // GBIF human-facing portal where the attribution link points. The
     // multitaxonomy occurrence search now ships on the production portal.
-    gbifPortal: "https://www.gbif.org"
-  };
+    gbifPortal: "https://www.gbif.org",
+    // MapLibre basemap for the distribution map. Anything MapLibre accepts as
+    // `style` works: a style URL (bake your provider's API key into it) or an
+    // inline style object. The default is CARTO's public Positron CDN, which
+    // needs no key.
+    basemapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  };
+  const SLASH_TERMINATED = /* @__PURE__ */ new Set(["dataApi"]);
+  const VERBATIM = /* @__PURE__ */ new Set(["basemapStyle"]);
+  const normalize = (key2, value) => SLASH_TERMINATED.has(key2) ? value.replace(/\/*$/, "/") : value.replace(/\/+$/, "");
+  function configure(overrides = {}) {
+    Object.entries(overrides).forEach(([key2, value]) => {
+      config[key2] = typeof value === "string" && !VERBATIM.has(key2) ? normalize(key2, value) : value;
+    });
+    return config;
+  }
   var dataloader;
   var hasRequiredDataloader;
   function requireDataloader() {
@@ -77972,6 +77986,7 @@ html body {
     });
     return out;
   };
+  const resolveBasemapStyle = (prop) => prop ?? config.basemapStyle;
   const wrapStyle = {
     position: "absolute",
     bottom: 8,
@@ -78128,7 +78143,6 @@ html body {
     const k = resolveKey(record);
     return k == null ? MISSING_COLOR : ESTABLISHMENT_COLORS[k];
   };
-  const POSITRON_STYLE = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
   const GBIF_VISIBLE_KEY = "gbif-visible";
   const readStoredGbifVisible = (defaultValue) => readSetting(GBIF_VISIBLE_KEY, defaultValue);
   const writeStoredGbifVisible = (visible) => writeSetting(GBIF_VISIBLE_KEY, visible);
@@ -78241,7 +78255,10 @@ html body {
     // true | null → show GBIF layer; false → GBIF API returned 0 occurrences,
     // grey out the toggle and skip loading tiles. Defaults to true so the
     // component works without the count check.
-    gbifAvailable = true
+    gbifAvailable = true,
+    // MapLibre style URL or inline style object; falls back to the global
+    // `configure({ basemapStyle })` value. Changing it rebuilds the map.
+    basemapStyle
   }) => {
     var _a2;
     const containerRef = reactExports.useRef(null);
@@ -78254,7 +78271,7 @@ html body {
     const focalAttachedRef = reactExports.useRef(false);
     const gbifAttachedRef = reactExports.useRef(false);
     const descendantLayersRef = reactExports.useRef(/* @__PURE__ */ new Set());
-    const [styleReady, setStyleReady] = reactExports.useState(false);
+    const [readyMap, setReadyMap] = reactExports.useState(null);
     const [focalReady, setFocalReady] = reactExports.useState(false);
     const [descendantState, setDescendantState] = reactExports.useState({
       status: "idle",
@@ -78327,12 +78344,14 @@ html body {
       return { visibleGroups, unmappableGroups };
     }, [descendantState, descendantColors, visibleTaxonIds]);
     const showDescendantLegend = descendantLegend.visibleGroups.length > 0;
+    const styleSpec = resolveBasemapStyle(basemapStyle);
+    const styleKey = typeof styleSpec === "string" ? styleSpec : JSON.stringify(styleSpec);
     reactExports.useEffect(() => {
       if (!containerRef.current || mapRef.current) return;
       if (!supported()) return;
       const map = new maplibregl.Map({
         container: containerRef.current,
-        style: POSITRON_STYLE,
+        style: styleSpec,
         center: [0, 20],
         zoom: 1,
         minZoom: 0,
@@ -78353,7 +78372,7 @@ html body {
       );
       mapRef.current = map;
       map.on("load", () => {
-        setStyleReady(true);
+        setReadyMap(map);
         const attrib = map.getContainer().querySelector(".maplibregl-ctrl-attrib");
         if (attrib) attrib.classList.remove("maplibregl-compact-show");
       });
@@ -78370,12 +78389,12 @@ html body {
         focalAttachedRef.current = false;
         gbifAttachedRef.current = false;
         descendantLayersRef.current = /* @__PURE__ */ new Set();
+        setReadyMap(null);
       };
-    }, []);
+    }, [styleKey]);
     reactExports.useEffect(() => {
-      if (!styleReady || !(records == null ? void 0 : records.length)) return;
-      const map = mapRef.current;
-      if (!map) return;
+      const map = readyMap;
+      if (!map || !(records == null ? void 0 : records.length)) return;
       let cancelled = false;
       setFocalReady(false);
       Promise.allSettled(
@@ -78386,7 +78405,7 @@ html body {
           }))
         )
       ).then((results) => {
-        if (cancelled) return;
+        if (cancelled || mapRef.current !== map) return;
         const features = [];
         const recordMap = /* @__PURE__ */ new Map();
         let failures = 0;
@@ -78456,7 +78475,7 @@ html body {
       return () => {
         cancelled = true;
       };
-    }, [styleReady, records]);
+    }, [readyMap, records]);
     const onFocalClick = (e2) => {
       var _a3, _b2;
       const map = mapRef.current;
@@ -78484,8 +78503,7 @@ html body {
       if (map.getLayer(FOCAL_LINE)) map.setLayoutProperty(FOCAL_LINE, "visibility", v2);
     }, [focalVisible, focalReady]);
     reactExports.useEffect(() => {
-      if (!styleReady) return;
-      const map = mapRef.current;
+      const map = readyMap;
       if (!map) return;
       const removeGbif = () => {
         if (map.getLayer(GBIF_LAYER)) map.removeLayer(GBIF_LAYER);
@@ -78511,16 +78529,16 @@ html body {
         layout: { visibility: gbifVisible ? "visible" : "none" }
       });
       gbifAttachedRef.current = true;
-    }, [styleReady, gbifChecklistKey, focalTaxon == null ? void 0 : focalTaxon.id, gbifAvailable]);
+    }, [readyMap, gbifChecklistKey, focalTaxon == null ? void 0 : focalTaxon.id, gbifAvailable]);
     reactExports.useEffect(() => {
       const map = mapRef.current;
       if (!map || !gbifAttachedRef.current) return;
       const v2 = gbifVisible ? "visible" : "none";
       if (map.getLayer(GBIF_LAYER)) map.setLayoutProperty(GBIF_LAYER, "visibility", v2);
     }, [gbifVisible]);
+    const descendantVisibility = (id) => visibleTaxonIds.has(id) ? "visible" : "none";
     reactExports.useEffect(() => {
-      if (!styleReady) return;
-      const map = mapRef.current;
+      const map = readyMap;
       if (!map) return;
       descendantLayersRef.current.forEach((id) => {
         if (map.getLayer(descendantFillId(id))) map.removeLayer(descendantFillId(id));
@@ -78543,7 +78561,7 @@ html body {
             }))
           )
         ).then((results) => {
-          if (!mapRef.current) return;
+          if (mapRef.current !== map) return;
           const features = [];
           results.forEach((res, i) => {
             if (res.status !== "fulfilled" || !res.value.geojson) return;
@@ -78576,7 +78594,7 @@ html body {
                 type: "fill",
                 source: srcId,
                 paint: { "fill-color": color, "fill-opacity": 0.55 },
-                layout: { visibility: "none" }
+                layout: { visibility: descendantVisibility(t2.id) }
               },
               beforeId
             );
@@ -78586,7 +78604,7 @@ html body {
                 type: "line",
                 source: srcId,
                 paint: { "line-color": color, "line-width": 2 },
-                layout: { visibility: "none" }
+                layout: { visibility: descendantVisibility(t2.id) }
               },
               beforeId
             );
@@ -78597,7 +78615,7 @@ html body {
           }
         });
       });
-    }, [styleReady, descendantState, descendantColors]);
+    }, [readyMap, descendantState, descendantColors]);
     const onDescendantClick = (e2) => {
       var _a3, _b2;
       const map = mapRef.current;
@@ -79070,6 +79088,7 @@ html body {
     focalTaxon,
     rankOrder,
     gbifChecklistKey,
+    basemapStyle,
     label,
     md: md2
   }) => {
@@ -79148,7 +79167,8 @@ html body {
               focalTaxon,
               rankOrder,
               gbifChecklistKey,
-              gbifAvailable
+              gbifAvailable,
+              basemapStyle
             }
           ),
           showToggle && unmappable > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { onClick: () => setView("list"), style: { cursor: "pointer" }, children: [
@@ -88460,7 +88480,8 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
       const {
         datasetKey,
         showDistributionMap,
-        gbifChecklistKey
+        gbifChecklistKey,
+        basemapStyle
       } = this.props;
       const {
         taxon,
@@ -88768,7 +88789,8 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
                 showDistributionMap,
                 focalTaxon: taxon,
                 rankOrder: rank,
-                gbifChecklistKey
+                gbifChecklistKey,
+                basemapStyle
               }
             ),
             get(taxon, "environments") && /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md, label: "Environment(s)", children: get(taxon, "environments").join(", ") }),
@@ -88848,6 +88870,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     identifierLabel,
     showDistributionMap,
     gbifChecklistKey,
+    basemapStyle,
     auth,
     ...routerProps
   }) {
@@ -88860,6 +88883,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
         identifierLabel,
         showDistributionMap,
         gbifChecklistKey,
+        basemapStyle,
         auth
       }
     ) });
@@ -89820,6 +89844,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     taxonId,
     datasetKey,
     gbifChecklistKey,
+    basemapStyle,
     style: style2,
     auth,
     ...routerProps
@@ -89859,6 +89884,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
         focalTaxon: taxon,
         rankOrder: rank,
         gbifChecklistKey,
+        basemapStyle,
         showDistributionMap: true,
         style: style2
       }
@@ -90001,6 +90027,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     TaxonBreakdown,
     TaxonDistribution,
     Tree,
+    configure,
     withRouting
   }, Symbol.toStringTag, { value: "Module" }));
   const umd = { ...components, React: React$1, ReactDOM: ReactDOMClient };