@rio-cloud/rio-uikit 2.3.0-beta.2 → 2.3.0

package/components/map/components/features/basics/Marker.js

@@ -1,46 +1,105 @@
-import v, { useRef as I, useEffect as u } from "react";
-import k from "react-dom/server";
-import { removeEventListenerMap as f, addEventListenerMap as d } from "../../../utils/eventHandling.js";
-import { useMapContext as g } from "../../MapContext.js";
-const M = (e) => e instanceof H.map.Icon, l = (e) => e ? !M(e) : !1, D = (e) => {
-  if (M(e) || e instanceof H.map.DomIcon)
+import w, { useRef as k, useEffect as l } from "react";
+import O from "react-dom/server";
+import { removeEventListenerMap as b, addEventListenerMap as g } from "../../../utils/eventHandling.js";
+import { useMapContext as y } from "../../MapContext.js";
+const v = (e) => e instanceof H.map.Icon, p = (e) => e ? !v(e) : !1, x = 500, u = /* @__PURE__ */ new Map();
+let M = /* @__PURE__ */ new WeakMap(), C = !0;
+const S = () => ({
+  cacheEnabled: C,
+  domIconCreations: 0,
+  markupCacheHits: 0,
+  markupCacheMisses: 0,
+  reactElementCacheHits: 0,
+  reactElementCacheMisses: 0,
+  uncachedDomIconCreations: 0,
+  markerSetups: 0,
+  markerDestroys: 0,
+  markerIconUpdates: 0,
+  markerIconRecreates: 0,
+  markerSetIconCalls: 0
+}), r = S(), N = () => ({
+  ...r,
+  cacheEnabled: C
+}), W = () => {
+  Object.assign(r, S());
+}, z = (e) => {
+  C = e;
+}, G = () => {
+  u.clear(), M = /* @__PURE__ */ new WeakMap();
+}, j = (e) => {
+  const n = e ?? C;
+  return r.cacheEnabled = n, n;
+}, f = (e) => {
+  const n = u.get(e);
+  if (n)
+    return r.markupCacheHits += 1, u.delete(e), u.set(e, n), n;
+  r.markupCacheMisses += 1, r.domIconCreations += 1;
+  const o = new H.map.DomIcon(e);
+  if (u.set(e, o), u.size > x) {
+    const c = u.keys().next().value;
+    c !== void 0 && u.delete(c);
+  }
+  return o;
+}, R = (e, n = {}) => {
+  if (!e || v(e) || e instanceof H.map.DomIcon)
     return e || "";
-  const t = v.isValidElement(e) ? k.renderToStaticMarkup(e) : e;
-  return new H.map.DomIcon(t);
-}, i = (e, t) => {
-  const { position: m, customData: n, icon: c, draggable: o, eventListenerMap: r } = e, a = l(c) ? H.map.DomMarker : H.map.Marker, s = new a(m, {
-    icon: c && D(c)
-  });
-  return s.setData(n), s.draggable = !!o, t.map?.addObject(s), d(s, r, t.map), s;
-}, p = (e, t) => {
-  f(e), t.map?.getObjects().includes(e) && t.map.removeObject(e), e.dispose();
-}, R = (e) => {
-  const { position: t, customData: m, icon: n, eventListenerMap: c } = e, { api: o } = g(), r = I();
-  return u(() => (r.current = i(e, o), () => {
-    r.current && (p(r.current, o), r.current = void 0);
-  }), []), u(() => {
-    r.current && r.current.setGeometry(t);
-  }, [t, r.current]), u(() => {
-    r.current && r.current.setData(m);
-  }, [m, r.current]), u(() => {
-    if (r.current) {
-      const a = f(r.current);
-      d(r.current, c, a);
+  const o = j(n.cacheEnabled);
+  if (w.isValidElement(e)) {
+    const i = O.renderToStaticMarkup(e);
+    if (!o)
+      return r.reactElementCacheMisses += 1, r.domIconCreations += 1, r.uncachedDomIconCreations += 1, new H.map.DomIcon(i);
+    const a = M.get(e);
+    if (a)
+      return r.reactElementCacheHits += 1, a;
+    r.reactElementCacheMisses += 1;
+    const m = f(i);
+    return M.set(e, m), m;
+  }
+  const c = e;
+  return o ? f(c) : (r.domIconCreations += 1, r.uncachedDomIconCreations += 1, new H.map.DomIcon(c));
+}, D = (e, n, o) => {
+  const { position: c, customData: i, icon: a, draggable: m, eventListenerMap: t } = e;
+  r.markerSetups += 1;
+  const d = p(a) ? H.map.DomMarker : H.map.Marker, s = new d(c, {
+    icon: a && R(a, { cacheEnabled: o })
+  }), I = n.map;
+  return s.setData(i), s.draggable = !!m, I?.addObject(s), I && g(s, t, I), s;
+}, E = (e, n) => {
+  r.markerDestroys += 1, b(e), n.map?.getObjects().includes(e) && n.map.removeObject(e), e.dispose();
+}, K = (e) => {
+  const { position: n, customData: o, icon: c, eventListenerMap: i } = e, { api: a, enableMarkerIconCache: m } = y(), t = k(), d = k(p(c));
+  return l(() => (t.current = D(e, a, m), d.current = p(c), () => {
+    t.current && (E(t.current, a), t.current = void 0);
+  }), []), l(() => {
+    t.current && t.current.setGeometry(n);
+  }, [n, t.current]), l(() => {
+    t.current && t.current.setData(o);
+  }, [o, t.current]), l(() => {
+    if (t.current) {
+      const s = b(t.current);
+      g(t.current, i, s);
     }
-  }, [c, r.current]), u(() => {
-    if (r.current && n)
-      if (l(n))
-        p(r.current, o), r.current = i(e, o);
-      else {
-        const a = D(n);
-        a && r.current.setIcon(a);
-      }
-  }, [n, r.current]), null;
+  }, [i, t.current]), l(() => {
+    if (!(t.current && c))
+      return;
+    r.markerIconUpdates += 1;
+    const s = p(c);
+    if (d.current !== s)
+      r.markerIconRecreates += 1, E(t.current, a), t.current = D(e, a, m), d.current = s;
+    else {
+      const h = R(c, { cacheEnabled: m });
+      r.markerSetIconCalls += 1, h && t.current.setIcon(h);
+    }
+  }, [c, t.current, m]), null;
 };
 export {
-  R as default,
-  D as getOrCreateIcon,
-  l as isDomMakerNeeded,
-  M as isHMapIcon
+  G as clearMarkerIconCache,
+  K as default,
+  N as getMarkerDebugStats,
+  R as getOrCreateIcon,
+  p as isDomMakerNeeded,
+  v as isHMapIcon,
+  W as resetMarkerDebugStats,
+  z as setMarkerIconCacheEnabled
 };
 //# sourceMappingURL=Marker.js.map

package/components/map/components/features/basics/Marker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Marker.js","sources":["../../../../../../src/components/map/components/features/basics/Marker.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport ReactDomServer from 'react-dom/server';\n\nimport { type EventListenerMap, addEventListenerMap, removeEventListenerMap } from '../../../utils/eventHandling';\nimport { useMapContext } from '../../MapContext';\nimport type { MapApi, Position } from '../../../utils/mapTypes';\n\nexport type MarkerIcon = string | React.ReactElement; // Element;\n\nexport const isHMapIcon = (icon: MarkerIcon | H.map.DomIcon | undefined) => icon instanceof H.map.Icon;\n\nexport const isDomMakerNeeded = (icon: MarkerIcon | H.map.DomIcon | undefined) => (!icon ? false : !isHMapIcon(icon));\n\n// Note:\n// H.map.Marker:    A \"normal\" marker that uses a static image as an icon.\n//                  Large numbers of markers of this types can be added to the map very quickly and efficiently.\n// H.map.Dom:       A marker which supports HTML (and SVG) content, which can be dynamic.\n//                  Markers of this type are best displayed individually or in small sets.\n// It is also important to note that Markers and DomMarkers are rendered in separate rendering steps.\n// Markers are rendered in the map scene and therefore appear behind any DomMarkers which are rendered\n// as an overlay on top of the map.\nexport const getOrCreateIcon = (icon: MarkerIcon | H.map.DomIcon | undefined) => {\n    if (isHMapIcon(icon) || icon instanceof H.map.DomIcon) {\n        return icon || '';\n    }\n\n    const renderedIcon = React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup(icon) : icon;\n\n    return new H.map.DomIcon(renderedIcon as any);\n};\n\nconst setupMarker = (props: MarkerProps, api: MapApi) => {\n    const { position, customData, icon, draggable, eventListenerMap } = props;\n\n    const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;\n\n    const marker = new MarkerConstructor(position, {\n        icon: icon && (getOrCreateIcon(icon) as any),\n    });\n\n    marker.setData(customData);\n    marker.draggable = !!draggable;\n\n    api.map?.addObject(marker);\n\n    addEventListenerMap(marker, eventListenerMap, api.map!);\n\n    return marker;\n};\n\nconst destroyMarker = (marker: H.map.DomMarker, api: MapApi) => {\n    removeEventListenerMap(marker);\n    if (api.map?.getObjects().includes(marker)) {\n        api.map.removeObject(marker);\n    }\n    marker.dispose();\n};\n\nexport type MarkerProps = {\n    position: Position;\n    icon?: MarkerIcon;\n    eventListenerMap?: EventListenerMap;\n    customData?: object;\n    draggable?: boolean;\n};\n\nconst Marker = (props: MarkerProps) => {\n    const { position, customData, icon, eventListenerMap } = props;\n\n    const { api } = useMapContext();\n\n    const markerRef = useRef<H.map.DomMarker>();\n\n    useEffect(() => {\n        markerRef.current = setupMarker(props, api);\n\n        return () => {\n            if (markerRef.current) {\n                destroyMarker(markerRef.current, api);\n                markerRef.current = undefined;\n            }\n        };\n    }, []);\n\n    // Update marker position\n    useEffect(() => {\n        if (markerRef.current) {\n            markerRef.current.setGeometry(position);\n        }\n    }, [position, markerRef.current]);\n\n    // Update marker custom data\n    useEffect(() => {\n        if (markerRef.current) {\n            markerRef.current.setData(customData);\n        }\n    }, [customData, markerRef.current]);\n\n    // Update EventListenerMap\n    useEffect(() => {\n        if (markerRef.current) {\n            // use exports to make methods accessible for stubbing\n            const mapApi = removeEventListenerMap(markerRef.current);\n            addEventListenerMap(markerRef.current, eventListenerMap, mapApi);\n        }\n    }, [eventListenerMap, markerRef.current]);\n\n    // If icon type changed, we need to change the marker type\n    useEffect(() => {\n        if (!(markerRef.current && icon)) {\n            return;\n        }\n\n        if (isDomMakerNeeded(icon)) {\n            destroyMarker(markerRef.current, api);\n            markerRef.current = setupMarker(props, api);\n        } else {\n            const domIcon = getOrCreateIcon(icon);\n            domIcon && markerRef.current.setIcon(domIcon);\n        }\n    }, [icon, markerRef.current]);\n\n    return null;\n};\n\nexport default Marker;\n"],"names":["isHMapIcon","icon","isDomMakerNeeded","getOrCreateIcon","renderedIcon","React","ReactDomServer","setupMarker","props","api","position","customData","draggable","eventListenerMap","MarkerConstructor","marker","addEventListenerMap","destroyMarker","removeEventListenerMap","Marker","useMapContext","markerRef","useRef","useEffect","mapApi","domIcon"],"mappings":";;;;AASO,MAAMA,IAAa,CAACC,MAAiDA,aAAgB,EAAE,IAAI,MAErFC,IAAmB,CAACD,MAAmDA,IAAe,CAACD,EAAWC,CAAI,IAAxB,IAU9EE,IAAkB,CAACF,MAAiD;AAC7E,MAAID,EAAWC,CAAI,KAAKA,aAAgB,EAAE,IAAI;AAC1C,WAAOA,KAAQ;AAGnB,QAAMG,IAAeC,EAAM,eAAeJ,CAAI,IAAIK,EAAe,qBAAqBL,CAAI,IAAIA;AAE9F,SAAO,IAAI,EAAE,IAAI,QAAQG,CAAmB;AAChD,GAEMG,IAAc,CAACC,GAAoBC,MAAgB;AACrD,QAAM,EAAE,UAAAC,GAAU,YAAAC,GAAY,MAAAV,GAAM,WAAAW,GAAW,kBAAAC,MAAqBL,GAE9DM,IAAoBZ,EAAiBD,CAAI,IAAI,EAAE,IAAI,YAAY,EAAE,IAAI,QAErEc,IAAS,IAAID,EAAkBJ,GAAU;AAAA,IAC3C,MAAMT,KAASE,EAAgBF,CAAI;AAAA,EAAA,CACtC;AAED,SAAAc,EAAO,QAAQJ,CAAU,GACzBI,EAAO,YAAY,CAAC,CAACH,GAErBH,EAAI,KAAK,UAAUM,CAAM,GAEzBC,EAAoBD,GAAQF,GAAkBJ,EAAI,GAAI,GAE/CM;AACX,GAEME,IAAgB,CAACF,GAAyBN,MAAgB;AAC5D,EAAAS,EAAuBH,CAAM,GACzBN,EAAI,KAAK,WAAA,EAAa,SAASM,CAAM,KACrCN,EAAI,IAAI,aAAaM,CAAM,GAE/BA,EAAO,QAAA;AACX,GAUMI,IAAS,CAACX,MAAuB;AACnC,QAAM,EAAE,UAAAE,GAAU,YAAAC,GAAY,MAAAV,GAAM,kBAAAY,MAAqBL,GAEnD,EAAE,KAAAC,EAAA,IAAQW,EAAA,GAEVC,IAAYC,EAAA;AAElB,SAAAC,EAAU,OACNF,EAAU,UAAUd,EAAYC,GAAOC,CAAG,GAEnC,MAAM;AACT,IAAIY,EAAU,YACVJ,EAAcI,EAAU,SAASZ,CAAG,GACpCY,EAAU,UAAU;AAAA,EAE5B,IACD,CAAA,CAAE,GAGLE,EAAU,MAAM;AACZ,IAAIF,EAAU,WACVA,EAAU,QAAQ,YAAYX,CAAQ;AAAA,EAE9C,GAAG,CAACA,GAAUW,EAAU,OAAO,CAAC,GAGhCE,EAAU,MAAM;AACZ,IAAIF,EAAU,WACVA,EAAU,QAAQ,QAAQV,CAAU;AAAA,EAE5C,GAAG,CAACA,GAAYU,EAAU,OAAO,CAAC,GAGlCE,EAAU,MAAM;AACZ,QAAIF,EAAU,SAAS;AAEnB,YAAMG,IAASN,EAAuBG,EAAU,OAAO;AACvD,MAAAL,EAAoBK,EAAU,SAASR,GAAkBW,CAAM;AAAA,IACnE;AAAA,EACJ,GAAG,CAACX,GAAkBQ,EAAU,OAAO,CAAC,GAGxCE,EAAU,MAAM;AACZ,QAAMF,EAAU,WAAWpB;AAI3B,UAAIC,EAAiBD,CAAI;AACrB,QAAAgB,EAAcI,EAAU,SAASZ,CAAG,GACpCY,EAAU,UAAUd,EAAYC,GAAOC,CAAG;AAAA,WACvC;AACH,cAAMgB,IAAUtB,EAAgBF,CAAI;AACpC,QAAAwB,KAAWJ,EAAU,QAAQ,QAAQI,CAAO;AAAA,MAChD;AAAA,EACJ,GAAG,CAACxB,GAAMoB,EAAU,OAAO,CAAC,GAErB;AACX;"}
+{"version":3,"file":"Marker.js","sources":["../../../../../../src/components/map/components/features/basics/Marker.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport ReactDomServer from 'react-dom/server';\n\nimport { type EventListenerMap, addEventListenerMap, removeEventListenerMap } from '../../../utils/eventHandling';\nimport { useMapContext } from '../../MapContext';\nimport type { MapApi, Position } from '../../../utils/mapTypes';\n\nexport type MarkerIcon = string | React.ReactElement; // Element;\ntype MapMarkerObject = H.map.Marker | H.map.DomMarker;\ntype GetOrCreateIconOptions = {\n    cacheEnabled?: boolean;\n};\n\nexport const isHMapIcon = (icon: MarkerIcon | H.map.DomIcon | undefined) => icon instanceof H.map.Icon;\n\nexport const isDomMakerNeeded = (icon: MarkerIcon | H.map.DomIcon | undefined) => (!icon ? false : !isHMapIcon(icon));\n\nconst DOM_ICON_CACHE_MAX_SIZE = 500;\nconst domIconCache = new Map<string, H.map.DomIcon>();\n\nlet reactElementIconCache = new WeakMap<React.ReactElement, H.map.DomIcon>();\nlet markerIconCacheEnabled = true;\n\ntype MarkerDebugStats = {\n    cacheEnabled: boolean;\n    domIconCreations: number;\n    markupCacheHits: number;\n    markupCacheMisses: number;\n    reactElementCacheHits: number;\n    reactElementCacheMisses: number;\n    uncachedDomIconCreations: number;\n    markerSetups: number;\n    markerDestroys: number;\n    markerIconUpdates: number;\n    markerIconRecreates: number;\n    markerSetIconCalls: number;\n};\n\nconst createMarkerDebugStats = (): MarkerDebugStats => ({\n    cacheEnabled: markerIconCacheEnabled,\n    domIconCreations: 0,\n    markupCacheHits: 0,\n    markupCacheMisses: 0,\n    reactElementCacheHits: 0,\n    reactElementCacheMisses: 0,\n    uncachedDomIconCreations: 0,\n    markerSetups: 0,\n    markerDestroys: 0,\n    markerIconUpdates: 0,\n    markerIconRecreates: 0,\n    markerSetIconCalls: 0,\n});\n\nconst markerDebugStats = createMarkerDebugStats();\n\nexport const getMarkerDebugStats = () => ({\n    ...markerDebugStats,\n    cacheEnabled: markerIconCacheEnabled,\n});\n\nexport const resetMarkerDebugStats = () => {\n    Object.assign(markerDebugStats, createMarkerDebugStats());\n};\n\nexport const setMarkerIconCacheEnabled = (enabled: boolean) => {\n    markerIconCacheEnabled = enabled;\n};\n\nexport const clearMarkerIconCache = () => {\n    domIconCache.clear();\n    reactElementIconCache = new WeakMap<React.ReactElement, H.map.DomIcon>();\n};\n\nconst resolveCacheEnabled = (cacheEnabled?: boolean) => {\n    const resolvedCacheEnabled = cacheEnabled ?? markerIconCacheEnabled;\n    markerDebugStats.cacheEnabled = resolvedCacheEnabled;\n    return resolvedCacheEnabled;\n};\n\nconst getCachedDomIcon = (markup: string) => {\n    const cachedIcon = domIconCache.get(markup);\n\n    if (cachedIcon) {\n        markerDebugStats.markupCacheHits += 1;\n        // Refresh insertion order so frequently used icons stay in the cache longer.\n        domIconCache.delete(markup);\n        domIconCache.set(markup, cachedIcon);\n        return cachedIcon;\n    }\n\n    markerDebugStats.markupCacheMisses += 1;\n    markerDebugStats.domIconCreations += 1;\n\n    const nextIcon = new H.map.DomIcon(markup);\n    domIconCache.set(markup, nextIcon);\n\n    if (domIconCache.size > DOM_ICON_CACHE_MAX_SIZE) {\n        const oldestKey = domIconCache.keys().next().value;\n\n        if (oldestKey !== undefined) {\n            domIconCache.delete(oldestKey);\n        }\n    }\n\n    return nextIcon;\n};\n\n// Note:\n// H.map.Marker:    A \"normal\" marker that uses a static image as an icon.\n//                  Large numbers of markers of this types can be added to the map very quickly and efficiently.\n// H.map.Dom:       A marker which supports HTML (and SVG) content, which can be dynamic.\n//                  Markers of this type are best displayed individually or in small sets.\n// It is also important to note that Markers and DomMarkers are rendered in separate rendering steps.\n// Markers are rendered in the map scene and therefore appear behind any DomMarkers which are rendered\n// as an overlay on top of the map.\nexport const getOrCreateIcon = (icon: MarkerIcon | H.map.DomIcon | undefined, options: GetOrCreateIconOptions = {}) => {\n    if (!icon || isHMapIcon(icon) || icon instanceof H.map.DomIcon) {\n        return icon || '';\n    }\n\n    const cacheEnabled = resolveCacheEnabled(options.cacheEnabled);\n\n    if (React.isValidElement(icon)) {\n        const renderedIcon = ReactDomServer.renderToStaticMarkup(icon);\n\n        if (!cacheEnabled) {\n            markerDebugStats.reactElementCacheMisses += 1;\n            markerDebugStats.domIconCreations += 1;\n            markerDebugStats.uncachedDomIconCreations += 1;\n            return new H.map.DomIcon(renderedIcon);\n        }\n\n        const cachedElementIcon = reactElementIconCache.get(icon);\n\n        if (cachedElementIcon) {\n            markerDebugStats.reactElementCacheHits += 1;\n            return cachedElementIcon;\n        }\n\n        markerDebugStats.reactElementCacheMisses += 1;\n        const cachedMarkupIcon = getCachedDomIcon(renderedIcon);\n        reactElementIconCache.set(icon, cachedMarkupIcon);\n\n        return cachedMarkupIcon;\n    }\n\n    const stringIcon = icon as string;\n\n    if (!cacheEnabled) {\n        markerDebugStats.domIconCreations += 1;\n        markerDebugStats.uncachedDomIconCreations += 1;\n        return new H.map.DomIcon(stringIcon);\n    }\n\n    return getCachedDomIcon(stringIcon);\n};\n\nconst setupMarker = (props: MarkerProps, api: MapApi, cacheEnabled?: boolean) => {\n    const { position, customData, icon, draggable, eventListenerMap } = props;\n\n    markerDebugStats.markerSetups += 1;\n\n    const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;\n\n    const marker = new MarkerConstructor(position, {\n        icon: icon && getOrCreateIcon(icon, { cacheEnabled }),\n    });\n\n    const map = api.map;\n\n    marker.setData(customData);\n    marker.draggable = !!draggable;\n\n    map?.addObject(marker);\n\n    if (map) {\n        addEventListenerMap(marker, eventListenerMap, map);\n    }\n\n    return marker;\n};\n\nconst destroyMarker = (marker: MapMarkerObject, api: MapApi) => {\n    markerDebugStats.markerDestroys += 1;\n    removeEventListenerMap(marker);\n    if (api.map?.getObjects().includes(marker)) {\n        api.map.removeObject(marker);\n    }\n    marker.dispose();\n};\n\nexport type MarkerProps = {\n    position: Position;\n    icon?: MarkerIcon;\n    eventListenerMap?: EventListenerMap;\n    customData?: object;\n    draggable?: boolean;\n};\n\nconst Marker = (props: MarkerProps) => {\n    const { position, customData, icon, eventListenerMap } = props;\n\n    const { api, enableMarkerIconCache } = useMapContext();\n\n    const markerRef = useRef<MapMarkerObject>();\n    const markerUsesDomIconRef = useRef<boolean>(isDomMakerNeeded(icon));\n\n    useEffect(() => {\n        markerRef.current = setupMarker(props, api, enableMarkerIconCache);\n        markerUsesDomIconRef.current = isDomMakerNeeded(icon);\n\n        return () => {\n            if (markerRef.current) {\n                destroyMarker(markerRef.current, api);\n                markerRef.current = undefined;\n            }\n        };\n    }, []);\n\n    // Update marker position\n    useEffect(() => {\n        if (markerRef.current) {\n            markerRef.current.setGeometry(position);\n        }\n    }, [position, markerRef.current]);\n\n    // Update marker custom data\n    useEffect(() => {\n        if (markerRef.current) {\n            markerRef.current.setData(customData);\n        }\n    }, [customData, markerRef.current]);\n\n    // Update EventListenerMap\n    useEffect(() => {\n        if (markerRef.current) {\n            // use exports to make methods accessible for stubbing\n            const mapApi = removeEventListenerMap(markerRef.current);\n            addEventListenerMap(markerRef.current, eventListenerMap, mapApi);\n        }\n    }, [eventListenerMap, markerRef.current]);\n\n    // If icon type changed, we need to change the marker type\n    useEffect(() => {\n        if (!(markerRef.current && icon)) {\n            return;\n        }\n\n        markerDebugStats.markerIconUpdates += 1;\n\n        const nextUsesDomIcon = isDomMakerNeeded(icon);\n        const shouldRecreateMarker = markerUsesDomIconRef.current !== nextUsesDomIcon;\n\n        if (shouldRecreateMarker) {\n            markerDebugStats.markerIconRecreates += 1;\n            destroyMarker(markerRef.current, api);\n            markerRef.current = setupMarker(props, api, enableMarkerIconCache);\n            markerUsesDomIconRef.current = nextUsesDomIcon;\n        } else {\n            const domIcon = getOrCreateIcon(icon, { cacheEnabled: enableMarkerIconCache });\n            markerDebugStats.markerSetIconCalls += 1;\n            domIcon && markerRef.current.setIcon(domIcon);\n        }\n    }, [icon, markerRef.current, enableMarkerIconCache]);\n\n    return null;\n};\n\nexport default Marker;\n"],"names":["isHMapIcon","icon","isDomMakerNeeded","DOM_ICON_CACHE_MAX_SIZE","domIconCache","reactElementIconCache","markerIconCacheEnabled","createMarkerDebugStats","markerDebugStats","getMarkerDebugStats","resetMarkerDebugStats","setMarkerIconCacheEnabled","enabled","clearMarkerIconCache","resolveCacheEnabled","cacheEnabled","resolvedCacheEnabled","getCachedDomIcon","markup","cachedIcon","nextIcon","oldestKey","getOrCreateIcon","options","React","renderedIcon","ReactDomServer","cachedElementIcon","cachedMarkupIcon","stringIcon","setupMarker","props","api","position","customData","draggable","eventListenerMap","MarkerConstructor","marker","map","addEventListenerMap","destroyMarker","removeEventListenerMap","Marker","enableMarkerIconCache","useMapContext","markerRef","useRef","markerUsesDomIconRef","useEffect","mapApi","nextUsesDomIcon","domIcon"],"mappings":"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"}

package/components/map/components/features/basics/Polygon.d.ts

@@ -1,11 +1,34 @@
+import { CSSProperties } from 'react';
 import { Position } from '../../../utils/mapTypes';
 import { EventListenerMap } from '../../../utils/eventHandling';
 export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
 export type PolygonPoints = Position[] & Record<string, any>;
+export type PolygonStyle = H.map.SpatialStyle | H.map.SpatialStyle.Options;
 export type PolygonProps = {
+    /**
+     * Ordered geographic positions that define the polygon geometry.
+     */
     points: PolygonPoints;
-    style?: H.map.SpatialStyle;
+    /**
+     * Visual style applied to the polygon.
+     *
+     * @default H.map.SpatialStyle.DEFAULT_STYLE
+     *
+     */
+    style?: PolygonStyle;
+    /**
+     * Style overrides applied while the polygon is hovered.
+     */
+    hoverStyle?: PolygonStyle;
+    /**
+     * Event handlers attached to the polygon.
+     */
     eventListenerMap?: EventListenerMap;
+    /**
+     * Cursor shown while hovering the polygon.
+     * If omitted, clickable polygons automatically use `pointer`.
+     */
+    cursor?: CSSProperties['cursor'];
 };
 declare const Polygon: (props: PolygonProps) => null;
 export default Polygon;

package/components/map/components/features/basics/Polygon.js

@@ -1,24 +1,77 @@
-import { useState as g, useEffect as a } from "react";
-import { isNil as l } from "es-toolkit/predicate";
-import { useMapContext as u } from "../../MapContext.js";
-import { useUpdateProp as c, useUpdateEventListenerMap as f } from "../../../utils/hooks.js";
-const i = (s) => {
-  const t = new H.geo.LineString();
-  return s.forEach((e) => {
-    l(e.lat) || l(e.lng) || Number.isNaN(e.lat) || Number.isNaN(e.lng) || t.pushLatLngAlt(e.lat, e.lng, 0);
-  }), new H.geo.Polygon(t);
-}, S = (s) => {
-  const { points: t, style: e = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap: m } = s, { api: n } = u(), [r, p] = g();
-  return a(() => {
-    const o = new H.map.Polygon(i(t), { style: e });
-    return n.map?.addObject(o), p(o), () => {
-      n.map?.getObjects().includes(o) && n.map?.removeObject(o), o.dispose();
+import { useState as v, useRef as y, useMemo as C, useEffect as E } from "react";
+import { isNil as S } from "es-toolkit/predicate";
+import { useMapContext as R } from "../../MapContext.js";
+import { useUpdateEventListenerMap as h } from "../../../utils/hooks.js";
+import { EventUtils as a } from "../../../utils/eventHandling.js";
+const T = (e) => {
+  const p = new H.geo.LineString();
+  return e.forEach((r) => {
+    S(r.lat) || S(r.lng) || Number.isNaN(r.lat) || Number.isNaN(r.lng) || p.pushLatLngAlt(r.lat, r.lng, 0);
+  }), new H.geo.Polygon(p);
+}, L = (e) => {
+  if (e)
+    return e instanceof H.map.SpatialStyle ? {
+      strokeColor: e.strokeColor,
+      fillColor: e.fillColor,
+      lineWidth: e.lineWidth,
+      lineCap: e.lineCap,
+      lineHeadCap: e.lineHeadCap,
+      lineTailCap: e.lineTailCap,
+      lineJoin: e.lineJoin,
+      miterLimit: e.miterLimit,
+      lineDash: e.lineDash,
+      lineDashOffset: e.lineDashOffset
+    } : e;
+}, M = (e) => {
+  const { points: p, style: r = H.map.SpatialStyle.DEFAULT_STYLE, hoverStyle: f, eventListenerMap: o, cursor: g } = e, { api: i } = R(), [n, P] = v(), m = y(!1), l = C(() => {
+    if (g)
+      return g;
+    if (o?.[a.TAP] || o?.[a.DBL_TAP] || o?.[a.CONTEXTMENU])
+      return "pointer";
+  }, [g, o]), s = C(() => {
+    if (f)
+      return new H.map.SpatialStyle({
+        ...L(r),
+        ...L(f)
+      });
+  }, [f, r]), u = (t, N) => {
+    t.setStyle(N && s ? s : r);
+  }, c = (t) => {
+    if (!i.map)
+      return;
+    const N = i.map.getElement(), O = i.map.getViewPort().element;
+    N.style.cursor = t, O.style.cursor = t;
+  };
+  E(() => {
+    const t = new H.map.Polygon(T(p), { style: r });
+    return i.map?.addObject(t), P(t), () => {
+      i.map?.getObjects().includes(t) && i.map?.removeObject(t), t.dispose();
     };
-  }, [n.map]), a(() => {
-    r && r.setGeometry(i(t));
-  }, [t]), c(r, "setStyle", e), f(r, m), null;
+  }, [i.map]), E(() => {
+    n && n.setGeometry(T(p));
+  }, [p]), E(() => {
+    n && u(n, m.current);
+  }, [n, r, s]), E(
+    () => () => {
+      l && c("");
+    },
+    [i.map, l]
+  );
+  const d = C(() => o || f || l ? {
+    ...o,
+    [a.POINTER_ENTER]: (...t) => {
+      n && s && (m.current = !0, u(n, !0)), l && c(l), o?.[a.POINTER_ENTER]?.(...t);
+    },
+    [a.POINTER_LEAVE]: (...t) => {
+      n && s && (m.current = !1, u(n, !1)), l && c(""), o?.[a.POINTER_LEAVE]?.(...t);
+    },
+    [a.POINTER_CANCEL]: (...t) => {
+      n && s && (m.current = !1, u(n, !1)), l && c(""), o?.[a.POINTER_CANCEL]?.(...t);
+    }
+  } : o, [i.map, o, n, s, l]);
+  return h(n, d), null;
 };
 export {
-  S as default
+  M as default
 };
 //# sourceMappingURL=Polygon.js.map

package/components/map/components/features/basics/Polygon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Polygon.js","sources":["../../../../../../src/components/map/components/features/basics/Polygon.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport { useMapContext } from '../../MapContext';\nimport { useUpdateProp, useUpdateEventListenerMap } from '../../../utils/hooks';\nimport type { Position } from '../../../utils/mapTypes';\nimport type { EventListenerMap } from '../../../utils/eventHandling';\n\nexport {\n    colorMapColdplay,\n    colorMapWarmup,\n    colorMapGray,\n    colorMapBrand,\n    colorMapStatus,\n    colorMapMarker,\n    colorMapRating,\n    colorMapHighlight,\n} from './polygonColors';\n\nconst createGeometry = (points: Position[]) => {\n    const lineString = new H.geo.LineString();\n\n    points.forEach(p => {\n        if (isNil(p.lat) || isNil(p.lng) || Number.isNaN(p.lat) || Number.isNaN(p.lng)) {\n            return;\n        }\n        lineString.pushLatLngAlt(p.lat, p.lng, 0);\n    });\n\n    return new H.geo.Polygon(lineString);\n};\n\nexport type PolygonPoints = Position[] & Record<string, any>;\n\nexport type PolygonProps = {\n    points: PolygonPoints;\n    style?: H.map.SpatialStyle;\n    eventListenerMap?: EventListenerMap;\n};\n\nconst Polygon = (props: PolygonProps) => {\n    const { points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;\n\n    const { api } = useMapContext();\n    const [polygon, setPolygon] = useState<H.map.Polygon>();\n\n    useEffect(() => {\n        const newPolygon = new H.map.Polygon(createGeometry(points), { style });\n        api.map?.addObject(newPolygon);\n\n        setPolygon(newPolygon);\n\n        return () => {\n            if (api.map?.getObjects().includes(newPolygon)) {\n                api.map?.removeObject(newPolygon);\n            }\n            newPolygon.dispose();\n        };\n    }, [api.map]);\n\n    useEffect(() => {\n        if (polygon) {\n            polygon.setGeometry(createGeometry(points));\n        }\n    }, [points]);\n\n    useUpdateProp(polygon, 'setStyle', style);\n    useUpdateEventListenerMap(polygon, eventListenerMap);\n\n    return null;\n};\n\nexport default Polygon;\n"],"names":["createGeometry","points","lineString","p","isNil","Polygon","props","style","eventListenerMap","api","useMapContext","polygon","setPolygon","useState","useEffect","newPolygon","useUpdateProp","useUpdateEventListenerMap"],"mappings":";;;;AAmBA,MAAMA,IAAiB,CAACC,MAAuB;AAC3C,QAAMC,IAAa,IAAI,EAAE,IAAI,WAAA;AAE7B,SAAAD,EAAO,QAAQ,CAAAE,MAAK;AAChB,IAAIC,EAAMD,EAAE,GAAG,KAAKC,EAAMD,EAAE,GAAG,KAAK,OAAO,MAAMA,EAAE,GAAG,KAAK,OAAO,MAAMA,EAAE,GAAG,KAG7ED,EAAW,cAAcC,EAAE,KAAKA,EAAE,KAAK,CAAC;AAAA,EAC5C,CAAC,GAEM,IAAI,EAAE,IAAI,QAAQD,CAAU;AACvC,GAUMG,IAAU,CAACC,MAAwB;AACrC,QAAM,EAAE,QAAAL,GAAQ,OAAAM,IAAQ,EAAE,IAAI,aAAa,eAAe,kBAAAC,MAAqBF,GAEzE,EAAE,KAAAG,EAAA,IAAQC,EAAA,GACV,CAACC,GAASC,CAAU,IAAIC,EAAA;AAE9B,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAa,IAAI,EAAE,IAAI,QAAQf,EAAeC,CAAM,GAAG,EAAE,OAAAM,GAAO;AACtE,WAAAE,EAAI,KAAK,UAAUM,CAAU,GAE7BH,EAAWG,CAAU,GAEd,MAAM;AACT,MAAIN,EAAI,KAAK,WAAA,EAAa,SAASM,CAAU,KACzCN,EAAI,KAAK,aAAaM,CAAU,GAEpCA,EAAW,QAAA;AAAA,IACf;AAAA,EACJ,GAAG,CAACN,EAAI,GAAG,CAAC,GAEZK,EAAU,MAAM;AACZ,IAAIH,KACAA,EAAQ,YAAYX,EAAeC,CAAM,CAAC;AAAA,EAElD,GAAG,CAACA,CAAM,CAAC,GAEXe,EAAcL,GAAS,YAAYJ,CAAK,GACxCU,EAA0BN,GAASH,CAAgB,GAE5C;AACX;"}
+{"version":3,"file":"Polygon.js","sources":["../../../../../../src/components/map/components/features/basics/Polygon.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport { useMapContext } from '../../MapContext';\nimport { useUpdateEventListenerMap } from '../../../utils/hooks';\nimport type { Position } from '../../../utils/mapTypes';\nimport { EventUtils, type EventListenerMap } from '../../../utils/eventHandling';\n\nexport {\n    colorMapColdplay,\n    colorMapWarmup,\n    colorMapGray,\n    colorMapBrand,\n    colorMapStatus,\n    colorMapMarker,\n    colorMapRating,\n    colorMapHighlight,\n} from './polygonColors';\n\nconst createGeometry = (points: Position[]) => {\n    const lineString = new H.geo.LineString();\n\n    points.forEach(p => {\n        if (isNil(p.lat) || isNil(p.lng) || Number.isNaN(p.lat) || Number.isNaN(p.lng)) {\n            return;\n        }\n        lineString.pushLatLngAlt(p.lat, p.lng, 0);\n    });\n\n    return new H.geo.Polygon(lineString);\n};\n\nexport type PolygonPoints = Position[] & Record<string, any>;\nexport type PolygonStyle = H.map.SpatialStyle | H.map.SpatialStyle.Options;\n\nconst toSpatialStyleOptions = (style?: PolygonStyle): H.map.SpatialStyle.Options | undefined => {\n    if (!style) {\n        return;\n    }\n\n    if (style instanceof H.map.SpatialStyle) {\n        return {\n            strokeColor: style.strokeColor,\n            fillColor: style.fillColor,\n            lineWidth: style.lineWidth,\n            lineCap: style.lineCap,\n            lineHeadCap: style.lineHeadCap,\n            lineTailCap: style.lineTailCap,\n            lineJoin: style.lineJoin,\n            miterLimit: style.miterLimit,\n            lineDash: style.lineDash,\n            lineDashOffset: style.lineDashOffset,\n        };\n    }\n\n    return style;\n};\n\nexport type PolygonProps = {\n    /**\n     * Ordered geographic positions that define the polygon geometry.\n     */\n    points: PolygonPoints;\n\n    /**\n     * Visual style applied to the polygon.\n     *\n     * @default H.map.SpatialStyle.DEFAULT_STYLE\n     *\n     */\n    style?: PolygonStyle;\n\n    /**\n     * Style overrides applied while the polygon is hovered.\n     */\n    hoverStyle?: PolygonStyle;\n\n    /**\n     * Event handlers attached to the polygon.\n     */\n    eventListenerMap?: EventListenerMap;\n\n    /**\n     * Cursor shown while hovering the polygon.\n     * If omitted, clickable polygons automatically use `pointer`.\n     */\n    cursor?: CSSProperties['cursor'];\n};\n\nconst Polygon = (props: PolygonProps) => {\n    const { points, style = H.map.SpatialStyle.DEFAULT_STYLE, hoverStyle, eventListenerMap, cursor } = props;\n\n    const { api } = useMapContext();\n    const [polygon, setPolygon] = useState<H.map.Polygon>();\n    const isHoveredRef = useRef(false);\n\n    const resolvedCursor = useMemo(() => {\n        if (cursor) {\n            return cursor;\n        }\n\n        if (\n            eventListenerMap?.[EventUtils.TAP] ||\n            eventListenerMap?.[EventUtils.DBL_TAP] ||\n            eventListenerMap?.[EventUtils.CONTEXTMENU]\n        ) {\n            return 'pointer';\n        }\n    }, [cursor, eventListenerMap]);\n\n    const mergedHoverStyle = useMemo(() => {\n        if (!hoverStyle) {\n            return;\n        }\n\n        return new H.map.SpatialStyle({\n            ...toSpatialStyleOptions(style),\n            ...toSpatialStyleOptions(hoverStyle),\n        });\n    }, [hoverStyle, style]);\n\n    const applyPolygonStyle = (nextPolygon: H.map.Polygon, hovered: boolean) => {\n        nextPolygon.setStyle(hovered && mergedHoverStyle ? mergedHoverStyle : style);\n    };\n\n    const applyCursor = (nextCursor: string) => {\n        if (!api.map) {\n            return;\n        }\n\n        const mapElement = api.map.getElement() as HTMLElement;\n        const viewportElement = api.map.getViewPort().element as HTMLElement;\n\n        mapElement.style.cursor = nextCursor;\n        viewportElement.style.cursor = nextCursor;\n    };\n\n    useEffect(() => {\n        const newPolygon = new H.map.Polygon(createGeometry(points), { style });\n        api.map?.addObject(newPolygon);\n\n        setPolygon(newPolygon);\n\n        return () => {\n            if (api.map?.getObjects().includes(newPolygon)) {\n                api.map?.removeObject(newPolygon);\n            }\n            newPolygon.dispose();\n        };\n    }, [api.map]);\n\n    useEffect(() => {\n        if (polygon) {\n            polygon.setGeometry(createGeometry(points));\n        }\n    }, [points]);\n\n    useEffect(() => {\n        if (polygon) {\n            applyPolygonStyle(polygon, isHoveredRef.current);\n        }\n    }, [polygon, style, mergedHoverStyle]);\n\n    useEffect(\n        () => () => {\n            if (resolvedCursor) {\n                applyCursor('');\n            }\n        },\n        [api.map, resolvedCursor]\n    );\n\n    const resolvedEventListenerMap = useMemo(() => {\n        if (!(eventListenerMap || hoverStyle || resolvedCursor)) {\n            return eventListenerMap;\n        }\n\n        return {\n            ...eventListenerMap,\n            [EventUtils.POINTER_ENTER]: (...args: unknown[]) => {\n                if (polygon && mergedHoverStyle) {\n                    isHoveredRef.current = true;\n                    applyPolygonStyle(polygon, true);\n                }\n\n                if (resolvedCursor) {\n                    applyCursor(resolvedCursor);\n                }\n\n                eventListenerMap?.[EventUtils.POINTER_ENTER]?.(...args);\n            },\n            [EventUtils.POINTER_LEAVE]: (...args: unknown[]) => {\n                if (polygon && mergedHoverStyle) {\n                    isHoveredRef.current = false;\n                    applyPolygonStyle(polygon, false);\n                }\n\n                if (resolvedCursor) {\n                    applyCursor('');\n                }\n\n                eventListenerMap?.[EventUtils.POINTER_LEAVE]?.(...args);\n            },\n            [EventUtils.POINTER_CANCEL]: (...args: unknown[]) => {\n                if (polygon && mergedHoverStyle) {\n                    isHoveredRef.current = false;\n                    applyPolygonStyle(polygon, false);\n                }\n\n                if (resolvedCursor) {\n                    applyCursor('');\n                }\n\n                eventListenerMap?.[EventUtils.POINTER_CANCEL]?.(...args);\n            },\n        } satisfies EventListenerMap;\n    }, [api.map, eventListenerMap, polygon, mergedHoverStyle, resolvedCursor]);\n\n    useUpdateEventListenerMap(polygon, resolvedEventListenerMap);\n\n    return null;\n};\n\nexport default Polygon;\n"],"names":["createGeometry","points","lineString","p","isNil","toSpatialStyleOptions","style","Polygon","props","hoverStyle","eventListenerMap","cursor","api","useMapContext","polygon","setPolygon","useState","isHoveredRef","useRef","resolvedCursor","useMemo","EventUtils","mergedHoverStyle","applyPolygonStyle","nextPolygon","hovered","applyCursor","nextCursor","mapElement","viewportElement","useEffect","newPolygon","resolvedEventListenerMap","args","useUpdateEventListenerMap"],"mappings":"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"}

package/components/map/components/features/basics/Polyline.d.ts

@@ -5,13 +5,42 @@ export type ArrowStyle = {
     fillColor?: string;
     strokeColor?: string;
 };
+export type PolylineObjects = {
+    group: H.map.Group;
+    line: H.map.Polyline;
+    routeArrows?: H.map.Polyline;
+};
 export type PolylineProps = {
+    /**
+     * Controls whether directional arrows are rendered on the polyline.
+     */
     hasArrows?: boolean;
+    /**
+     * Defines the arrow appearance when arrows are rendered.
+     */
     arrowStyle?: ArrowStyle;
+    /**
+     * Geometry used to render the polyline.
+     */
     geometry: H.geo.LineString;
+    /**
+     * Visual style applied to the main polyline.
+     *
+     * @default H.map.SpatialStyle.DEFAULT_STYLE
+     */
     style?: H.map.SpatialStyle;
+    /**
+     * Custom payload forwarded to the rendered polyline objects and their events.
+     */
     customData?: object;
+    /**
+     * Event handlers attached to the polyline.
+     */
     eventListenerMap?: EventListenerMap;
+    /**
+     * Receives the created HERE polyline objects once they are mounted and `undefined` on cleanup.
+     */
+    onReady?: (objects?: PolylineObjects) => void;
 };
 declare const Polyline: (props: PolylineProps) => null;
 export default Polyline;

package/components/map/components/features/basics/Polyline.js

@@ -1,65 +1,95 @@
-import { useState as u, useEffect as b } from "react";
-import { useMapContext as O } from "../../MapContext.js";
-import s from "../../../exceptions/MapException.js";
-import { useUpdateEventListenerMap as P } from "../../../utils/hooks.js";
-import { removeEventListenerMap as g } from "../../../utils/eventHandling.js";
-import { isVectorBased as h } from "../../../utils/rendering.js";
-const M = "Error in Polyline: Polyline without geometry makes no sense", C = "Error in Polyline: property geometry must be of type H.geo.LineString", v = (p) => {
+import { useState as M, useRef as h, useEffect as d, useMemo as S } from "react";
+import { useMapContext as I } from "../../MapContext.js";
+import b from "../../../exceptions/MapException.js";
+import { EventUtils as i, removeEventListenerMap as p, addEventListenerMap as w } from "../../../utils/eventHandling.js";
+import { isVectorBased as v } from "../../../utils/rendering.js";
+const j = "Error in Polyline: Polyline without geometry makes no sense", A = "Error in Polyline: property geometry must be of type H.geo.LineString", V = (T) => {
   const {
-    geometry: t,
-    hasArrows: n,
-    arrowStyle: a,
-    style: l = H.map.SpatialStyle.DEFAULT_STYLE,
-    customData: m,
-    eventListenerMap: y
-  } = p, { api: r, enableWebGL: c, baseLayer: d } = O(), [f, S] = u();
-  if (!t)
-    throw new s(M);
-  if (!(t instanceof H.geo.LineString))
-    throw new s(C);
-  return b(() => {
-    const e = new H.map.Group({ data: m }), i = new H.map.Polyline(t, { style: l });
-    if (n) {
-      let o;
-      if (h(c, d))
-        o = new H.map.Polyline(t, {
+    geometry: r,
+    hasArrows: y,
+    arrowStyle: E,
+    style: O = H.map.SpatialStyle.DEFAULT_STYLE,
+    customData: u,
+    eventListenerMap: n,
+    onReady: m
+  } = T, { api: o, enableWebGL: L, baseLayer: _ } = I(), [l, N] = M(), s = h([]), f = h(m);
+  d(() => {
+    f.current = m;
+  }, [m]);
+  const g = S(() => {
+    if (!n)
+      return;
+    const e = Object.entries(n).filter(
+      ([t]) => [i.POINTER_ENTER, i.POINTER_LEAVE, i.POINTER_CANCEL].includes(t)
+    );
+    if (e.length !== 0)
+      return Object.fromEntries(e);
+  }, [n]), P = S(() => {
+    if (!n)
+      return;
+    const e = Object.entries(n).filter(
+      ([t]) => ![i.POINTER_ENTER, i.POINTER_LEAVE, i.POINTER_CANCEL].includes(t)
+    );
+    if (e.length !== 0)
+      return Object.fromEntries(e);
+  }, [n]);
+  if (!r)
+    throw new b(j);
+  if (!(r instanceof H.geo.LineString))
+    throw new b(A);
+  return d(() => {
+    const e = new H.map.Group({ data: u }), t = new H.map.Polyline(r, { style: O });
+    let a;
+    t.setData(u);
+    const R = [t];
+    if (y) {
+      if (v(L, _))
+        a = new H.map.Polyline(r, {
           style: {
             strokeColor: "rgba(42, 55, 64, 1)",
             lineWidth: 5,
             lineDash: [1.8, 4],
             // @ts-expect-error-next-line - the types are outdated here
             lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
-            ...a
+            ...E
           }
         });
       else {
-        const w = {
+        const c = {
           lineWidth: 2,
           fillColor: "rgba(42, 55, 64, 1)",
           strokeColor: "rgba(0, 0, 0, 0.8)",
           lineDash: [0, 4],
           lineTailCap: "arrow-tail",
           lineHeadCap: "arrow-head",
-          ...a
-        }, E = new H.map.SpatialStyle({
+          ...E
+        }, C = new H.map.SpatialStyle({
           lineWidth: 10,
           strokeColor: "rgba(255, 255, 255, 0)"
         });
-        o = new H.map.Polyline(t, { style: E, arrows: w });
+        a = new H.map.Polyline(r, { style: C, arrows: c });
       }
-      e.addObjects([i, o]);
+      a.setData(u), R.push(a), e.addObjects([t, a]);
     } else
-      e.addObjects([i]);
-    return r.map?.addObject(e), S(e), () => {
-      g(e), e.forEach((o) => {
-        e.removeObject(o), o.dispose();
-      }), r.map?.getObjects().includes(e) && r.map.removeObject(e), e.dispose();
+      e.addObjects([t]);
+    return o.map?.addObject(e), s.current = R, N(e), f.current?.({ group: e, line: t, routeArrows: a }), () => {
+      f.current?.(), p(e), s.current.forEach(p), s.current = [], e.forEach((c) => {
+        e.removeObject(c), c.dispose();
+      }), o.map?.getObjects().includes(e) && o.map.removeObject(e), e.dispose();
     };
-  }, [r.map, t, l, n, a]), P(f, y), null;
+  }, [o.map, r, O, y, E]), d(() => {
+    const e = o.map;
+    if (l && e)
+      return w(l, P, e), s.current.forEach((t) => {
+        w(t, g, e);
+      }), () => {
+        p(l), s.current.forEach(p);
+      };
+  }, [o.map, l, P, g]), null;
 };
 export {
-  M as MISSING_GEOMETRY_PROPS_EXCEPTION_MSG,
-  C as WRONG_GEOMETRY_PROPS_EXCEPTION_MSG,
-  v as default
+  j as MISSING_GEOMETRY_PROPS_EXCEPTION_MSG,
+  A as WRONG_GEOMETRY_PROPS_EXCEPTION_MSG,
+  V as default
 };
 //# sourceMappingURL=Polyline.js.map

package/components/map/components/features/basics/Polyline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Polyline.js","sources":["../../../../../../src/components/map/components/features/basics/Polyline.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { useMapContext } from '../../MapContext';\nimport MapException from '../../../exceptions/MapException';\n\nimport { useUpdateEventListenerMap } from '../../../utils/hooks';\nimport { removeEventListenerMap, type EventListenerMap } from '../../../utils/eventHandling';\nimport { isVectorBased } from '../../../utils/rendering';\n\nexport const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';\nexport const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG =\n    'Error in Polyline: property geometry must be of type H.geo.LineString';\n\nexport type ArrowStyle = {\n    fillColor?: string;\n    strokeColor?: string;\n};\n\nexport type PolylineProps = {\n    hasArrows?: boolean;\n    arrowStyle?: ArrowStyle;\n    geometry: H.geo.LineString;\n    style?: H.map.SpatialStyle;\n    customData?: object;\n    eventListenerMap?: EventListenerMap;\n};\n\nconst Polyline = (props: PolylineProps) => {\n    const {\n        geometry,\n        hasArrows,\n        arrowStyle,\n        style = H.map.SpatialStyle.DEFAULT_STYLE,\n        customData,\n        eventListenerMap,\n    } = props;\n\n    const { api, enableWebGL, baseLayer } = useMapContext();\n\n    const [polyline, setPolyline] = useState<H.map.Group>();\n\n    if (!geometry) {\n        throw new MapException(MISSING_GEOMETRY_PROPS_EXCEPTION_MSG);\n    }\n\n    if (!(geometry instanceof H.geo.LineString)) {\n        throw new MapException(WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);\n    }\n\n    useEffect(() => {\n        const lineGroup = new H.map.Group({ data: customData });\n        const line = new H.map.Polyline(geometry, { style });\n\n        if (hasArrows) {\n            let routeArrows: H.map.Polyline;\n\n            if (isVectorBased(enableWebGL, baseLayer)) {\n                // WebGL way - Create a patterned polyline\n                routeArrows = new H.map.Polyline(geometry, {\n                    style: {\n                        strokeColor: 'rgba(42, 55, 64, 1)',\n                        lineWidth: 5,\n                        lineDash: [1.8, 4],\n                        // @ts-expect-error-next-line - the types are outdated here\n                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,\n                        ...arrowStyle,\n                    },\n                });\n            } else {\n                // Pixel map way - Create a patterned polyline\n                const defaultArrowStyle = {\n                    lineWidth: 2,\n                    fillColor: 'rgba(42, 55, 64, 1)',\n                    strokeColor: 'rgba(0, 0, 0, 0.8)',\n                    lineDash: [0, 4],\n                    lineTailCap: 'arrow-tail',\n                    lineHeadCap: 'arrow-head',\n                    ...arrowStyle,\n                };\n\n                const arrowLineStyle = new H.map.SpatialStyle({\n                    lineWidth: 10,\n                    strokeColor: 'rgba(255, 255, 255, 0)',\n                });\n\n                routeArrows = new H.map.Polyline(geometry, { style: arrowLineStyle, arrows: defaultArrowStyle });\n            }\n\n            // create a group that represents the route line and contains\n            // outline and the pattern\n            lineGroup.addObjects([line, routeArrows]);\n        } else {\n            lineGroup.addObjects([line]);\n        }\n\n        api.map?.addObject(lineGroup);\n        setPolyline(lineGroup);\n\n        return () => {\n            removeEventListenerMap(lineGroup);\n\n            lineGroup.forEach(singleLine => {\n                lineGroup.removeObject(singleLine);\n                singleLine.dispose();\n            });\n\n            if (api.map?.getObjects().includes(lineGroup)) {\n                api.map.removeObject(lineGroup);\n            }\n            lineGroup.dispose();\n        };\n    }, [api.map, geometry, style, hasArrows, arrowStyle]);\n\n    useUpdateEventListenerMap(polyline, eventListenerMap);\n\n    return null;\n};\n\nexport default Polyline;\n"],"names":["MISSING_GEOMETRY_PROPS_EXCEPTION_MSG","WRONG_GEOMETRY_PROPS_EXCEPTION_MSG","Polyline","props","geometry","hasArrows","arrowStyle","style","customData","eventListenerMap","api","enableWebGL","baseLayer","useMapContext","polyline","setPolyline","useState","MapException","useEffect","lineGroup","line","routeArrows","isVectorBased","defaultArrowStyle","arrowLineStyle","removeEventListenerMap","singleLine","useUpdateEventListenerMap"],"mappings":";;;;;;AASO,MAAMA,IAAuC,+DACvCC,IACT,yEAgBEC,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC,IAAQ,EAAE,IAAI,aAAa;AAAA,IAC3B,YAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACAN,GAEE,EAAE,KAAAO,GAAK,aAAAC,GAAa,WAAAC,EAAA,IAAcC,EAAA,GAElC,CAACC,GAAUC,CAAW,IAAIC,EAAA;AAEhC,MAAI,CAACZ;AACD,UAAM,IAAIa,EAAajB,CAAoC;AAG/D,MAAI,EAAEI,aAAoB,EAAE,IAAI;AAC5B,UAAM,IAAIa,EAAahB,CAAkC;AAG7D,SAAAiB,EAAU,MAAM;AACZ,UAAMC,IAAY,IAAI,EAAE,IAAI,MAAM,EAAE,MAAMX,GAAY,GAChDY,IAAO,IAAI,EAAE,IAAI,SAAShB,GAAU,EAAE,OAAAG,GAAO;AAEnD,QAAIF,GAAW;AACX,UAAIgB;AAEJ,UAAIC,EAAcX,GAAaC,CAAS;AAEpC,QAAAS,IAAc,IAAI,EAAE,IAAI,SAASjB,GAAU;AAAA,UACvC,OAAO;AAAA,YACH,aAAa;AAAA,YACb,WAAW;AAAA,YACX,UAAU,CAAC,KAAK,CAAC;AAAA;AAAA,YAEjB,eAAe,EAAE,IAAI,aAAa,UAAU;AAAA,YAC5C,GAAGE;AAAA,UAAA;AAAA,QACP,CACH;AAAA,WACE;AAEH,cAAMiB,IAAoB;AAAA,UACtB,WAAW;AAAA,UACX,WAAW;AAAA,UACX,aAAa;AAAA,UACb,UAAU,CAAC,GAAG,CAAC;AAAA,UACf,aAAa;AAAA,UACb,aAAa;AAAA,UACb,GAAGjB;AAAA,QAAA,GAGDkB,IAAiB,IAAI,EAAE,IAAI,aAAa;AAAA,UAC1C,WAAW;AAAA,UACX,aAAa;AAAA,QAAA,CAChB;AAED,QAAAH,IAAc,IAAI,EAAE,IAAI,SAASjB,GAAU,EAAE,OAAOoB,GAAgB,QAAQD,GAAmB;AAAA,MACnG;AAIA,MAAAJ,EAAU,WAAW,CAACC,GAAMC,CAAW,CAAC;AAAA,IAC5C;AACI,MAAAF,EAAU,WAAW,CAACC,CAAI,CAAC;AAG/B,WAAAV,EAAI,KAAK,UAAUS,CAAS,GAC5BJ,EAAYI,CAAS,GAEd,MAAM;AACT,MAAAM,EAAuBN,CAAS,GAEhCA,EAAU,QAAQ,CAAAO,MAAc;AAC5B,QAAAP,EAAU,aAAaO,CAAU,GACjCA,EAAW,QAAA;AAAA,MACf,CAAC,GAEGhB,EAAI,KAAK,WAAA,EAAa,SAASS,CAAS,KACxCT,EAAI,IAAI,aAAaS,CAAS,GAElCA,EAAU,QAAA;AAAA,IACd;AAAA,EACJ,GAAG,CAACT,EAAI,KAAKN,GAAUG,GAAOF,GAAWC,CAAU,CAAC,GAEpDqB,EAA0Bb,GAAUL,CAAgB,GAE7C;AACX;"}
+{"version":3,"file":"Polyline.js","sources":["../../../../../../src/components/map/components/features/basics/Polyline.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMapContext } from '../../MapContext';\nimport MapException from '../../../exceptions/MapException';\n\nimport {\n    EventUtils,\n    addEventListenerMap,\n    removeEventListenerMap,\n    type EventListenerMap,\n} from '../../../utils/eventHandling';\nimport { isVectorBased } from '../../../utils/rendering';\n\nexport const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';\nexport const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG =\n    'Error in Polyline: property geometry must be of type H.geo.LineString';\n\nexport type ArrowStyle = {\n    fillColor?: string;\n    strokeColor?: string;\n};\n\nexport type PolylineObjects = {\n    group: H.map.Group;\n    line: H.map.Polyline;\n    routeArrows?: H.map.Polyline;\n};\n\nexport type PolylineProps = {\n    /**\n     * Controls whether directional arrows are rendered on the polyline.\n     */\n    hasArrows?: boolean;\n\n    /**\n     * Defines the arrow appearance when arrows are rendered.\n     */\n    arrowStyle?: ArrowStyle;\n\n    /**\n     * Geometry used to render the polyline.\n     */\n    geometry: H.geo.LineString;\n\n    /**\n     * Visual style applied to the main polyline.\n     *\n     * @default H.map.SpatialStyle.DEFAULT_STYLE\n     */\n    style?: H.map.SpatialStyle;\n\n    /**\n     * Custom payload forwarded to the rendered polyline objects and their events.\n     */\n    customData?: object;\n\n    /**\n     * Event handlers attached to the polyline.\n     */\n    eventListenerMap?: EventListenerMap;\n\n    /**\n     * Receives the created HERE polyline objects once they are mounted and `undefined` on cleanup.\n     */\n    onReady?: (objects?: PolylineObjects) => void;\n};\n\nconst Polyline = (props: PolylineProps) => {\n    const {\n        geometry,\n        hasArrows,\n        arrowStyle,\n        style = H.map.SpatialStyle.DEFAULT_STYLE,\n        customData,\n        eventListenerMap,\n        onReady,\n    } = props;\n\n    const { api, enableWebGL, baseLayer } = useMapContext();\n\n    const [polyline, setPolyline] = useState<H.map.Group>();\n    const directEventTargetsRef = useRef<H.map.Polyline[]>([]);\n    const onReadyRef = useRef(onReady);\n\n    useEffect(() => {\n        onReadyRef.current = onReady;\n    }, [onReady]);\n\n    const directEventListenerMap = useMemo(() => {\n        if (!eventListenerMap) {\n            return;\n        }\n\n        const directEntries = Object.entries(eventListenerMap).filter(([key]) =>\n            [EventUtils.POINTER_ENTER, EventUtils.POINTER_LEAVE, EventUtils.POINTER_CANCEL].includes(key)\n        );\n\n        if (directEntries.length === 0) {\n            return;\n        }\n\n        return Object.fromEntries(directEntries) satisfies EventListenerMap;\n    }, [eventListenerMap]);\n\n    const groupEventListenerMap = useMemo(() => {\n        if (!eventListenerMap) {\n            return;\n        }\n\n        const groupEntries = Object.entries(eventListenerMap).filter(\n            ([key]) => ![EventUtils.POINTER_ENTER, EventUtils.POINTER_LEAVE, EventUtils.POINTER_CANCEL].includes(key)\n        );\n\n        if (groupEntries.length === 0) {\n            return;\n        }\n\n        return Object.fromEntries(groupEntries) satisfies EventListenerMap;\n    }, [eventListenerMap]);\n\n    if (!geometry) {\n        throw new MapException(MISSING_GEOMETRY_PROPS_EXCEPTION_MSG);\n    }\n\n    if (!(geometry instanceof H.geo.LineString)) {\n        throw new MapException(WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);\n    }\n\n    useEffect(() => {\n        const lineGroup = new H.map.Group({ data: customData });\n        const line = new H.map.Polyline(geometry, { style });\n\n        let routeArrows: H.map.Polyline | undefined;\n        line.setData(customData);\n\n        const directEventTargets = [line];\n\n        if (hasArrows) {\n            if (isVectorBased(enableWebGL, baseLayer)) {\n                // WebGL way - Create a patterned polyline\n                routeArrows = new H.map.Polyline(geometry, {\n                    style: {\n                        strokeColor: 'rgba(42, 55, 64, 1)',\n                        lineWidth: 5,\n                        lineDash: [1.8, 4],\n                        // @ts-expect-error-next-line - the types are outdated here\n                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,\n                        ...arrowStyle,\n                    },\n                });\n            } else {\n                // Pixel map way - Create a patterned polyline\n                const defaultArrowStyle = {\n                    lineWidth: 2,\n                    fillColor: 'rgba(42, 55, 64, 1)',\n                    strokeColor: 'rgba(0, 0, 0, 0.8)',\n                    lineDash: [0, 4],\n                    lineTailCap: 'arrow-tail',\n                    lineHeadCap: 'arrow-head',\n                    ...arrowStyle,\n                };\n\n                const arrowLineStyle = new H.map.SpatialStyle({\n                    lineWidth: 10,\n                    strokeColor: 'rgba(255, 255, 255, 0)',\n                });\n\n                routeArrows = new H.map.Polyline(geometry, { style: arrowLineStyle, arrows: defaultArrowStyle });\n            }\n\n            routeArrows.setData(customData);\n            directEventTargets.push(routeArrows);\n\n            // create a group that represents the route line and contains\n            // outline and the pattern\n            lineGroup.addObjects([line, routeArrows]);\n        } else {\n            lineGroup.addObjects([line]);\n        }\n\n        api.map?.addObject(lineGroup);\n        directEventTargetsRef.current = directEventTargets;\n        setPolyline(lineGroup);\n        onReadyRef.current?.({ group: lineGroup, line, routeArrows });\n\n        return () => {\n            onReadyRef.current?.();\n            removeEventListenerMap(lineGroup);\n            directEventTargetsRef.current.forEach(removeEventListenerMap);\n            directEventTargetsRef.current = [];\n\n            lineGroup.forEach(singleLine => {\n                lineGroup.removeObject(singleLine);\n                singleLine.dispose();\n            });\n\n            if (api.map?.getObjects().includes(lineGroup)) {\n                api.map.removeObject(lineGroup);\n            }\n            lineGroup.dispose();\n        };\n    }, [api.map, geometry, style, hasArrows, arrowStyle]);\n\n    useEffect(() => {\n        const map = api.map;\n\n        if (!(polyline && map)) {\n            return;\n        }\n\n        addEventListenerMap(polyline, groupEventListenerMap, map);\n        directEventTargetsRef.current.forEach(target => {\n            addEventListenerMap(target, directEventListenerMap, map);\n        });\n\n        return () => {\n            removeEventListenerMap(polyline);\n            directEventTargetsRef.current.forEach(removeEventListenerMap);\n        };\n    }, [api.map, polyline, groupEventListenerMap, directEventListenerMap]);\n\n    return null;\n};\n\nexport default Polyline;\n"],"names":["MISSING_GEOMETRY_PROPS_EXCEPTION_MSG","WRONG_GEOMETRY_PROPS_EXCEPTION_MSG","Polyline","props","geometry","hasArrows","arrowStyle","style","customData","eventListenerMap","onReady","api","enableWebGL","baseLayer","useMapContext","polyline","setPolyline","useState","directEventTargetsRef","useRef","onReadyRef","useEffect","directEventListenerMap","useMemo","directEntries","key","EventUtils","groupEventListenerMap","groupEntries","MapException","lineGroup","line","routeArrows","directEventTargets","isVectorBased","defaultArrowStyle","arrowLineStyle","removeEventListenerMap","singleLine","map","addEventListenerMap","target"],"mappings":"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"}

package/components/map/components/features/layers/MarkerLayer.js

@@ -1,15 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import l from "./clustering/ClusterLayer.js";
-import { wrapSimpleTheme as n } from "../../../utils/clustering.js";
-import { useMapContext as a } from "../../MapContext.js";
-const C = (r) => {
-  const t = a(), { simpleTheme: e, clusterDissolvable: o = !0, ...s } = r, m = !o || t.showCluster, p = {
-    clusterTheme: e && n(e),
+import { wrapSimpleTheme as p } from "../../../utils/clustering.js";
+import { useMapContext as i } from "../../MapContext.js";
+const f = (t) => {
+  const e = i(), { simpleTheme: r, clusterDissolvable: o = !0, ...s } = t, m = !o || e.showCluster, a = {
+    clusterTheme: r && p(r, e.enableMarkerIconCache),
     ...s
   };
-  return /* @__PURE__ */ i(l, { ...p, minWeight: m ? void 0 : 1e9 });
+  return /* @__PURE__ */ n(l, { ...a, minWeight: m ? void 0 : 1e9 });
 };
 export {
-  C as default
+  f as default
 };
 //# sourceMappingURL=MarkerLayer.js.map

package/components/map/components/features/layers/MarkerLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkerLayer.js","sources":["../../../../../../src/components/map/components/features/layers/MarkerLayer.tsx"],"sourcesContent":["import type React from 'react';\n\nimport ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';\nimport { wrapSimpleTheme, type SimpleClusterTheme } from '../../../utils/clustering';\nimport { useMapContext } from '../../MapContext';\n\nexport type { ClusterTheme, SimpleClusterTheme };\n\nexport type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {\n    simpleTheme?: SimpleClusterTheme;\n    clusterDissolvable?: boolean;\n    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';\n    eps?: number;\n};\n\n/*\n * Not very different to the SimpleClusterLayer, but with a different intention.\n */\nconst MarkerLayer = (props: MarkerLayerProps) => {\n    const mapContext = useMapContext();\n\n    const { simpleTheme, clusterDissolvable = true, ...rest } = props;\n\n    // Norbert: Not an ideal solution\n    const showCluster = !clusterDissolvable || mapContext.showCluster;\n    const newProps = {\n        clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme),\n        ...rest,\n    };\n    return <ClusterLayer {...newProps} minWeight={showCluster ? undefined : 1000000000} />;\n};\n\nexport default MarkerLayer;\n"],"names":["MarkerLayer","props","mapContext","useMapContext","simpleTheme","clusterDissolvable","rest","showCluster","newProps","wrapSimpleTheme","ClusterLayer"],"mappings":";;;;AAkBA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAMC,IAAaC,EAAA,GAEb,EAAE,aAAAC,GAAa,oBAAAC,IAAqB,IAAM,GAAGC,MAASL,GAGtDM,IAAc,CAACF,KAAsBH,EAAW,aAChDM,IAAW;AAAA,IACb,cAAcJ,KAAeK,EAAgBL,CAAW;AAAA,IACxD,GAAGE;AAAA,EAAA;AAEP,2BAAQI,GAAA,EAAc,GAAGF,GAAU,WAAWD,IAAc,SAAY,KAAY;AACxF;"}
+{"version":3,"file":"MarkerLayer.js","sources":["../../../../../../src/components/map/components/features/layers/MarkerLayer.tsx"],"sourcesContent":["import type React from 'react';\n\nimport ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';\nimport { wrapSimpleTheme, type SimpleClusterTheme } from '../../../utils/clustering';\nimport { useMapContext } from '../../MapContext';\n\nexport type { ClusterTheme, SimpleClusterTheme };\n\nexport type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {\n    simpleTheme?: SimpleClusterTheme;\n    clusterDissolvable?: boolean;\n    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';\n    eps?: number;\n};\n\n/*\n * Not very different to the SimpleClusterLayer, but with a different intention.\n */\nconst MarkerLayer = (props: MarkerLayerProps) => {\n    const mapContext = useMapContext();\n\n    const { simpleTheme, clusterDissolvable = true, ...rest } = props;\n\n    // Norbert: Not an ideal solution\n    const showCluster = !clusterDissolvable || mapContext.showCluster;\n    const newProps = {\n        clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme, mapContext.enableMarkerIconCache),\n        ...rest,\n    };\n    return <ClusterLayer {...newProps} minWeight={showCluster ? undefined : 1000000000} />;\n};\n\nexport default MarkerLayer;\n"],"names":["MarkerLayer","props","mapContext","useMapContext","simpleTheme","clusterDissolvable","rest","showCluster","newProps","wrapSimpleTheme","ClusterLayer"],"mappings":";;;;AAkBA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAMC,IAAaC,EAAA,GAEb,EAAE,aAAAC,GAAa,oBAAAC,IAAqB,IAAM,GAAGC,MAASL,GAGtDM,IAAc,CAACF,KAAsBH,EAAW,aAChDM,IAAW;AAAA,IACb,cAAcJ,KAAeK,EAAgBL,GAAaF,EAAW,qBAAqB;AAAA,IAC1F,GAAGI;AAAA,EAAA;AAEP,2BAAQI,GAAA,EAAc,GAAGF,GAAU,WAAWD,IAAc,SAAY,KAAY;AACxF;"}