@orioro/react-maplibre-util 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @orioro/react-maplibre-util
 
+## 0.6.0
+
+### Minor Changes
+
+- update all dependencies and multiple internal deps
+
+### Patch Changes
+
+- Updated dependencies
+  - @orioro/react-chart-util@0.3.0
+
+## 0.5.3
+
+### Patch Changes
+
+- fix layer ordering sync issue
+
 ## 0.5.2
 
 ### Patch Changes

package/dist/Controls/ControlContainer/index.d.ts

@@ -8,7 +8,7 @@ export type ControlContainerProps = {
     /** Button content and props */
     children: React.ReactNode;
 };
-export declare function ControlContainer({ style, position, children, }: ControlContainerProps): any;
+export declare function ControlContainer({ style, position, children, }: ControlContainerProps): React.ReactPortal | null;
 export declare namespace ControlContainer {
     var Unstyled: typeof ControlContainerWithStyleReset;
 }

package/dist/DynamicImages/index.d.ts

@@ -1,2 +1,5 @@
 export * from './DynamicImages';
 export * from './svgImages';
+export * from './svgPatterns';
+import * as SVG_PATTERNS from './svgPatterns';
+export { SVG_PATTERNS };

package/dist/DynamicImages/svgImages/iconPathToSvg.d.ts

@@ -0,0 +1,9 @@
+export type IconPathToSvgOptions = {
+    size?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: string | number;
+    viewBox?: string;
+    style?: string;
+};
+export declare function iconPathToSvg(path: string, { size, fill, stroke, strokeWidth, viewBox, style, }?: IconPathToSvgOptions): string;

package/dist/DynamicImages/svgImages/index.d.ts

@@ -1,30 +1,8 @@
-import { StyleImageMetadata } from 'maplibre-gl';
-type IconPathToSvgOptions = {
-    size?: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: string | number;
-    viewBox?: string;
-    style?: string;
-};
-export declare function iconPathToSvg(path: string, { size, fill, stroke, strokeWidth, viewBox, style, }?: IconPathToSvgOptions): string;
-/**
- * Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
- *
- * @param svgString - The SVG markup as a string
- * @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
- * @returns Promise resolving to { width, height, data, pixelRatio }
- */
-export declare function svgToMaplibreImage(svgString: string, pixelRatio?: number): Promise<[
-    {
-        width: number;
-        height: number;
-        data: Uint8ClampedArray;
-    },
-    Partial<StyleImageMetadata>
-]>;
-export declare function svgIconId(iconId: string, options?: IconPathToSvgOptions): string;
-type SvgIconGeneratorReturn<T extends Record<string, string>> = {
+import { type IconPathToSvgOptions } from './iconPathToSvg';
+import type { StyleImageMetadata } from 'maplibre-gl';
+export declare function svgImageId(imageId: string, options?: IconPathToSvgOptions): string;
+type SvgIconSpecsById = Record<string, string | ((options: Record<string, any>) => string)>;
+type SvgIconGeneratorReturn<T extends SvgIconSpecsById> = {
     (imageId: string): Promise<[
         {
             width: number;
@@ -36,5 +14,6 @@ type SvgIconGeneratorReturn<T extends Record<string, string>> = {
 } & {
     [K in keyof T]: (options?: IconPathToSvgOptions) => string;
 };
-export declare function svgIconGenerator<T extends Record<string, string>>(iconPathsById: T): SvgIconGeneratorReturn<T>;
+export declare function svgImageGenerator<T extends SvgIconSpecsById>(svgImageSpecsById: T): SvgIconGeneratorReturn<T>;
+export declare function svgIconGenerator(...args: any[]): SvgIconGeneratorReturn<any>;
 export {};

package/dist/DynamicImages/svgImages/svgToMaplibreImage.d.ts

@@ -0,0 +1,16 @@
+import type { StyleImageMetadata } from 'maplibre-gl';
+/**
+ * Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
+ *
+ * @param svgString - The SVG markup as a string
+ * @param pixelRatio - (Optional) device pixel ratio, defaults to window.devicePixelRatio
+ * @returns Promise resolving to { width, height, data, pixelRatio }
+ */
+export declare function svgToMaplibreImage(svgString: string, inputPixelRatio?: number): Promise<[
+    {
+        width: number;
+        height: number;
+        data: Uint8ClampedArray;
+    },
+    Partial<StyleImageMetadata>
+]>;

package/dist/DynamicImages/svgPatterns/index.d.ts

@@ -0,0 +1,8 @@
+export declare const squares_1: (data: Record<string, any>) => string;
+export declare const triangles_1: (data: Record<string, any>) => string;
+export declare const diamonds_1: (data: Record<string, any>) => string;
+export declare const cross_1: (data: Record<string, any>) => string;
+export declare const mosaic_1: (data: Record<string, any>) => string;
+export declare const waves_1: (data: Record<string, any>) => string;
+export declare const circles_1: (data: Record<string, any>) => string;
+export declare const lines_1: (data: Record<string, any>) => string;

package/dist/LayeredMap/layeredMapOnClickHandler.d.ts

@@ -3,7 +3,7 @@ import { Merge } from 'type-fest';
 type ClickableFeature = Merge<MapGeoJSONFeature, {
     layer: {
         id: string;
-        onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent) => any;
+        onClick: (feature: MapGeoJSONFeature, event: AugmentedMouseEvent, context: Record<string, any>) => any;
     };
 }>;
 type AugmentedMouseEvent = Merge<MapMouseEvent, {
@@ -11,6 +11,7 @@ type AugmentedMouseEvent = Merge<MapMouseEvent, {
 }>;
 type LayeredMapOnClickHandlerProps = {
     resolveTargetFeature?: (features: AugmentedMouseEvent['features'], event: AugmentedMouseEvent) => ClickableFeature | Promise<ClickableFeature>;
+    context?: Record<string, any>;
 };
-export declare function layeredMapOnClickHandler({ resolveTargetFeature, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
+export declare function layeredMapOnClickHandler({ resolveTargetFeature, context, }?: LayeredMapOnClickHandlerProps): (e: AugmentedMouseEvent) => Promise<void>;
 export {};

package/dist/LayeredMap/syncLayerOrder.d.ts

@@ -0,0 +1,23 @@
+import type { Map } from 'maplibre-gl';
+export type ParseLayerOrderOpts = {
+    map: Map;
+    layerIds: string[];
+};
+export declare function parseLayerOrder({ map, layerIds }: ParseLayerOrderOpts): string[];
+export type SyncLayerOrderOpts = {
+    expectedLayerOrderId: string[];
+    map: Map;
+    topAnchorLayerId?: string;
+};
+/**
+ * Sync MapLibre layer order to match `expectedLayerOrderId`.
+ *
+ * - Only layers present in `expectedLayerOrderId` are moved.
+ * - Missing layers are ignored (no-op for those entries).
+ * - If `topAnchorLayerId` is provided, the last expected layer is positioned
+ *   just beneath that anchor; otherwise it becomes the topmost layer.
+ *
+ * This helps counteract dynamic reordering issues when using react-map-gl.
+ * See: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+ */
+export declare function syncLayerOrder({ expectedLayerOrderId, map, topAnchorLayerId, }: SyncLayerOrderOpts): void;

package/dist/SyncedMaps/index.d.ts

@@ -1 +1,3 @@
 export * from './SyncedMaps';
+export * from './useTilesLoading';
+export * from './useMapRegistry';

package/dist/SyncedMaps/useMapRegistry.d.ts

@@ -0,0 +1,7 @@
+import type { Map } from 'maplibre-gl';
+import type { MapEvent } from 'react-map-gl/maplibre';
+export declare function useMapRegistry(): {
+    maps: Map[];
+    onLoad: (evt: MapEvent) => NodeJS.Timeout;
+    onRemove: (evt: MapEvent) => void;
+};

package/dist/SyncedMaps/useTilesLoading.d.ts

@@ -0,0 +1,2 @@
+import type { Map } from 'maplibre-gl';
+export declare function useTilesLoading(maps: Map | Map[]): boolean;

package/dist/index.mjs

@@ -1,24 +1,32 @@
 import { __assign, __spreadArray, __rest, __awaiter, __generator, __makeTemplateObject } from 'tslib';
-import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useState, useCallback, useLayoutEffect, useEffect, createRef } from 'react';
+import React, { forwardRef, useContext, createContext, useRef, useMemo, useImperativeHandle, useEffect, useState, useCallback, useLayoutEffect, createRef } from 'react';
 import { Map, Source, Layer, useMap, useControl } from 'react-map-gl/maplibre';
-import { isPlainObject, uniq, uniqBy, pick, omit } from 'lodash-es';
+import { isPlainObject, uniq, uniqBy, isEqual, pick, omit } from 'lodash-es';
 import { Flex, useRefByKey, useLocalState, DropdownMenu } from '@orioro/react-ui-core';
 import styled from 'styled-components';
 import { usePrevious } from 'react-use';
 import { mergeRefs } from 'react-merge-refs';
-import { strExpr } from '@orioro/util';
+import { mdiCloseCircleOutline, mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
+import { interpolate, strExpr } from '@orioro/util';
 import { ckmeans } from 'simple-statistics';
 import { schemeYlOrRd } from 'd3-scale-chromatic';
 import { maxIndex, range, variance, sum } from 'd3';
 import { bbox } from '@turf/turf';
 import { createPortal } from 'react-dom';
-import { mdiCheck, mdiTerrain, mdiVideo3d } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { Tooltip } from '@radix-ui/themes';
 import maplibregl from 'maplibre-gl';
 import mlcontour from 'maplibre-contour';
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
 
+function _validZIndex(zIndex) {
+  return typeof zIndex === 'number' && !Number.isNaN(zIndex);
+}
+// Return 1 makes layerB come first in array order
+// and layerA later, so it will be
+// rendered on top of layerB
+var LAYER_A_ON_TOP_OF_B = 1;
+var LAYER_B_ON_TOP_OF_A = -1;
 function sortLayers(layers, _a) {
   var existingLayers = _a.existingLayers;
   var existingLayersById = existingLayers ? Object.fromEntries(existingLayers.map(function (layer) {
@@ -31,7 +39,27 @@ function sortLayers(layers, _a) {
   // - Later in the list → Rendered on top (higher z-index).
   // - Earlier in the list → Rendered below.
   //
-  return layers.map(function (layer, index) {
+  return layers
+  //
+  // PREVIOUS SORT:
+  // .map((layer, index) => ({
+  //   ...layer,
+  //   //
+  //   // Allow for zIndex overriding
+  //   // In case no zIndex is set, respect the order in which
+  //   // layers were provided.
+  //   //
+  //   // Layers that come after are rendered on top of previous layers
+  //   //
+  //   zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : index,
+  // }))
+  // //
+  // // Order layers in ascending zIndex order, so that
+  // // layers with higher zIndex are rendered later and on top of
+  // // previous ones
+  // //
+  // .sort((layerA, layerB) => (layerA.zIndex >= layerB.zIndex ? 1 : -1))
+  .map(function (layer, index) {
     return __assign(__assign({}, layer), {
       //
       // Allow for zIndex overriding
@@ -40,7 +68,8 @@ function sortLayers(layers, _a) {
       //
       // Layers that come after are rendered on top of previous layers
       //
-      zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : index
+      _inputOrderIndex: index,
+      zIndex: typeof layer.zIndex === 'number' ? layer.zIndex : null
     });
   })
   //
@@ -48,9 +77,38 @@ function sortLayers(layers, _a) {
   // layers with higher zIndex are rendered later and on top of
   // previous ones
   //
+  // Layers without zIndex are always rendered beneath
+  // those with zIndex
+  //
+  // Layers with the same zIndex are compared using _inputOrderIndex
+  //
   .sort(function (layerA, layerB) {
-    return layerA.zIndex >= layerB.zIndex ? 1 : -1;
-  }).map(function (layer, index, sortedLayers) {
+    var aValid = _validZIndex(layerA.zIndex);
+    var bValid = _validZIndex(layerB.zIndex);
+    var aZIndex = layerA.zIndex;
+    var bZIndex = layerB.zIndex;
+    if (aValid && !bValid) {
+      return LAYER_A_ON_TOP_OF_B;
+    } else if (!aValid && bValid) {
+      return LAYER_B_ON_TOP_OF_A;
+    } else if (!aValid && !bValid || aZIndex === bZIndex) {
+      return layerA._inputOrderIndex >= layerB._inputOrderIndex ? LAYER_A_ON_TOP_OF_B : LAYER_B_ON_TOP_OF_A;
+    } else {
+      return aZIndex > bZIndex ? LAYER_A_ON_TOP_OF_B : LAYER_B_ON_TOP_OF_A;
+    }
+  })
+  //
+  // This was a strategy to use beforeId to
+  // sync map order. We've faced some pitfalls:
+  // - Some layers do not exist when multiple layers
+  //   are created at once, thus maplibre fails to
+  //   apply beforeId (and throws errors)
+  // - There are issues related to layer dynamic ordering,
+  //   see: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+  // - We've opted for manually syncing layer orders when
+  //   layers update
+  //
+  .map(function (layer, index, sortedLayers) {
     if (index === sortedLayers.length - 1) {
       // is last layer
       return __assign(__assign({}, layer), {
@@ -164,6 +222,62 @@ function parseMapViews(orderedViews, _a) {
   };
 }
 
+//
+// Retrive a list of current ordered layer ids
+// within a given set of layer ids
+//
+function parseLayerOrder(_a) {
+  var map = _a.map,
+    layerIds = _a.layerIds;
+  return map.getLayersOrder().filter(function (layerId) {
+    return layerIds.includes(layerId);
+  });
+}
+/**
+ * Sync MapLibre layer order to match `expectedLayerOrderId`.
+ *
+ * - Only layers present in `expectedLayerOrderId` are moved.
+ * - Missing layers are ignored (no-op for those entries).
+ * - If `topAnchorLayerId` is provided, the last expected layer is positioned
+ *   just beneath that anchor; otherwise it becomes the topmost layer.
+ *
+ * This helps counteract dynamic reordering issues when using react-map-gl.
+ * See: https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+ */
+function syncLayerOrder(_a) {
+  var expectedLayerOrderId = _a.expectedLayerOrderId,
+    map = _a.map,
+    _b = _a.topAnchorLayerId,
+    topAnchorLayerId = _b === void 0 ? undefined : _b;
+  var currentLayerOrderId = parseLayerOrder({
+    map: map,
+    layerIds: expectedLayerOrderId
+  });
+  if (isEqual(expectedLayerOrderId, currentLayerOrderId)) {
+    return;
+  }
+  expectedLayerOrderId.forEach(function (layerId, index) {
+    if (!map.getLayer(layerId)) {
+      return;
+    }
+    if (index === expectedLayerOrderId.length - 1) {
+      // Place the last expected layer just beneath the top anchor (if any),
+      // otherwise move it to the absolute top.
+      map.moveLayer(layerId, topAnchorLayerId);
+    } else {
+      var beneathLayerId = expectedLayerOrderId[index + 1];
+      if (!map.getLayer(beneathLayerId)) {
+        return;
+      }
+      try {
+        map.moveLayer(layerId, beneathLayerId);
+      } catch (err) {
+        console.warn("failed to move ".concat(layerId, " beneath ").concat(beneathLayerId));
+      }
+    }
+  });
+}
+
 // import { mergeRefs } from 'react-merge-refs'
 //
 // Augment mouse events with info from original view
@@ -230,6 +344,28 @@ var LayeredMap = /*#__PURE__*/forwardRef(function LayeredMapInner(_a, layeredMap
   useImperativeHandle(layeredMapRef, function () {
     return imperativeHandle;
   }, [imperativeHandle]);
+  //
+  // Force sync layer order
+  // https://github.com/visgl/react-map-gl/issues/939#issuecomment-1515395161
+  //
+  useEffect(function () {
+    if (!(parsed === null || parsed === void 0 ? void 0 : parsed.layers) || !mapRef.current) {
+      return;
+    }
+    // Timeout ensures layers are added to map before moving
+    var timeoutId = setTimeout(function () {
+      var expectedLayerOrderId = parsed.layers.map(function (layer) {
+        return layer.id;
+      });
+      syncLayerOrder({
+        expectedLayerOrderId: expectedLayerOrderId,
+        map: mapRef.current
+      });
+    }, 0);
+    return function () {
+      clearTimeout(timeoutId);
+    };
+  }, [parsed === null || parsed === void 0 ? void 0 : parsed.layers]);
   return /*#__PURE__*/React.createElement(Map, __assign({
     ref: mapRef,
     interactiveLayerIds: __spreadArray(__spreadArray([], interactiveLayerIdsInput, true), parsed.interactiveLayerIds, true)
@@ -259,7 +395,9 @@ function selectFirstClickableFeature(features) {
 function layeredMapOnClickHandler(_a) {
   var _b = _a === void 0 ? {} : _a,
     _c = _b.resolveTargetFeature,
-    resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c;
+    resolveTargetFeature = _c === void 0 ? selectFirstClickableFeature : _c,
+    _d = _b.context,
+    context = _d === void 0 ? {} : _d;
   return function onClick(e) {
     return __awaiter(this, void 0, void 0, function () {
       var features, clickableFeatures, targetFeature, _a;
@@ -282,7 +420,7 @@ function layeredMapOnClickHandler(_a) {
             _b.label = 3;
           case 3:
             targetFeature = _a;
-            targetFeature.layer.onClick(targetFeature, e);
+            targetFeature.layer.onClick(targetFeature, e, context);
             _b.label = 4;
           case 4:
             return [2 /*return*/];
@@ -296,6 +434,9 @@ var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTem
 var DataSectionHeading = styled.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"], ["\n  margin: 0;\n  line-height: 1.2;\n  font-size: 1rem;\n"])));
 var DataSectionContainer = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 15px 10px;\n"], ["\n  padding: 15px 10px;\n"])));
 var EntriesList = styled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"], ["\n  padding: 0;\n  list-style: none;\n  margin-top: 0;\n  margin-bottom: 0;\n  > li + li {\n    margin-top: 4px;\n  }\n"])));
+function _notEmpty(value) {
+  return typeof value !== 'undefined' && value !== null && value !== '';
+}
 function DataSection(_a) {
   var title = _a.title,
     entries = _a.entries,
@@ -303,12 +444,12 @@ function DataSection(_a) {
   return Array.isArray(entries) && entries.length > 0 && (/*#__PURE__*/React.createElement(DataSectionContainer, __assign({
     direction: "column",
     gap: "10px"
-  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.map(function (_a, index) {
+  }, props), title && /*#__PURE__*/React.createElement(DataSectionHeading, null, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EntriesList, null, entries.filter(Boolean).map(function (_a, index) {
     var label = _a[0],
       value = _a[1];
     return /*#__PURE__*/React.createElement("li", {
       key: index
-    }, typeof label === 'string' ? /*#__PURE__*/React.createElement("span", null, label, ": ") : label, typeof value === 'string' ? (/*#__PURE__*/React.createElement("span", {
+    }, typeof label === 'string' ? (/*#__PURE__*/React.createElement("span", null, "".concat(label).concat(_notEmpty(value) ? ': ' : ''))) : label, typeof value === 'string' ? (/*#__PURE__*/React.createElement("span", {
       style: {
         fontWeight: 'bold'
       }
@@ -836,6 +977,14 @@ function makeSyncedMaps(_a) {
         mapInstances: mapInstanceRefs
       };
     }, [mapInstanceRefs]);
+    // Let's review, this might have performance impact
+    var cursor = useMemo(function () {
+      var _a;
+      return isDragging ? 'grabbing' : (((_a = hoverInfo === null || hoverInfo === void 0 ? void 0 : hoverInfo.features) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ? hoverInfo.features.some(function (feat) {
+        var _a;
+        return typeof ((_a = feat.layer) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
+      }) ? 'pointer' : 'default' : 'default';
+    }, [isDragging, hoverInfo]);
     return /*#__PURE__*/React.createElement(Flex, {
       ref: containerRef,
       direction: "row",
@@ -861,7 +1010,9 @@ function makeSyncedMaps(_a) {
         }
       })) : null, Array.isArray(tooltips) && tooltips[index], /*#__PURE__*/React.createElement(MapComponent, __assign({
         ref: setMapInstanceRef(index),
-        cursor: isDragging ? 'grabbing' : 'default'
+        // cursor={isDragging ? 'grabbing' : 'default'}
+        // Let's review, this might have performance impact
+        cursor: cursor
       }, baseMapProps, mapProps, maps.length > 1 ? viewState || {} : {}, {
         style: __assign(__assign({}, mapProps.style || {}), {
           position: 'absolute',
@@ -897,6 +1048,70 @@ var SyncedMaps = makeSyncedMaps({
 });
 var templateObject_1;
 
+function useTilesLoading(maps) {
+  maps = Array.isArray(maps) ? maps : [maps];
+  var _a = useState(false),
+    loading = _a[0],
+    setLoading = _a[1];
+  var checkLoading = function checkLoading() {
+    var loading = maps.some(function (map) {
+      return !map.areTilesLoaded();
+    });
+    setLoading(loading);
+  };
+  useEffect(function () {
+    var handlers = maps.map(function (map) {
+      var update = function update() {
+        return checkLoading();
+      };
+      map.on('dataloading', update);
+      // map.on('data', update)
+      map.on('idle', update);
+      return function () {
+        map.off('dataloading', update);
+        // map.off('data', update)
+        map.off('idle', update);
+      };
+    });
+    checkLoading(); // initial
+    return function () {
+      return handlers.forEach(function (off) {
+        return off();
+      });
+    };
+  }, [maps]);
+  return loading;
+}
+
+function useMapRegistry() {
+  var _a = useState([]),
+    maps = _a[0],
+    setMaps = _a[1];
+  var onLoad = useCallback(function (evt) {
+    //
+    // Set maps in next tick, so that does not interfere
+    // in map element rendering
+    //
+    return setTimeout(function () {
+      return setMaps(function (currMaps) {
+        return __spreadArray(__spreadArray([], currMaps, true), [evt.target], false);
+      });
+    }, 0);
+  }, []);
+  var onRemove = useCallback(function (evt) {
+    return setMaps(function (currMaps) {
+      return currMaps.filter(function (map) {
+        return map !== evt.target;
+      });
+    });
+  }, []);
+  return {
+    maps: maps,
+    onLoad: onLoad,
+    onRemove: onRemove
+  };
+}
+
 function DynamicImages(_a) {
   var _this = this;
   var onGenerateImage = _a.onGenerateImage;
@@ -961,6 +1176,7 @@ function iconPathToSvg(path, _a) {
   var pathAttrs = ["fill=\"".concat(fill, "\""), style ? "style=\"".concat(style, "\"") : ''].filter(Boolean).join(' ');
   return "<svg ".concat(svgAttrs, "><path ").concat(pathAttrs, " d=\"").concat(path, "\" /></svg>");
 }
+
 /**
  * Renders an SVG string onto a canvas and returns an object compatible with maplibre `addImage`.
  *
@@ -969,9 +1185,9 @@ function iconPathToSvg(path, _a) {
  * @returns Promise resolving to { width, height, data, pixelRatio }
  */
 function svgToMaplibreImage(svgString_1) {
-  return __awaiter(this, arguments, void 0, function (svgString, pixelRatio) {
-    if (pixelRatio === void 0) {
-      pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  return __awaiter(this, arguments, void 0, function (svgString, inputPixelRatio) {
+    if (inputPixelRatio === void 0) {
+      inputPixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
     }
     return __generator(this, function (_a) {
       return [2 /*return*/, new Promise(function (resolve, reject) {
@@ -981,6 +1197,8 @@ function svgToMaplibreImage(svgString_1) {
         var url = URL.createObjectURL(svgBlob);
         var img = new Image();
         img.onload = function () {
+          // Normalize pixel ratio: integer and at least 1
+          var pixelRatio = Math.max(1, Math.round(inputPixelRatio || 1));
           var width = img.width * pixelRatio;
           var height = img.height * pixelRatio;
           var canvas = document.createElement('canvas');
@@ -1008,21 +1226,64 @@ function svgToMaplibreImage(svgString_1) {
     });
   });
 }
-function svgIconId(iconId, options) {
-  return options ? "".concat(iconId, "(").concat(JSON.stringify(options), ")") : iconId;
+
+function svgImageId(imageId, options) {
+  return options ? "".concat(imageId, "(").concat(JSON.stringify(options), ")") : imageId;
 }
-function svgIconGenerator(iconPathsById) {
-  var fns = Object.fromEntries(Object.entries(iconPathsById).map(function (_a) {
-    var iconId = _a[0],
-      iconPath = _a[1];
-    return [iconId, function (options) {
-      if (options === void 0) {
-        options = {};
-      }
-      return function () {
-        return iconPathToSvg(iconPath, options);
-      };
-    }];
+var ERROR_ICON_EXPR = function ERROR_ICON_EXPR(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return function () {
+    return iconPathToSvg(mdiCloseCircleOutline, __assign({
+      fill: 'red'
+    }, options));
+  };
+};
+function svgImageGenerator(svgImageSpecsById) {
+  var fns = Object.fromEntries(Object.entries(svgImageSpecsById).map(function (_a) {
+    var imageId = _a[0],
+      iconSpec = _a[1];
+    if (typeof iconSpec === 'string' && iconSpec.startsWith('<svg')) {
+      //
+      // Full svg
+      //
+      return [imageId, function (options) {
+        if (options === void 0) {
+          options = {};
+        }
+        return function () {
+          return interpolate(iconSpec, options);
+        };
+      }];
+    } else if (typeof iconSpec === 'string') {
+      //
+      // Its a string, assume it is an svg path
+      //
+      return [imageId, function (options) {
+        if (options === void 0) {
+          options = {};
+        }
+        return function () {
+          return iconPathToSvg(iconSpec, options);
+        };
+      }];
+    } else if (typeof iconSpec === 'function') {
+      //
+      // Function that returns custom svg
+      //
+      return [imageId, function (options) {
+        if (options === void 0) {
+          options = {};
+        }
+        return function () {
+          return iconSpec(options);
+        };
+      }];
+    } else {
+      console.warn("Invalid icon spec for ".concat(imageId, ", will ignore"), iconSpec);
+      return [imageId, ERROR_ICON_EXPR];
+    }
   }));
   var expr = strExpr({
     expressions: fns
@@ -1043,13 +1304,89 @@ function svgIconGenerator(iconPathsById) {
       });
     });
   }
-  Object.assign(onGenerateSvgImage, Object.fromEntries(Object.keys(iconPathsById).map(function (iconId) {
-    return [iconId, function (options) {
-      return svgIconId(iconId, options);
+  //
+  // Expose generator fns
+  //
+  Object.assign(onGenerateSvgImage, Object.fromEntries(Object.keys(svgImageSpecsById).map(function (imageId) {
+    return [imageId, function (options) {
+      return svgImageId(imageId, options);
     }];
   })));
   return onGenerateSvgImage;
 }
+function svgIconGenerator() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  console.warn('svgIconGenerator is deprecated, migrate to svgImageGenerator');
+  return svgImageGenerator.apply(void 0, args);
+}
+
+function _pattern(strTemplate) {
+  return function (data) {
+    return interpolate(strTemplate, data);
+  };
+}
+function _svgViewBox(_a) {
+  var height = _a.height,
+    width = _a.width;
+  return "viewBox=\"0 0 ".concat(width, " ").concat(height, "\" height=\"").concat(height, "\" width=\"").concat(width, "\"");
+}
+function _bgRect() {
+  return "<rect\n    width=\"100%\"\n    height=\"100%\"\n    fill=\"${ fill = transparent }\"\n  />";
+}
+// Source:
+// https://pattern.monster/cross-section
+var squares_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  height: 20,
+  width: 20
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"20\"\n      height=\"20\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"2\"\n        d=\"M10 0v20ZM0 10h20Z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+// Source:
+// https://pattern.monster/triangles-4
+var triangles_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  height: 40,
+  width: 20
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"20\"\n      height=\"40\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+// Source:
+// https://pattern.monster/diamonds-1
+var diamonds_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  height: 50,
+  width: 50
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"50\"\n      height=\"50\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M50 25 37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+var cross_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  height: 20,
+  width: 20
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"20\"\n      height=\"20\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        stroke-linecap=\"square\"\n        d=\"M3.25 10h13.5M10 3.25v13.5\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+// https://pattern.monster/cubes-1
+var mosaic_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  width: 60,
+  height: 60
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"60\"\n      height=\"60\"\n      patternUnits=\"userSpaceOnUse\">\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M15 30v30m-7.5 0V30h15v30m7.5 0H0V30h30M45 0v30m7.5-30v30m-15 0V0M30 0h30v30M30 45h30m-30-7.5h30m0 15H30M30 30h30v30H30zM0 15h30M0 7.5h30m0 15H0M0 0h30v30H0z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+var waves_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  width: 120,
+  height: 80
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"120\"\n      height=\"80\"\n      patternUnits=\"userSpaceOnUse\">\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M-50.129 12.685C-33.346 12.358-16.786 4.918 0 5c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M-50.129 32.685C-33.346 32.358-16.786 24.918 0 25c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M-50.129 52.685C-33.346 52.358-16.786 44.918 0 45c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M-50.129 72.685C-33.346 72.358-16.786 64.918 0 65c16.787.082 43.213 10 60 10s43.213-9.918 60-10 33.346 7.358 50.129 7.685\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+var circles_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  width: 20,
+  height: 20
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"20\"\n      height=\"20\"\n      patternUnits=\"userSpaceOnUse\">\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+var lines_1 = _pattern("<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  ".concat(_svgViewBox({
+  width: 20,
+  height: 80
+}), ">\n  <defs>\n    <pattern\n      patternTransform=\"scale(${ scale = 1 })\"\n      id=\"a\"\n      width=\"20\"\n      height=\"80\"\n      patternUnits=\"userSpaceOnUse\">\n      ").concat(_bgRect(), "\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M0 10h20z\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M0 30h20z\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M0 50h20z\"\n      />\n      <path\n        fill=\"transparent\"\n        stroke=\"${ stroke = #000000 }\"\n        stroke-width=\"${ strokeWidth = 2 }\"\n        d=\"M0 70h20z\"\n      />\n    </pattern>\n  </defs>\n  <rect width=\"800%\" height=\"800%\" fill=\"url(#a)\" />\n</svg>"));
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    circles_1: circles_1,
+    cross_1: cross_1,
+    diamonds_1: diamonds_1,
+    lines_1: lines_1,
+    mosaic_1: mosaic_1,
+    squares_1: squares_1,
+    triangles_1: triangles_1,
+    waves_1: waves_1
+});
 
 var DEFAULT_MIN_K = 3;
 var DEFAULT_MAX_K = 9;
@@ -1571,4 +1908,4 @@ function InspectControl(props) {
   return null;
 }
 
-export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, iconPathToSvg, layeredMapOnClickHandler, makeSyncedMaps, mapSetFeaturesState, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, svgIconGenerator, svgIconId, svgToMaplibreImage, useClientRect, useHover, useLayeredMap, withHover };
+export { $naturalBreaks, ControlContainer, DynamicImages, HoverTooltip, InspectControl, LayeredMap, MapWindow, index as SVG_PATTERNS, SyncedMaps, TerrainControl, applyReactStyle, augmentFeature, circles_1, cross_1, diamonds_1, ensureAddLayer, ensureAddSource, ensureRemoveLayer, ensureRemoveSource, fitGeometry, fmtLayerAbsoluteId, getSrcLayer, getSrcViewByLayerId, hoverParseEvent, layeredMapOnClickHandler, lines_1, makeSyncedMaps, mapSetFeaturesState, mosaic_1, naturalBreakBounds, parseMapViews, scaleNaturalBreaks, sortLayers, squares_1, svgIconGenerator, svgImageGenerator, svgImageId, triangles_1, useClientRect, useHover, useLayeredMap, useMapRegistry, useTilesLoading, waves_1, withHover };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioro/react-maplibre-util",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/index.mjs",
@@ -51,12 +51,12 @@
     "@maplibre/maplibre-gl-inspect": "^1.7.1",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@orioro/react-chart-util": "^0.2.0",
+    "@orioro/react-chart-util": "^0.3.0",
     "@orioro/react-select": "^3.0.2",
-    "@orioro/react-ui-core": "^0.0.6",
-    "@orioro/resolve": "^0.1.2",
+    "@orioro/react-ui-core": "^0.0.14",
+    "@orioro/resolve": "^0.1.9",
     "@orioro/scale-util": "^0.0.2",
-    "@orioro/util": "^0.13.0",
+    "@orioro/util": "^0.15.1",
     "@turf/turf": "^7.2.0",
     "d3": "^7.9.0",
     "d3-scale-chromatic": "^3.1.0",