@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

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

@@ -1,25 +1,22 @@
-import { jsx as t, Fragment as m } from "react/jsx-runtime";
-import { map as s } from "es-toolkit/compat";
-import { MAP_LAYER_ROAD_RESTRICTIONS as e, MAP_LAYER_INCIDENTS as c, MAP_LAYER_TRAFFIC as o } from "../../constants.js";
-import f from "./overlayLayers/IncidentsLayer.js";
-import R from "./overlayLayers/RoadRestrictionLayer.js";
-import p from "./overlayLayers/TrafficLayer.js";
-const T = (a) => {
-  const { layers: n } = a, i = s(n, (r) => {
-    switch (r) {
-      case o:
-        return /* @__PURE__ */ t(p, { id: o }, r);
-      case c:
-        return /* @__PURE__ */ t(f, {}, r);
-      case e:
-        return /* @__PURE__ */ t(R, { id: e }, r);
-      default:
-        return null;
-    }
-  });
-  return /* @__PURE__ */ t(m, { children: i });
+import { MAP_LAYER_INCIDENTS as e, MAP_LAYER_ROAD_RESTRICTIONS as t, MAP_LAYER_TRAFFIC as n } from "../../constants.js";
+import r from "./overlayLayers/IncidentsLayer.js";
+import i from "./overlayLayers/RoadRestrictionLayer.js";
+import a from "./overlayLayers/TrafficLayer.js";
+import { map as o } from "es-toolkit/compat";
+import { Fragment as s, jsx as c } from "react/jsx-runtime";
+//#region src/components/map/components/features/layers/MapOverlayLayers.tsx
+var l = (l) => {
+	let { layers: u } = l;
+	return /* @__PURE__ */ c(s, { children: o(u, (o) => {
+		switch (o) {
+			case n: return /* @__PURE__ */ c(a, { id: n }, o);
+			case e: return /* @__PURE__ */ c(r, {}, o);
+			case t: return /* @__PURE__ */ c(i, { id: t }, o);
+			default: return null;
+		}
+	}) });
 };
-export {
-  T as default
-};
-//# sourceMappingURL=MapOverlayLayers.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=MapOverlayLayers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MapOverlayLayers.js","sources":["../../../../../../src/components/map/components/features/layers/MapOverlayLayers.tsx"],"sourcesContent":["import { map } from 'es-toolkit/compat';\n\nimport { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';\nimport IncidentsLayer from './overlayLayers/IncidentsLayer';\nimport RoadRestrictionLayer from './overlayLayers/RoadRestrictionLayer';\nimport TrafficLayer from './overlayLayers/TrafficLayer';\n\nexport type MapOverlayLayersProps = {\n    layers: string[];\n};\n\nconst MapOverlayLayers = (props: MapOverlayLayersProps) => {\n    const { layers } = props;\n\n    const layersToRender = map(layers, layer => {\n        switch (layer) {\n            case MAP_LAYER_TRAFFIC:\n                return <TrafficLayer id={MAP_LAYER_TRAFFIC} key={layer} />;\n            case MAP_LAYER_INCIDENTS:\n                return <IncidentsLayer key={layer} />;\n            case MAP_LAYER_ROAD_RESTRICTIONS:\n                return <RoadRestrictionLayer id={MAP_LAYER_ROAD_RESTRICTIONS} key={layer} />;\n            default:\n                return null;\n        }\n    });\n\n    return <>{layersToRender}</>;\n};\n\nexport default MapOverlayLayers;\n"],"names":["MapOverlayLayers","props","layers","layersToRender","map","layer","MAP_LAYER_TRAFFIC","jsx","TrafficLayer","MAP_LAYER_INCIDENTS","IncidentsLayer","MAP_LAYER_ROAD_RESTRICTIONS","RoadRestrictionLayer"],"mappings":";;;;;;AAWA,MAAMA,IAAmB,CAACC,MAAiC;AACvD,QAAM,EAAE,QAAAC,MAAWD,GAEbE,IAAiBC,EAAIF,GAAQ,CAAAG,MAAS;AACxC,YAAQA,GAAA;AAAA,MACJ,KAAKC;AACD,eAAO,gBAAAC,EAACC,GAAA,EAAa,IAAIF,EAAA,GAAwBD,CAAO;AAAA,MAC5D,KAAKI;AACD,eAAO,gBAAAF,EAACG,OAAoBL,CAAO;AAAA,MACvC,KAAKM;AACD,eAAO,gBAAAJ,EAACK,GAAA,EAAqB,IAAID,EAAA,GAAkCN,CAAO;AAAA,MAC9E;AACI,eAAO;AAAA,IAAA;AAAA,EAEnB,CAAC;AAED,gCAAU,UAAAF,EAAA,CAAe;AAC7B;"}
+{"version":3,"file":"MapOverlayLayers.js","names":[],"sources":["../../../../../../src/components/map/components/features/layers/MapOverlayLayers.tsx"],"sourcesContent":["import { map } from 'es-toolkit/compat';\n\nimport { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';\nimport IncidentsLayer from './overlayLayers/IncidentsLayer';\nimport RoadRestrictionLayer from './overlayLayers/RoadRestrictionLayer';\nimport TrafficLayer from './overlayLayers/TrafficLayer';\n\nexport type MapOverlayLayersProps = {\n    layers: string[];\n};\n\nconst MapOverlayLayers = (props: MapOverlayLayersProps) => {\n    const { layers } = props;\n\n    const layersToRender = map(layers, layer => {\n        switch (layer) {\n            case MAP_LAYER_TRAFFIC:\n                return <TrafficLayer id={MAP_LAYER_TRAFFIC} key={layer} />;\n            case MAP_LAYER_INCIDENTS:\n                return <IncidentsLayer key={layer} />;\n            case MAP_LAYER_ROAD_RESTRICTIONS:\n                return <RoadRestrictionLayer id={MAP_LAYER_ROAD_RESTRICTIONS} key={layer} />;\n            default:\n                return null;\n        }\n    });\n\n    return <>{layersToRender}</>;\n};\n\nexport default MapOverlayLayers;\n"],"mappings":";;;;;;;AAWA,IAAM,KAAoB,MAAiC;CACvD,IAAM,EAAE,cAAW;CAenB,OAAO,kBAAA,GAAA,EAAA,UAbgB,EAAI,IAAQ,MAAS;EACxC,QAAQ,GAAR;GACI,KAAK,GACD,OAAO,kBAAC,GAAD,EAAc,IAAI,EAAgC,GAAR,CAAQ;GAC7D,KAAK,GACD,OAAO,kBAAC,GAAD,CAA6B,GAAR,CAAQ;GACxC,KAAK,GACD,OAAO,kBAAC,GAAD,EAAsB,IAAI,EAA0C,GAAR,CAAQ;GAC/E,SACI,OAAO;EACf;CACJ,CAEU,EAAiB,CAAA;AAC/B"}

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

@@ -1,15 +1,17 @@
-import { jsx as n } from "react/jsx-runtime";
-import l from "./clustering/ClusterLayer.js";
-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__ */ n(l, { ...a, minWeight: m ? void 0 : 1e9 });
+import { useMapContext as e } from "../../MapContext.js";
+import t from "./clustering/ClusterLayer.js";
+import { wrapSimpleTheme as n } from "../../../utils/clustering.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/map/components/features/layers/MarkerLayer.tsx
+var i = (i) => {
+	let a = e(), { simpleTheme: o, clusterDissolvable: s = !0, ...c } = i, l = !s || a.showCluster;
+	return /* @__PURE__ */ r(t, {
+		clusterTheme: o && n(o, a.enableMarkerIconCache),
+		...c,
+		minWeight: l ? void 0 : 1e9
+	});
 };
-export {
-  f as default
-};
-//# sourceMappingURL=MarkerLayer.js.map
+//#endregion
+export { i 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, 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;"}
+{"version":3,"file":"MarkerLayer.js","names":[],"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"],"mappings":";;;;;AAkBA,IAAM,KAAe,MAA4B;CAC7C,IAAM,IAAa,EAAc,GAE3B,EAAE,gBAAa,wBAAqB,IAAM,GAAG,MAAS,GAGtD,IAAc,CAAC,KAAsB,EAAW;CAKtD,OAAO,kBAAC,GAAD;EAHH,cAAc,KAAe,EAAgB,GAAa,EAAW,qBAAqB;EAC1F,GAAG;EAE4B,WAAW,IAAc,KAAA,IAAY;CAAa,CAAA;AACzF"}

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -1,84 +1,39 @@
-import { useState as D, useEffect as L, useLayoutEffect as P } from "react";
-import { useMapContext as f } from "../../../MapContext.js";
-import { useUpdateProp as E, useUpdateEventListenerMap as I } from "../../../../utils/hooks.js";
-const T = (e) => new H.clustering.DataPoint(e.lat, e.lng, 1, e), p = (e, t = T) => e.map((r, n) => t(r, n)), C = new H.clustering.Provider([]).getTheme(), R = (e) => {
-  switch (e) {
-    case "GRID":
-      return H.clustering.Provider.Strategy.GRID;
-    case "DYNAMICGRID":
-      return H.clustering.Provider.Strategy.DYNAMICGRID;
-    default:
-      return H.clustering.Provider.Strategy.FASTGRID;
-  }
-}, w = (e) => {
-  const {
-    data: t,
-    dataConverter: r,
-    minWeight: n,
-    minZoom: a,
-    maxZoom: o,
-    clusterTheme: m = C,
-    eventListenerMap: d,
-    clusterStrategy: l,
-    eps: g = 100
-  } = e, { api: i } = f(), [s, v] = D();
-  return L(() => {
-    const y = {
-      clusteringOptions: {
-        strategy: R(l),
-        eps: g,
-        minWeight: n ? Number.parseInt(n, 10) : 2
-      },
-      min: a ? Number.parseInt(a, 10) : 0,
-      max: o ? Number.parseInt(o, 10) : 22,
-      theme: m
-      // theme: {
-      //     getClusterPresentation: cluster => {
-      //         // Use cluster weight to change the icon size
-      //         const weight = cluster.getWeight();
-      //         // Calculate circle size
-      //         const radius = weight; // * 5;
-      //         const diameter = radius * 2;
-      //         // Replace variables in the icon template
-      //         const svgString = clusterSvgTemplate.replace(/\{text\}/g, String(weight));
-      //         // .replace(/\{diameter\}/g, String(diameter));
-      //         // Create an icon
-      //         // Note that we create a different icon depending from the weight of the cluster
-      //         const clusterIcon = new H.map.Icon(svgString);
-      //         // Create a marker for the cluster
-      //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {
-      //             icon: clusterIcon,
-      //             // Set min/max zoom with values from the cluster, otherwise
-      //             // clusters will be shown at all zoom levels
-      //             min: cluster.getMinZoom(),
-      //             max: cluster.getMaxZoom(),
-      //         });
-      //         // Bind cluster data to the marker
-      //         clusterMarker.setData(cluster);
-      //         return clusterMarker;
-      //     },
-      //     getNoisePresentation: noisePoint => {
-      //         // Create a marker for noise points:
-      //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {
-      //             // icon: noiseIcon,
-      //             icon: reactIcon,
-      //             // Use min zoom from a noise point to show it correctly at certain zoom levels
-      //             min: noisePoint.getMinZoom(),
-      //         });
-      //         // Bind noise point data to the marker:
-      //         noiseMarker.setData(noisePoint);
-      //         return noiseMarker;
-      //     },
-      // },
-    }, u = new H.clustering.Provider(p(t, r), y), c = new H.map.layer.ObjectLayer(u);
-    return i.map?.addLayer(c), v(u), () => {
-      i.map?.removeLayer(c), c.dispose(), u.dispose();
-    };
-  }, [n, a, o, i.map]), P(() => {
-    s && s.setDataPoints(p(t, r));
-  }, [t, r]), E(s, "setTheme", m), I(s, d), null;
+import { useMapContext as e } from "../../../MapContext.js";
+import { useUpdateEventListenerMap as t, useUpdateProp as n } from "../../../../utils/hooks.js";
+import { useEffect as r, useLayoutEffect as i, useState as a } from "react";
+//#region src/components/map/components/features/layers/clustering/ClusterLayer.tsx
+var o = (e) => new H.clustering.DataPoint(e.lat, e.lng, 1, e), s = (e, t = o) => e.map((e, n) => t(e, n)), c = new H.clustering.Provider([]).getTheme(), l = (e) => {
+	switch (e) {
+		case "GRID": return H.clustering.Provider.Strategy.GRID;
+		case "DYNAMICGRID": return H.clustering.Provider.Strategy.DYNAMICGRID;
+		default: return H.clustering.Provider.Strategy.FASTGRID;
+	}
+}, u = (o) => {
+	let { data: u, dataConverter: d, minWeight: f, minZoom: p, maxZoom: m, clusterTheme: h = c, eventListenerMap: g, clusterStrategy: _, eps: v = 100 } = o, { api: y } = e(), [b, x] = a();
+	return r(() => {
+		let e = {
+			clusteringOptions: {
+				strategy: l(_),
+				eps: v,
+				minWeight: f ? Number.parseInt(f, 10) : 2
+			},
+			min: p ? Number.parseInt(p, 10) : 0,
+			max: m ? Number.parseInt(m, 10) : 22,
+			theme: h
+		}, t = new H.clustering.Provider(s(u, d), e), n = new H.map.layer.ObjectLayer(t);
+		return y.map?.addLayer(n), x(t), () => {
+			y.map?.removeLayer(n), n.dispose(), t.dispose();
+		};
+	}, [
+		f,
+		p,
+		m,
+		y.map
+	]), i(() => {
+		b && b.setDataPoints(s(u, d));
+	}, [u, d]), n(b, "setTheme", h), t(b, g), null;
 };
-export {
-  w as default
-};
-//# sourceMappingURL=ClusterLayer.js.map
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=ClusterLayer.js.map

package/components/map/components/features/layers/clustering/ClusterLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClusterLayer.js","sources":["../../../../../../../src/components/map/components/features/layers/clustering/ClusterLayer.tsx"],"sourcesContent":["import { useState, useEffect, useLayoutEffect } from 'react';\n\nimport { useMapContext } from '../../../MapContext';\nimport { useUpdateProp, useUpdateEventListenerMap } from '../../../../utils/hooks';\nimport type { EventListenerMap } from '../../../../utils/eventHandling';\nexport type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';\n\nexport type ClusterTheme = H.clustering.ITheme;\n\nexport type Position = {\n    lat: number;\n    lng: number;\n};\n\nexport type DataConverter = (data: Position, index: number) => H.clustering.DataPoint;\n\nexport type ClusterLayerProps = {\n    data: object[];\n    dataConverter?: DataConverter;\n    minWeight?: string | number;\n    minZoom?: string | number;\n    maxZoom?: string | number;\n    clusterTheme?: ClusterTheme | undefined;\n    eventListenerMap?: EventListenerMap;\n    clusterStrategy?: ClusterStrategy;\n    eps?: number;\n};\n\nconst DEFAULT_DATA_CONVERTER: DataConverter = (pos: Position): H.clustering.DataPoint =>\n    new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);\n\nconst convertData = (data: object[], converterFunc: DataConverter = DEFAULT_DATA_CONVERTER) =>\n    data.map((value, index): H.clustering.DataPoint => converterFunc(value as Position, index));\n\nconst DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();\n\nconst getClusterStrategy = (strategy?: ClusterStrategy): H.clustering.Provider.Strategy => {\n    switch (strategy) {\n        case 'GRID':\n            return H.clustering.Provider.Strategy.GRID;\n        case 'DYNAMICGRID':\n            return H.clustering.Provider.Strategy.DYNAMICGRID;\n        default:\n            return H.clustering.Provider.Strategy.FASTGRID;\n    }\n};\n\n// TODO: replace some cluster marker like for POIs with SVG MarkerIcons instead of rendering DomMarker\n// to increase rendering performance, especially, when rendering hundreds of marker like for charging stations\n\n// const noiseSvg =\n//     '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20px\" width=\"20px\"><circle cx=\"5px\" cy=\"5px\" r=\"5px\" fill=\"green\" /></svg>';\n\n// Create an icon to represent the noise points\n// Note that same icon will be used for all noise points\n// const noiseIcon = new H.map.Icon(noiseSvg, {\n//     size: { w: 20, h: 20 },\n//     anchor: { x: 10, y: 10 },\n// });\n\n// SVG template to use for cluster icons\n// const clusterSvgTemplate = `<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n//     <circle cx=\"20\" cy=\"20\" r=\"19.5\" fill=\"#B23672\" stroke=\"#B23672\"/>\n//     <g transform=\"translate(20,24.6)\">\n//         <text fill=\"white\" font-family=\"'Source Sans Pro', Helvetica, sans-serif\" font-size=\"15\" font-weight=\"500\" text-anchor=\"middle\">\n//             {text}\n//         </text>\n//     </g>\n// </svg>`;\n\nconst ClusterLayer = (props: ClusterLayerProps) => {\n    const {\n        data,\n        dataConverter,\n        minWeight,\n        minZoom,\n        maxZoom,\n        clusterTheme = DEFAULT_CLUSTER_THEME,\n        eventListenerMap,\n        clusterStrategy,\n        eps = 100,\n    } = props;\n\n    const { api } = useMapContext();\n\n    const [provider, setProvider] = useState<H.clustering.Provider | undefined>();\n\n    useEffect(() => {\n        // const reactIcon = new H.map.DomIcon(\n        //     ReactDomServer.renderToStaticMarkup(\n        //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>\n        //     )\n        // );\n\n        const clusterProviderOptions: H.clustering.Provider.Options = {\n            clusteringOptions: {\n                strategy: getClusterStrategy(clusterStrategy),\n                eps,\n                minWeight: minWeight ? Number.parseInt(minWeight as string, 10) : 2,\n            },\n            min: minZoom ? Number.parseInt(minZoom as string, 10) : 0,\n            max: maxZoom ? Number.parseInt(maxZoom as string, 10) : 22,\n            theme: clusterTheme,\n            // theme: {\n            //     getClusterPresentation: cluster => {\n            //         // Use cluster weight to change the icon size\n            //         const weight = cluster.getWeight();\n            //         // Calculate circle size\n            //         const radius = weight; // * 5;\n            //         const diameter = radius * 2;\n\n            //         // Replace variables in the icon template\n            //         const svgString = clusterSvgTemplate.replace(/\\{text\\}/g, String(weight));\n            //         // .replace(/\\{diameter\\}/g, String(diameter));\n\n            //         // Create an icon\n            //         // Note that we create a different icon depending from the weight of the cluster\n            //         const clusterIcon = new H.map.Icon(svgString);\n\n            //         // Create a marker for the cluster\n            //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {\n            //             icon: clusterIcon,\n\n            //             // Set min/max zoom with values from the cluster, otherwise\n            //             // clusters will be shown at all zoom levels\n            //             min: cluster.getMinZoom(),\n            //             max: cluster.getMaxZoom(),\n            //         });\n\n            //         // Bind cluster data to the marker\n            //         clusterMarker.setData(cluster);\n\n            //         return clusterMarker;\n            //     },\n            //     getNoisePresentation: noisePoint => {\n            //         // Create a marker for noise points:\n            //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {\n            //             // icon: noiseIcon,\n            //             icon: reactIcon,\n\n            //             // Use min zoom from a noise point to show it correctly at certain zoom levels\n            //             min: noisePoint.getMinZoom(),\n            //         });\n\n            //         // Bind noise point data to the marker:\n            //         noiseMarker.setData(noisePoint);\n            //         return noiseMarker;\n            //     },\n            // },\n        };\n\n        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);\n        const objectLayer = new H.map.layer.ObjectLayer(newProvider);\n\n        api.map?.addLayer(objectLayer);\n\n        setProvider(newProvider);\n\n        return () => {\n            api.map?.removeLayer(objectLayer);\n            objectLayer.dispose();\n            newProvider.dispose();\n        };\n    }, [minWeight, minZoom, maxZoom, api.map]);\n\n    // Effect to update data points of provider\n    useLayoutEffect(() => {\n        if (provider) {\n            provider.setDataPoints(convertData(data, dataConverter));\n        }\n    }, [data, dataConverter]);\n\n    useUpdateProp(provider, 'setTheme', clusterTheme);\n    useUpdateEventListenerMap(provider, eventListenerMap);\n\n    return null;\n};\n\nexport default ClusterLayer;\n"],"names":["DEFAULT_DATA_CONVERTER","pos","convertData","data","converterFunc","value","index","DEFAULT_CLUSTER_THEME","getClusterStrategy","strategy","ClusterLayer","props","dataConverter","minWeight","minZoom","maxZoom","clusterTheme","eventListenerMap","clusterStrategy","eps","api","useMapContext","provider","setProvider","useState","useEffect","clusterProviderOptions","newProvider","objectLayer","useLayoutEffect","useUpdateProp","useUpdateEventListenerMap"],"mappings":";;;AA4BA,MAAMA,IAAwC,CAACC,MAC3C,IAAI,EAAE,WAAW,UAAUA,EAAI,KAAKA,EAAI,KAAK,GAAGA,CAAG,GAEjDC,IAAc,CAACC,GAAgBC,IAA+BJ,MAChEG,EAAK,IAAI,CAACE,GAAOC,MAAkCF,EAAcC,GAAmBC,CAAK,CAAC,GAExFC,IAAwB,IAAI,EAAE,WAAW,SAAS,CAAA,CAAE,EAAE,SAAA,GAEtDC,IAAqB,CAACC,MAA+D;AACvF,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO,EAAE,WAAW,SAAS,SAAS;AAAA,IAC1C,KAAK;AACD,aAAO,EAAE,WAAW,SAAS,SAAS;AAAA,IAC1C;AACI,aAAO,EAAE,WAAW,SAAS,SAAS;AAAA,EAAA;AAElD,GAyBMC,IAAe,CAACC,MAA6B;AAC/C,QAAM;AAAA,IACF,MAAAR;AAAA,IACA,eAAAS;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC,IAAeT;AAAA,IACf,kBAAAU;AAAA,IACA,iBAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,EAAA,IACNR,GAEE,EAAE,KAAAS,EAAA,IAAQC,EAAA,GAEV,CAACC,GAAUC,CAAW,IAAIC,EAAA;AAEhC,SAAAC,EAAU,MAAM;AAOZ,UAAMC,IAAwD;AAAA,MAC1D,mBAAmB;AAAA,QACf,UAAUlB,EAAmBU,CAAe;AAAA,QAC5C,KAAAC;AAAA,QACA,WAAWN,IAAY,OAAO,SAASA,GAAqB,EAAE,IAAI;AAAA,MAAA;AAAA,MAEtE,KAAKC,IAAU,OAAO,SAASA,GAAmB,EAAE,IAAI;AAAA,MACxD,KAAKC,IAAU,OAAO,SAASA,GAAmB,EAAE,IAAI;AAAA,MACxD,OAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,GAiDLW,IAAc,IAAI,EAAE,WAAW,SAASzB,EAAYC,GAAMS,CAAa,GAAGc,CAAsB,GAChGE,IAAc,IAAI,EAAE,IAAI,MAAM,YAAYD,CAAW;AAE3D,WAAAP,EAAI,KAAK,SAASQ,CAAW,GAE7BL,EAAYI,CAAW,GAEhB,MAAM;AACT,MAAAP,EAAI,KAAK,YAAYQ,CAAW,GAChCA,EAAY,QAAA,GACZD,EAAY,QAAA;AAAA,IAChB;AAAA,EACJ,GAAG,CAACd,GAAWC,GAASC,GAASK,EAAI,GAAG,CAAC,GAGzCS,EAAgB,MAAM;AAClB,IAAIP,KACAA,EAAS,cAAcpB,EAAYC,GAAMS,CAAa,CAAC;AAAA,EAE/D,GAAG,CAACT,GAAMS,CAAa,CAAC,GAExBkB,EAAcR,GAAU,YAAYN,CAAY,GAChDe,EAA0BT,GAAUL,CAAgB,GAE7C;AACX;"}
+{"version":3,"file":"ClusterLayer.js","names":[],"sources":["../../../../../../../src/components/map/components/features/layers/clustering/ClusterLayer.tsx"],"sourcesContent":["import { useState, useEffect, useLayoutEffect } from 'react';\n\nimport { useMapContext } from '../../../MapContext';\nimport { useUpdateProp, useUpdateEventListenerMap } from '../../../../utils/hooks';\nimport type { EventListenerMap } from '../../../../utils/eventHandling';\nexport type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';\n\nexport type ClusterTheme = H.clustering.ITheme;\n\nexport type Position = {\n    lat: number;\n    lng: number;\n};\n\nexport type DataConverter = (data: Position, index: number) => H.clustering.DataPoint;\n\nexport type ClusterLayerProps = {\n    data: object[];\n    dataConverter?: DataConverter;\n    minWeight?: string | number;\n    minZoom?: string | number;\n    maxZoom?: string | number;\n    clusterTheme?: ClusterTheme | undefined;\n    eventListenerMap?: EventListenerMap;\n    clusterStrategy?: ClusterStrategy;\n    eps?: number;\n};\n\nconst DEFAULT_DATA_CONVERTER: DataConverter = (pos: Position): H.clustering.DataPoint =>\n    new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);\n\nconst convertData = (data: object[], converterFunc: DataConverter = DEFAULT_DATA_CONVERTER) =>\n    data.map((value, index): H.clustering.DataPoint => converterFunc(value as Position, index));\n\nconst DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();\n\nconst getClusterStrategy = (strategy?: ClusterStrategy): H.clustering.Provider.Strategy => {\n    switch (strategy) {\n        case 'GRID':\n            return H.clustering.Provider.Strategy.GRID;\n        case 'DYNAMICGRID':\n            return H.clustering.Provider.Strategy.DYNAMICGRID;\n        default:\n            return H.clustering.Provider.Strategy.FASTGRID;\n    }\n};\n\n// TODO: replace some cluster marker like for POIs with SVG MarkerIcons instead of rendering DomMarker\n// to increase rendering performance, especially, when rendering hundreds of marker like for charging stations\n\n// const noiseSvg =\n//     '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20px\" width=\"20px\"><circle cx=\"5px\" cy=\"5px\" r=\"5px\" fill=\"green\" /></svg>';\n\n// Create an icon to represent the noise points\n// Note that same icon will be used for all noise points\n// const noiseIcon = new H.map.Icon(noiseSvg, {\n//     size: { w: 20, h: 20 },\n//     anchor: { x: 10, y: 10 },\n// });\n\n// SVG template to use for cluster icons\n// const clusterSvgTemplate = `<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n//     <circle cx=\"20\" cy=\"20\" r=\"19.5\" fill=\"#B23672\" stroke=\"#B23672\"/>\n//     <g transform=\"translate(20,24.6)\">\n//         <text fill=\"white\" font-family=\"'Source Sans Pro', Helvetica, sans-serif\" font-size=\"15\" font-weight=\"500\" text-anchor=\"middle\">\n//             {text}\n//         </text>\n//     </g>\n// </svg>`;\n\nconst ClusterLayer = (props: ClusterLayerProps) => {\n    const {\n        data,\n        dataConverter,\n        minWeight,\n        minZoom,\n        maxZoom,\n        clusterTheme = DEFAULT_CLUSTER_THEME,\n        eventListenerMap,\n        clusterStrategy,\n        eps = 100,\n    } = props;\n\n    const { api } = useMapContext();\n\n    const [provider, setProvider] = useState<H.clustering.Provider | undefined>();\n\n    useEffect(() => {\n        // const reactIcon = new H.map.DomIcon(\n        //     ReactDomServer.renderToStaticMarkup(\n        //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>\n        //     )\n        // );\n\n        const clusterProviderOptions: H.clustering.Provider.Options = {\n            clusteringOptions: {\n                strategy: getClusterStrategy(clusterStrategy),\n                eps,\n                minWeight: minWeight ? Number.parseInt(minWeight as string, 10) : 2,\n            },\n            min: minZoom ? Number.parseInt(minZoom as string, 10) : 0,\n            max: maxZoom ? Number.parseInt(maxZoom as string, 10) : 22,\n            theme: clusterTheme,\n            // theme: {\n            //     getClusterPresentation: cluster => {\n            //         // Use cluster weight to change the icon size\n            //         const weight = cluster.getWeight();\n            //         // Calculate circle size\n            //         const radius = weight; // * 5;\n            //         const diameter = radius * 2;\n\n            //         // Replace variables in the icon template\n            //         const svgString = clusterSvgTemplate.replace(/\\{text\\}/g, String(weight));\n            //         // .replace(/\\{diameter\\}/g, String(diameter));\n\n            //         // Create an icon\n            //         // Note that we create a different icon depending from the weight of the cluster\n            //         const clusterIcon = new H.map.Icon(svgString);\n\n            //         // Create a marker for the cluster\n            //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {\n            //             icon: clusterIcon,\n\n            //             // Set min/max zoom with values from the cluster, otherwise\n            //             // clusters will be shown at all zoom levels\n            //             min: cluster.getMinZoom(),\n            //             max: cluster.getMaxZoom(),\n            //         });\n\n            //         // Bind cluster data to the marker\n            //         clusterMarker.setData(cluster);\n\n            //         return clusterMarker;\n            //     },\n            //     getNoisePresentation: noisePoint => {\n            //         // Create a marker for noise points:\n            //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {\n            //             // icon: noiseIcon,\n            //             icon: reactIcon,\n\n            //             // Use min zoom from a noise point to show it correctly at certain zoom levels\n            //             min: noisePoint.getMinZoom(),\n            //         });\n\n            //         // Bind noise point data to the marker:\n            //         noiseMarker.setData(noisePoint);\n            //         return noiseMarker;\n            //     },\n            // },\n        };\n\n        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);\n        const objectLayer = new H.map.layer.ObjectLayer(newProvider);\n\n        api.map?.addLayer(objectLayer);\n\n        setProvider(newProvider);\n\n        return () => {\n            api.map?.removeLayer(objectLayer);\n            objectLayer.dispose();\n            newProvider.dispose();\n        };\n    }, [minWeight, minZoom, maxZoom, api.map]);\n\n    // Effect to update data points of provider\n    useLayoutEffect(() => {\n        if (provider) {\n            provider.setDataPoints(convertData(data, dataConverter));\n        }\n    }, [data, dataConverter]);\n\n    useUpdateProp(provider, 'setTheme', clusterTheme);\n    useUpdateEventListenerMap(provider, eventListenerMap);\n\n    return null;\n};\n\nexport default ClusterLayer;\n"],"mappings":";;;;AA4BA,IAAM,KAAyC,MAC3C,IAAI,EAAE,WAAW,UAAU,EAAI,KAAK,EAAI,KAAK,GAAG,CAAG,GAEjD,KAAe,GAAgB,IAA+B,MAChE,EAAK,KAAK,GAAO,MAAkC,EAAc,GAAmB,CAAK,CAAC,GAExF,IAAwB,IAAI,EAAE,WAAW,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,GAE/D,KAAsB,MAA+D;CACvF,QAAQ,GAAR;EACI,KAAK,QACD,OAAO,EAAE,WAAW,SAAS,SAAS;EAC1C,KAAK,eACD,OAAO,EAAE,WAAW,SAAS,SAAS;EAC1C,SACI,OAAO,EAAE,WAAW,SAAS,SAAS;CAC9C;AACJ,GAyBM,KAAgB,MAA6B;CAC/C,IAAM,EACF,SACA,kBACA,cACA,YACA,YACA,kBAAe,GACf,qBACA,oBACA,SAAM,QACN,GAEE,EAAE,WAAQ,EAAc,GAExB,CAAC,GAAU,KAAe,EAA4C;CA0F5E,OAxFA,QAAgB;EAOZ,IAAM,IAAwD;GAC1D,mBAAmB;IACf,UAAU,EAAmB,CAAe;IAC5C;IACA,WAAW,IAAY,OAAO,SAAS,GAAqB,EAAE,IAAI;GACtE;GACA,KAAK,IAAU,OAAO,SAAS,GAAmB,EAAE,IAAI;GACxD,KAAK,IAAU,OAAO,SAAS,GAAmB,EAAE,IAAI;GACxD,OAAO;EA+CX,GAEM,IAAc,IAAI,EAAE,WAAW,SAAS,EAAY,GAAM,CAAa,GAAG,CAAsB,GAChG,IAAc,IAAI,EAAE,IAAI,MAAM,YAAY,CAAW;EAM3D,OAJA,EAAI,KAAK,SAAS,CAAW,GAE7B,EAAY,CAAW,SAEV;GAGT,AAFA,EAAI,KAAK,YAAY,CAAW,GAChC,EAAY,QAAQ,GACpB,EAAY,QAAQ;EACxB;CACJ,GAAG;EAAC;EAAW;EAAS;EAAS,EAAI;CAAG,CAAC,GAGzC,QAAsB;EAClB,AAAI,KACA,EAAS,cAAc,EAAY,GAAM,CAAa,CAAC;CAE/D,GAAG,CAAC,GAAM,CAAa,CAAC,GAExB,EAAc,GAAU,YAAY,CAAY,GAChD,EAA0B,GAAU,CAAgB,GAE7C;AACX"}

package/components/map/components/features/layers/clustering/SimpleClusterLayer.js

@@ -1,18 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-import p from "./ClusterLayer.js";
-import { wrapSimpleTheme as s } from "../../../../utils/clustering.js";
-import { useMapContext as a } from "../../../MapContext.js";
-const u = (r) => {
-  const t = a(), { simpleTheme: e, ...m } = r;
-  return /* @__PURE__ */ o(
-    p,
-    {
-      ...m,
-      clusterTheme: e && s(e, t.enableMarkerIconCache)
-    }
-  );
+import { useMapContext as e } from "../../../MapContext.js";
+import t from "./ClusterLayer.js";
+import { wrapSimpleTheme as n } from "../../../../utils/clustering.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/map/components/features/layers/clustering/SimpleClusterLayer.tsx
+var i = (i) => {
+	let a = e(), { simpleTheme: o, ...s } = i;
+	return /* @__PURE__ */ r(t, {
+		...s,
+		clusterTheme: o && n(o, a.enableMarkerIconCache)
+	});
 };
-export {
-  u as default
-};
-//# sourceMappingURL=SimpleClusterLayer.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=SimpleClusterLayer.js.map

package/components/map/components/features/layers/clustering/SimpleClusterLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleClusterLayer.js","sources":["../../../../../../../src/components/map/components/features/layers/clustering/SimpleClusterLayer.tsx"],"sourcesContent":["import ClusterLayer, { type ClusterLayerProps } from './ClusterLayer';\nimport { type SimpleClusterTheme, wrapSimpleTheme } from '../../../../utils/clustering';\nimport { useMapContext } from '../../../MapContext';\n\nexport type SimpleClusterLayerProps = Omit<ClusterLayerProps, 'clusterTheme'> & {\n    simpleTheme?: SimpleClusterTheme;\n};\n\nconst SimpleClusterLayer = (props: SimpleClusterLayerProps) => {\n    const mapContext = useMapContext();\n    const { simpleTheme, ...rest } = props;\n    return (\n        <ClusterLayer\n            {...rest}\n            clusterTheme={simpleTheme && wrapSimpleTheme(simpleTheme, mapContext.enableMarkerIconCache)}\n        />\n    );\n};\n\nexport default SimpleClusterLayer;\n"],"names":["SimpleClusterLayer","props","mapContext","useMapContext","simpleTheme","rest","jsx","ClusterLayer","wrapSimpleTheme"],"mappings":";;;;AAQA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAMC,IAAaC,EAAA,GACb,EAAE,aAAAC,GAAa,GAAGC,EAAA,IAASJ;AACjC,SACI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,cAAcD,KAAeI,EAAgBJ,GAAaF,EAAW,qBAAqB;AAAA,IAAA;AAAA,EAAA;AAGtG;"}
+{"version":3,"file":"SimpleClusterLayer.js","names":[],"sources":["../../../../../../../src/components/map/components/features/layers/clustering/SimpleClusterLayer.tsx"],"sourcesContent":["import ClusterLayer, { type ClusterLayerProps } from './ClusterLayer';\nimport { type SimpleClusterTheme, wrapSimpleTheme } from '../../../../utils/clustering';\nimport { useMapContext } from '../../../MapContext';\n\nexport type SimpleClusterLayerProps = Omit<ClusterLayerProps, 'clusterTheme'> & {\n    simpleTheme?: SimpleClusterTheme;\n};\n\nconst SimpleClusterLayer = (props: SimpleClusterLayerProps) => {\n    const mapContext = useMapContext();\n    const { simpleTheme, ...rest } = props;\n    return (\n        <ClusterLayer\n            {...rest}\n            clusterTheme={simpleTheme && wrapSimpleTheme(simpleTheme, mapContext.enableMarkerIconCache)}\n        />\n    );\n};\n\nexport default SimpleClusterLayer;\n"],"mappings":";;;;;AAQA,IAAM,KAAsB,MAAmC;CAC3D,IAAM,IAAa,EAAc,GAC3B,EAAE,gBAAa,GAAG,MAAS;CACjC,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,cAAc,KAAe,EAAgB,GAAa,EAAW,qBAAqB;CAC7F,CAAA;AAET"}