col-browser 2.4.0 → 2.5.0

package/es/taxonBreakdown.js

@@ -1,9 +1,9 @@
 import { w } from "./chunks/withTheme-Dh6PRuII.js";
 import { j as o } from "./chunks/jsx-runtime-BzflLqGi.js";
-import { T } from "./chunks/TaxonBreakdown-DeWamLu_.js";
+import { T } from "./chunks/TaxonBreakdown-D9g3tYXL.js";
 import { useState as e, useEffect as A } from "react";
 import { s as b, c as r, R as v, b as B } from "./chunks/router-CssZk5qZ.js";
-import { c as s } from "./chunks/config-D1NH4DTr.js";
+import { c as s } from "./chunks/config-D4b3a4Yi.js";
 import { Row as D, Col as C, Spin as E } from "antd";
 const S = ({
   taxonId: n,

package/es/taxonDistribution.js

@@ -1,25 +1,26 @@
-import { w as R } from "./chunks/withTheme-Dh6PRuII.js";
+import { w as $ } from "./chunks/withTheme-Dh6PRuII.js";
 import { j as n } from "./chunks/jsx-runtime-BzflLqGi.js";
-import { useState as a, useEffect as $ } from "react";
-import { s as D, c as s, R as T, b as g } from "./chunks/router-CssZk5qZ.js";
-import { c as l } from "./chunks/config-D1NH4DTr.js";
-import { Row as k, Col as v, Spin as w } from "antd";
-import { D as A } from "./chunks/Distributions-Bd4hFYdS.js";
-const C = ({
+import { useState as a, useEffect as D } from "react";
+import { s as T, c as s, R as g, b as k } from "./chunks/router-CssZk5qZ.js";
+import { c as l } from "./chunks/config-D4b3a4Yi.js";
+import { Row as v, Col as w, Spin as A } from "antd";
+import { D as C } from "./chunks/Distributions-Dwjo7KhA.js";
+const E = ({
   taxonId: o,
   datasetKey: i,
   gbifChecklistKey: d,
-  style: x,
-  auth: b,
-  ...h
+  basemapStyle: x,
+  style: b,
+  auth: h,
+  ...j
 }) => {
-  D(b);
-  const [u, p] = a(null), [c, m] = a(null), [f, j] = a([]);
-  return $(() => {
+  T(h);
+  const [u, p] = a(null), [c, m] = a(null), [f, R] = a([]);
+  return D(() => {
     let r = !1;
     if (p(null), m(null), !(!o || !i))
       return s(`${l.dataApi}vocab/rank`).then((t) => {
-        r || j(t.data.map((e) => e.name));
+        r || R(t.data.map((e) => e.name));
       }), s(
         `${l.dataApi}dataset/${i}/taxon/${encodeURIComponent(o)}`
       ).then((t) => {
@@ -32,20 +33,21 @@ const C = ({
       }), () => {
         r = !0;
       };
-  }, [o, i]), /* @__PURE__ */ n.jsx(T.Provider, { value: g(h), children: !u || c === null || f.length === 0 ? /* @__PURE__ */ n.jsx(k, { justify: "center", style: { padding: "24px" }, children: /* @__PURE__ */ n.jsx(v, { children: /* @__PURE__ */ n.jsx(w, { size: "large" }) }) }) : /* @__PURE__ */ n.jsx(
-    A,
+  }, [o, i]), /* @__PURE__ */ n.jsx(g.Provider, { value: k(j), children: !u || c === null || f.length === 0 ? /* @__PURE__ */ n.jsx(v, { justify: "center", style: { padding: "24px" }, children: /* @__PURE__ */ n.jsx(w, { children: /* @__PURE__ */ n.jsx(A, { size: "large" }) }) }) : /* @__PURE__ */ n.jsx(
+    C,
     {
       data: c,
       datasetKey: i,
       focalTaxon: u,
       rankOrder: f,
       gbifChecklistKey: d,
+      basemapStyle: x,
       showDistributionMap: !0,
-      style: x
+      style: b
     }
   ) });
-}, W = R(C);
+}, q = $(E);
 export {
-  W as TaxonDistribution
+  q as TaxonDistribution
 };
 //# sourceMappingURL=taxonDistribution.js.map

package/es/taxonDistribution.js.map

@@ -1 +1 @@
-{"version":3,"file":"taxonDistribution.js","sources":["../src/Taxon/DistributionsWrapper.js","../src/entries/taxonDistribution.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport client, { setAuth } from \"../api/client\";\nimport config from \"../config\";\nimport { Row, Col, Spin } from \"antd\";\nimport Distributions from \"./Distributions\";\nimport { RouterContext, buildRouter } from \"../router\";\n\n// Standalone wrapper around the Taxon page's Distributions block.\n// Loads the focal taxon, its info (which carries the distributions array),\n// and the rank vocabulary — same data the Taxon page already loads — so\n// embedders can drop the map onto any page given just (datasetKey, taxonId).\nexport const DistributionsWrapper = ({\n  taxonId,\n  datasetKey,\n  gbifChecklistKey,\n  style,\n  auth,\n  ...routerProps\n}) => {\n  // Private candidate releases (preview/dev) require Basic auth on every call,\n  // including the taxon/info/rank fetches below via `client`.\n  setAuth(auth);\n  const [taxon, setTaxon] = useState(null);\n  const [distributions, setDistributions] = useState(null);\n  const [rank, setRank] = useState([]);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTaxon(null);\n    setDistributions(null);\n\n    if (!taxonId || !datasetKey) return undefined;\n\n    client(`${config.dataApi}vocab/rank`).then((res) => {\n      if (!cancelled) setRank(res.data.map((r) => r.name));\n    });\n    client(\n      `${config.dataApi}dataset/${datasetKey}/taxon/${encodeURIComponent(taxonId)}`\n    ).then((res) => {\n      if (!cancelled) setTaxon(res.data);\n    });\n    client(\n      `${config.dataApi}dataset/${datasetKey}/taxon/${encodeURIComponent(taxonId)}/info`\n    ).then((res) => {\n      if (!cancelled) setDistributions(res?.data?.distributions || []);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [taxonId, datasetKey]);\n\n  return (\n    <RouterContext.Provider value={buildRouter(routerProps)}>\n      {!taxon || distributions === null || rank.length === 0 ? (\n        <Row justify=\"center\" style={{ padding: \"24px\" }}>\n          <Col>\n            <Spin size=\"large\" />\n          </Col>\n        </Row>\n      ) : (\n        <Distributions\n          data={distributions}\n          datasetKey={datasetKey}\n          focalTaxon={taxon}\n          rankOrder={rank}\n          gbifChecklistKey={gbifChecklistKey}\n          showDistributionMap={true}\n          style={style}\n        />\n      )}\n    </RouterContext.Provider>\n  );\n};\n\nexport default DistributionsWrapper;\n","import { withTheme } from \"../withTheme\";\nimport { DistributionsWrapper } from \"../Taxon/DistributionsWrapper\";\n\nexport const TaxonDistribution = withTheme(DistributionsWrapper);\n"],"names":["DistributionsWrapper","taxonId","datasetKey","gbifChecklistKey","style","auth","routerProps","setAuth","taxon","setTaxon","useState","distributions","setDistributions","rank","setRank","useEffect","cancelled","client","config","res","r","_a","jsx","RouterContext","buildRouter","Row","Col","Spin","Distributions","TaxonDistribution","withTheme"],"mappings":";;;;;;;AAWO,MAAMA,IAAuB,CAAC;AAAA,EACnC,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AAGJ,EAAAC,EAAQF,CAAI;AACZ,QAAM,CAACG,GAAOC,CAAQ,IAAIC,EAAS,IAAI,GACjC,CAACC,GAAeC,CAAgB,IAAIF,EAAS,IAAI,GACjD,CAACG,GAAMC,CAAO,IAAIJ,EAAS,CAAA,CAAE;AAEnC,SAAAK,EAAU,MAAM;AACd,QAAIC,IAAY;AAIhB,QAHAP,EAAS,IAAI,GACbG,EAAiB,IAAI,GAEjB,GAACX,KAAW,CAACC;AAEjB,aAAAe,EAAO,GAAGC,EAAO,OAAO,YAAY,EAAE,KAAK,CAACC,MAAQ;AAClD,QAAKH,KAAWF,EAAQK,EAAI,KAAK,IAAI,CAACC,MAAMA,EAAE,IAAI,CAAC;AAAA,MACrD,CAAC,GACDH;AAAA,QACE,GAAGC,EAAO,OAAO,WAAWhB,CAAU,UAAU,mBAAmBD,CAAO,CAAC;AAAA,MAAA,EAC3E,KAAK,CAACkB,MAAQ;AACd,QAAKH,KAAWP,EAASU,EAAI,IAAI;AAAA,MACnC,CAAC,GACDF;AAAA,QACE,GAAGC,EAAO,OAAO,WAAWhB,CAAU,UAAU,mBAAmBD,CAAO,CAAC;AAAA,MAAA,EAC3E,KAAK,CAACkB,MAAQ;;AACd,QAAKH,KAAWJ,IAAiBS,IAAAF,KAAA,gBAAAA,EAAK,SAAL,gBAAAE,EAAW,kBAAiB,EAAE;AAAA,MACjE,CAAC,GAEM,MAAM;AACX,QAAAL,IAAY;AAAA,MACd;AAAA,EACF,GAAG,CAACf,GAASC,CAAU,CAAC,GAGtBoB,gBAAAA,EAAAA,IAACC,EAAc,UAAd,EAAuB,OAAOC,EAAYlB,CAAW,GACnD,UAAA,CAACE,KAASG,MAAkB,QAAQE,EAAK,WAAW,IACnDS,gBAAAA,EAAAA,IAACG,GAAA,EAAI,SAAQ,UAAS,OAAO,EAAE,SAAS,UACtC,UAAAH,gBAAAA,EAAAA,IAACI,GAAA,EACC,UAAAJ,gBAAAA,EAAAA,IAACK,GAAA,EAAK,MAAK,QAAA,CAAQ,EAAA,CACrB,GACF,IAEAL,gBAAAA,EAAAA;AAAAA,IAACM;AAAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,YAAAT;AAAA,MACA,YAAYM;AAAA,MACZ,WAAWK;AAAA,MACX,kBAAAV;AAAA,MACA,qBAAqB;AAAA,MACrB,OAAAC;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,GCtEayB,IAAoBC,EAAU9B,CAAoB;"}
+{"version":3,"file":"taxonDistribution.js","sources":["../src/Taxon/DistributionsWrapper.js","../src/entries/taxonDistribution.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport client, { setAuth } from \"../api/client\";\nimport config from \"../config\";\nimport { Row, Col, Spin } from \"antd\";\nimport Distributions from \"./Distributions\";\nimport { RouterContext, buildRouter } from \"../router\";\n\n// Standalone wrapper around the Taxon page's Distributions block.\n// Loads the focal taxon, its info (which carries the distributions array),\n// and the rank vocabulary — same data the Taxon page already loads — so\n// embedders can drop the map onto any page given just (datasetKey, taxonId).\nexport const DistributionsWrapper = ({\n  taxonId,\n  datasetKey,\n  gbifChecklistKey,\n  basemapStyle,\n  style,\n  auth,\n  ...routerProps\n}) => {\n  // Private candidate releases (preview/dev) require Basic auth on every call,\n  // including the taxon/info/rank fetches below via `client`.\n  setAuth(auth);\n  const [taxon, setTaxon] = useState(null);\n  const [distributions, setDistributions] = useState(null);\n  const [rank, setRank] = useState([]);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTaxon(null);\n    setDistributions(null);\n\n    if (!taxonId || !datasetKey) return undefined;\n\n    client(`${config.dataApi}vocab/rank`).then((res) => {\n      if (!cancelled) setRank(res.data.map((r) => r.name));\n    });\n    client(\n      `${config.dataApi}dataset/${datasetKey}/taxon/${encodeURIComponent(taxonId)}`\n    ).then((res) => {\n      if (!cancelled) setTaxon(res.data);\n    });\n    client(\n      `${config.dataApi}dataset/${datasetKey}/taxon/${encodeURIComponent(taxonId)}/info`\n    ).then((res) => {\n      if (!cancelled) setDistributions(res?.data?.distributions || []);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [taxonId, datasetKey]);\n\n  return (\n    <RouterContext.Provider value={buildRouter(routerProps)}>\n      {!taxon || distributions === null || rank.length === 0 ? (\n        <Row justify=\"center\" style={{ padding: \"24px\" }}>\n          <Col>\n            <Spin size=\"large\" />\n          </Col>\n        </Row>\n      ) : (\n        <Distributions\n          data={distributions}\n          datasetKey={datasetKey}\n          focalTaxon={taxon}\n          rankOrder={rank}\n          gbifChecklistKey={gbifChecklistKey}\n          basemapStyle={basemapStyle}\n          showDistributionMap={true}\n          style={style}\n        />\n      )}\n    </RouterContext.Provider>\n  );\n};\n\nexport default DistributionsWrapper;\n","import { withTheme } from \"../withTheme\";\nimport { DistributionsWrapper } from \"../Taxon/DistributionsWrapper\";\n\nexport const TaxonDistribution = withTheme(DistributionsWrapper);\n"],"names":["DistributionsWrapper","taxonId","datasetKey","gbifChecklistKey","basemapStyle","style","auth","routerProps","setAuth","taxon","setTaxon","useState","distributions","setDistributions","rank","setRank","useEffect","cancelled","client","config","res","r","_a","jsx","RouterContext","buildRouter","Row","Col","Spin","Distributions","TaxonDistribution","withTheme"],"mappings":";;;;;;;AAWO,MAAMA,IAAuB,CAAC;AAAA,EACnC,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AAGJ,EAAAC,EAAQF,CAAI;AACZ,QAAM,CAACG,GAAOC,CAAQ,IAAIC,EAAS,IAAI,GACjC,CAACC,GAAeC,CAAgB,IAAIF,EAAS,IAAI,GACjD,CAACG,GAAMC,CAAO,IAAIJ,EAAS,CAAA,CAAE;AAEnC,SAAAK,EAAU,MAAM;AACd,QAAIC,IAAY;AAIhB,QAHAP,EAAS,IAAI,GACbG,EAAiB,IAAI,GAEjB,GAACZ,KAAW,CAACC;AAEjB,aAAAgB,EAAO,GAAGC,EAAO,OAAO,YAAY,EAAE,KAAK,CAACC,MAAQ;AAClD,QAAKH,KAAWF,EAAQK,EAAI,KAAK,IAAI,CAACC,MAAMA,EAAE,IAAI,CAAC;AAAA,MACrD,CAAC,GACDH;AAAA,QACE,GAAGC,EAAO,OAAO,WAAWjB,CAAU,UAAU,mBAAmBD,CAAO,CAAC;AAAA,MAAA,EAC3E,KAAK,CAACmB,MAAQ;AACd,QAAKH,KAAWP,EAASU,EAAI,IAAI;AAAA,MACnC,CAAC,GACDF;AAAA,QACE,GAAGC,EAAO,OAAO,WAAWjB,CAAU,UAAU,mBAAmBD,CAAO,CAAC;AAAA,MAAA,EAC3E,KAAK,CAACmB,MAAQ;;AACd,QAAKH,KAAWJ,IAAiBS,IAAAF,KAAA,gBAAAA,EAAK,SAAL,gBAAAE,EAAW,kBAAiB,EAAE;AAAA,MACjE,CAAC,GAEM,MAAM;AACX,QAAAL,IAAY;AAAA,MACd;AAAA,EACF,GAAG,CAAChB,GAASC,CAAU,CAAC,GAGtBqB,gBAAAA,EAAAA,IAACC,EAAc,UAAd,EAAuB,OAAOC,EAAYlB,CAAW,GACnD,UAAA,CAACE,KAASG,MAAkB,QAAQE,EAAK,WAAW,IACnDS,gBAAAA,EAAAA,IAACG,GAAA,EAAI,SAAQ,UAAS,OAAO,EAAE,SAAS,UACtC,UAAAH,gBAAAA,EAAAA,IAACI,GAAA,EACC,UAAAJ,gBAAAA,EAAAA,IAACK,GAAA,EAAK,MAAK,QAAA,CAAQ,EAAA,CACrB,GACF,IAEAL,gBAAAA,EAAAA;AAAAA,IAACM;AAAAA,IAAA;AAAA,MACC,MAAMjB;AAAA,MACN,YAAAV;AAAA,MACA,YAAYO;AAAA,MACZ,WAAWK;AAAA,MACX,kBAAAX;AAAA,MACA,cAAAC;AAAA,MACA,qBAAqB;AAAA,MACrB,OAAAC;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,GCxEayB,IAAoBC,EAAU/B,CAAoB;"}

package/es/tree.js

@@ -8,13 +8,13 @@ import j, { createContext as at } from "react";
 import { Popover as ot, Divider as it, Spin as q, Tag as nt, Alert as w, Skeleton as rt, Tree as lt, Button as dt, Row as ht, Col as I, Checkbox as N } from "antd";
 import { sortBy as _, get as m, isUndefined as A, flatten as ct, isArray as O } from "lodash-es";
 import { L as P, c as K, R as H, s as ut, b as pt } from "./chunks/router-CssZk5qZ.js";
-import { c as D } from "./chunks/config-D1NH4DTr.js";
+import { c as D } from "./chunks/config-D4b3a4Yi.js";
 import L from "dataloader";
-import { c as V, b as z, g as ft } from "./chunks/dataset-BL6g4w0G.js";
-import { M as xt } from "./chunks/MergedDataBadge-C1CgoRFz.js";
+import { c as V, b as z, g as ft } from "./chunks/dataset-D_gmg2Zv.js";
+import { M as xt } from "./chunks/MergedDataBadge-FvHUdT7B.js";
 import { E as gt } from "./chunks/ErrorMsg-K8k5PPTp.js";
-import { g as yt } from "./chunks/sector-Qeo1zPxr.js";
-import { C as R, N as mt } from "./chunks/DatasetCitation-BXtAmjdZ.js";
+import { g as yt } from "./chunks/sector-CE-w32Gs.js";
+import { C as R, N as mt } from "./chunks/DatasetCitation-BnOkKDTv.js";
 import { r as F, w as M } from "./chunks/storage-BgdCo9fV.js";
 const E = at({
   datasetLoader: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "col-browser",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Catalogue of Life browse and search React components",
   "main": "umd/col-browser.js",
   "module": "es/index.js",

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,6 +132,12 @@ 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;
@@ -141,6 +153,12 @@ export interface ColBrowserConfig {
   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>;
 }
 
 /**

package/umd/col-browser.js

@@ -67804,13 +67804,19 @@ 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" ? normalize(key2, value) : value;
+      config[key2] = typeof value === "string" && !VERBATIM.has(key2) ? normalize(key2, value) : value;
     });
     return config;
   }
@@ -77980,6 +77986,7 @@ html body {
     });
     return out;
   };
+  const resolveBasemapStyle = (prop) => prop ?? config.basemapStyle;
   const wrapStyle = {
     position: "absolute",
     bottom: 8,
@@ -78136,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);
@@ -78249,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);
@@ -78262,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",
@@ -78335,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,
@@ -78361,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");
       });
@@ -78378,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(
@@ -78394,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;
@@ -78464,7 +78475,7 @@ html body {
       return () => {
         cancelled = true;
       };
-    }, [styleReady, records]);
+    }, [readyMap, records]);
     const onFocalClick = (e2) => {
       var _a3, _b2;
       const map = mapRef.current;
@@ -78492,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);
@@ -78519,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));
@@ -78551,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;
@@ -78584,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
             );
@@ -78594,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
             );
@@ -78605,7 +78615,7 @@ html body {
           }
         });
       });
-    }, [styleReady, descendantState, descendantColors]);
+    }, [readyMap, descendantState, descendantColors]);
     const onDescendantClick = (e2) => {
       var _a3, _b2;
       const map = mapRef.current;
@@ -79078,6 +79088,7 @@ html body {
     focalTaxon,
     rankOrder,
     gbifChecklistKey,
+    basemapStyle,
     label,
     md: md2
   }) => {
@@ -79156,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: [
@@ -88468,7 +88480,8 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
       const {
         datasetKey,
         showDistributionMap,
-        gbifChecklistKey
+        gbifChecklistKey,
+        basemapStyle
       } = this.props;
       const {
         taxon,
@@ -88776,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(", ") }),
@@ -88856,6 +88870,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     identifierLabel,
     showDistributionMap,
     gbifChecklistKey,
+    basemapStyle,
     auth,
     ...routerProps
   }) {
@@ -88868,6 +88883,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
         identifierLabel,
         showDistributionMap,
         gbifChecklistKey,
+        basemapStyle,
         auth
       }
     ) });
@@ -89828,6 +89844,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     taxonId,
     datasetKey,
     gbifChecklistKey,
+    basemapStyle,
     style: style2,
     auth,
     ...routerProps
@@ -89867,6 +89884,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
         focalTaxon: taxon,
         rankOrder: rank,
         gbifChecklistKey,
+        basemapStyle,
         showDistributionMap: true,
         style: style2
       }