@canopy-iiif/app 1.8.10 → 1.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "1.8.10",
+  "version": "1.8.12",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -46126,6 +46126,8 @@ var DEFAULT_TILE_LAYERS = [
     maxZoom: 19
   }
 ];
+var TRANSPARENT_TILE_LAYER_NAME = "Transparent";
+var TRANSPARENT_TILE_URL = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
 var CUSTOM_MARKER_SIZE = 40;
 var CUSTOM_MARKER_RADIUS = CUSTOM_MARKER_SIZE / 2;
 var CUSTOM_MARKER_POPUP_OFFSET = -CUSTOM_MARKER_RADIUS + 6;
@@ -46437,6 +46439,24 @@ function extractManifestKeysFromIiif(resource, fallback) {
   }
   return fallbackKey ? [fallbackKey] : [];
 }
+function createTransparentTileLayers(leaflet) {
+  if (!leaflet) return [];
+  try {
+    return [
+      {
+        name: TRANSPARENT_TILE_LAYER_NAME,
+        layer: leaflet.tileLayer(TRANSPARENT_TILE_URL, {
+          attribution: "",
+          maxZoom: 25,
+          minZoom: 0,
+          opacity: 0
+        })
+      }
+    ];
+  } catch (_) {
+    return [];
+  }
+}
 function buildTileLayers(inputLayers, leaflet) {
   if (!leaflet) return [];
   const layers = Array.isArray(inputLayers) && inputLayers.length ? inputLayers : DEFAULT_TILE_LAYERS;
@@ -46453,8 +46473,25 @@ function buildTileLayers(inputLayers, leaflet) {
     };
   }).filter(Boolean);
 }
-function buildMarkerIcon(marker, leaflet, colorOverride) {
+function buildMarkerIcon(marker, leaflet, colorOverride, markerStyle) {
   if (!leaflet) return null;
+  if (markerStyle === "small") {
+    const label = marker.keyLabel || marker.title || marker.summary || "";
+    const safeLabel = label ? escapeHtml(label) : "";
+    const color2 = colorOverride ? escapeHtml(colorOverride) : DEFAULT_ACCENT_HEX;
+    const dotStyle = color2 ? ` style="background-color:${color2}"` : "";
+    const html2 = `<div class="canopy-map__marker-label"><span class="canopy-map__marker-label-dot"${dotStyle}></span>` + (safeLabel ? `<span class="canopy-map__marker-label-text">${safeLabel}</span>` : "") + `</div>`;
+    try {
+      return leaflet.divIcon({
+        className: "canopy-map__marker canopy-map__marker--label",
+        html: html2,
+        iconAnchor: [6, 6],
+        popupAnchor: [0, 0]
+      });
+    } catch (_) {
+      return null;
+    }
+  }
   const hasThumbnail = Boolean(marker && marker.thumbnail);
   const size = CUSTOM_MARKER_SIZE;
   const anchor = CUSTOM_MARKER_RADIUS;
@@ -46476,12 +46513,13 @@ function buildMarkerIcon(marker, leaflet, colorOverride) {
     return null;
   }
 }
-function buildClusterOptions(leaflet) {
+function buildClusterOptions(leaflet, maxClusterRadius) {
   if (!leaflet) return null;
   const size = CUSTOM_MARKER_SIZE;
   const anchor = CUSTOM_MARKER_RADIUS;
   return {
     chunkedLoading: true,
+    maxClusterRadius: typeof maxClusterRadius === "number" ? maxClusterRadius : void 0,
     iconCreateFunction: (cluster) => {
       const count = cluster && typeof cluster.getChildCount === "function" ? cluster.getChildCount() : 0;
       return leaflet.divIcon({
@@ -46635,6 +46673,17 @@ function normalizeGeoReferences(value) {
   const list = Array.isArray(value) ? value : value ? [value] : [];
   return list.map((entry, index) => normalizeGeoReferenceEntry(entry, index)).filter(Boolean);
 }
+function normalizeMarkerVariant(value) {
+  if (!value) return null;
+  try {
+    const normalized = String(value).trim().toLowerCase();
+    if (!normalized) return null;
+    if (["small", "label", "inline"].includes(normalized)) return "small";
+    return null;
+  } catch (_) {
+    return null;
+  }
+}
 function extractNavMarkers(data, allowedKeys) {
   if (!data || !Array.isArray(data.manifests)) return [];
   const keys2 = allowedKeys instanceof Set ? allowedKeys : /* @__PURE__ */ new Set();
@@ -46704,8 +46753,10 @@ function Map3({
   legend = [],
   geoReferences = [],
   tileLayers = [],
+  disableTileLayers = false,
   scrollWheelZoom = false,
   cluster = true,
+  maxClusterRadius = null,
   customPoints = [],
   navDataset = null,
   iiifContent = null,
@@ -46871,28 +46922,38 @@ function Map3({
       if (!value || !label) return null;
       return {
         keyValue: String(value).trim(),
-        label: String(label).trim()
+        label: String(label).trim(),
+        markerType: normalizeMarkerVariant(
+          entry.markerType || entry.type || entry.variant
+        )
       };
     }).filter(Boolean);
   }, [resolvedKeyInput]);
   const markerKeyData = React38.useMemo(() => {
-    if (!normalizedLegendConfig.length) return { groups: [], colorMap: null };
-    const colorMap = createMarkerMap();
+    if (!normalizedLegendConfig.length) return { groups: [], metaMap: null };
+    const metaMap = createMarkerMap();
     const palette = generateLegendColors(normalizedLegendConfig.length);
     const groups = normalizedLegendConfig.map((entry, index) => {
       const color = palette[index] || palette[0] || DEFAULT_ACCENT_HEX;
-      colorMap.set(entry.keyValue, color);
+      metaMap.set(entry.keyValue, {
+        color,
+        markerType: entry.markerType || null
+      });
       return {
         keyValue: entry.keyValue,
         label: entry.label,
-        color
+        color,
+        markerType: entry.markerType || null
       };
     });
-    return { groups, colorMap };
+    return { groups, metaMap };
   }, [normalizedLegendConfig]);
   const markerKeyGroups = markerKeyData.groups;
-  const markerKeyColorMap = markerKeyData.colorMap;
-  const clusterOptions = React38.useMemo(() => buildClusterOptions(leafletLib), [leafletLib]);
+  const markerKeyMetaMap = markerKeyData.metaMap;
+  const clusterOptions = React38.useMemo(
+    () => buildClusterOptions(leafletLib, typeof maxClusterRadius === "number" ? maxClusterRadius : null),
+    [leafletLib, maxClusterRadius]
+  );
   React38.useEffect(() => {
     if (!containerRef.current || mapRef.current || !leafletLib) return void 0;
     const map = leafletLib.map(containerRef.current, {
@@ -46900,7 +46961,7 @@ function Map3({
       scrollWheelZoom: scrollWheelZoom === true
     });
     mapRef.current = map;
-    const layers = buildTileLayers(tileLayers, leafletLib);
+    const layers = disableTileLayers === true ? createTransparentTileLayers(leafletLib) : buildTileLayers(tileLayers, leafletLib);
     const layerControlEntries = {};
     layers.forEach((entry, index) => {
       try {
@@ -46930,7 +46991,7 @@ function Map3({
       mapRef.current = null;
       layerRef.current = null;
     };
-  }, [tileLayers, scrollWheelZoom, cluster, clusterOptions, leafletLib]);
+  }, [tileLayers, disableTileLayers, scrollWheelZoom, cluster, clusterOptions, leafletLib]);
   React38.useEffect(() => {
     const map = mapRef.current;
     if (!map || !leafletLib) return void 0;
@@ -46980,14 +47041,39 @@ function Map3({
     }
     const bounds = [];
     const popupCleanups = [];
+    const hoverCleanups = [];
     allMarkers.forEach((marker) => {
       if (!marker || !Number.isFinite(marker.lat) || !Number.isFinite(marker.lng)) return;
       const latlng = leafletLib.latLng(marker.lat, marker.lng);
       bounds.push(latlng);
-      const colorOverride = marker.type === "custom" && markerKeyColorMap && marker.keyValue ? markerKeyColorMap.get(String(marker.keyValue).trim()) : null;
-      const icon = buildMarkerIcon(marker, leafletLib, colorOverride);
+      const markerMeta = marker.type === "custom" && markerKeyMetaMap && marker.keyValue ? markerKeyMetaMap.get(String(marker.keyValue).trim()) : null;
+      const colorOverride = markerMeta && markerMeta.color ? markerMeta.color : null;
+      const markerStyle = markerMeta && markerMeta.markerType ? markerMeta.markerType : null;
+      const icon = buildMarkerIcon(marker, leafletLib, colorOverride, markerStyle);
       const leafletMarker = leafletLib.marker(latlng, icon ? { icon } : void 0);
-      const popup = renderPopup(marker);
+      const shouldShowPopup = markerStyle !== "small";
+      const popup = shouldShowPopup ? renderPopup(marker) : null;
+      const handleMouseOver = () => {
+        const el = leafletMarker && leafletMarker.getElement && leafletMarker.getElement();
+        if (el) el.classList.add("is-hovered");
+      };
+      const handleMouseOut = () => {
+        const el = leafletMarker && leafletMarker.getElement && leafletMarker.getElement();
+        if (el) el.classList.remove("is-hovered");
+      };
+      try {
+        leafletMarker.on("mouseover", handleMouseOver);
+        leafletMarker.on("mouseout", handleMouseOut);
+        hoverCleanups.push(() => {
+          try {
+            leafletMarker.off("mouseover", handleMouseOver);
+            leafletMarker.off("mouseout", handleMouseOut);
+          } catch (_) {
+          }
+          handleMouseOut();
+        });
+      } catch (_) {
+      }
       if (popup && popup.element) {
         try {
           leafletMarker.bindPopup(popup.element);
@@ -47061,6 +47147,12 @@ function Map3({
         } catch (_) {
         }
       });
+      hoverCleanups.forEach((cleanup) => {
+        try {
+          cleanup();
+        } catch (_) {
+        }
+      });
     };
   }, [allMarkers, defaultCenter, defaultZoom, leafletLib]);
   const isLoadingMarkers = iiifTargets.loading || navState.loading;
@@ -47089,7 +47181,10 @@ function Map3({
   return /* @__PURE__ */ React38.createElement(React38.Fragment, null, mapElement, /* @__PURE__ */ React38.createElement("div", { className: "canopy-map__key", "aria-label": "Map key" }, /* @__PURE__ */ React38.createElement("ul", { className: "canopy-map__key-list" }, markerKeyGroups.map((group) => /* @__PURE__ */ React38.createElement("li", { key: group.label, className: "canopy-map__key-item" }, /* @__PURE__ */ React38.createElement(
     "span",
     {
-      className: "canopy-map__key-dot",
+      className: [
+        "canopy-map__key-dot",
+        group.markerType === "small" ? "canopy-map__key-dot--small" : null
+      ].filter(Boolean).join(" "),
       "aria-hidden": "true",
       style: { backgroundColor: group.color || void 0 }
     }