@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

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

@@ -1,9 +1,25 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable no-undef */
 import React from 'react';
 import Layer from './Layer';
-function getIncidentsLayer(api) {
-    return api.defaultLayers.vector.normal.trafficincidents;
-}
-const IncidentsLayer = props => _jsx(Layer, Object.assign({}, props, { createLayer: getIncidentsLayer }));
+// Layer that shows construction sites marker that are interactive and use a popup for details
+// Since "vector.normal.trafficincidents" is deprecated we have to use the Here Traffic Service v7
+// see: https://developer.here.com/documentation/maps/3.1.46.0/api_reference/H.service.Platform.html
+const createTrafficIncidentsLayer = api => {
+    const config = `
+  sources:
+    omv:
+        type: OMV
+  layers:
+    incident_icons:
+        data: {source: omv}
+`;
+    return api.platform.getTrafficVectorTileService().createLayer(new H.map.render.webgl.Style(config));
+};
+// For raster map, we use the old deprecated fallback for now
+const createTrafficIncidentsLayerFallback = api => api.defaultLayers.vector.normal.trafficincidents;
+const IncidentsLayer = props => {
+    const { useWebGL } = props, remainingProps = __rest(props, ["useWebGL"]);
+    return (_jsx(Layer, Object.assign({}, remainingProps, { createLayer: useWebGL ? createTrafficIncidentsLayer : createTrafficIncidentsLayerFallback })));
+};
 export default IncidentsLayer;

package/components/map/components/features/layers/Layer.d.ts

@@ -3,13 +3,12 @@ declare function Layer(props: any): null;
 declare namespace Layer {
     namespace propTypes {
         const api: PropTypes.Requireable<PropTypes.InferProps<{
-            map: PropTypes.Requireable<any>;
-            platform: PropTypes.Requireable<any>;
+            map: PropTypes.Requireable<H.Map>;
+            platform: PropTypes.Requireable<H.service.Platform>;
             defaultLayers: PropTypes.Requireable<object>;
-            group: PropTypes.Requireable<any>;
+            group: PropTypes.Requireable<NonNullable<H.Map | H.map.Group | null | undefined>>;
         }>>;
         const createLayer: PropTypes.Validator<(...args: any[]) => any>;
-        const language: PropTypes.Requireable<string>;
         const layerIndex: PropTypes.Requireable<number>;
     }
 }

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

@@ -1,12 +1,10 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import mapProps from '../../../utils/proptypes';
-import { mapToLongLocale } from '../../../utils/localization';
 const Layer = props => {
-    const { api, createLayer, layerIndex, language } = props;
+    const { api, createLayer, layerIndex } = props;
     useEffect(() => {
-        const lang = mapToLongLocale(language);
-        const newLayer = createLayer(api, lang);
+        const newLayer = createLayer(api);
         api.map.addLayer(newLayer, layerIndex);
         return () => {
             if (newLayer) {
@@ -20,7 +18,6 @@ const Layer = props => {
 Layer.propTypes = {
     api: mapProps.api,
     createLayer: PropTypes.func.isRequired,
-    language: PropTypes.string,
     layerIndex: PropTypes.number,
 };
 export default Layer;

package/components/map/components/features/layers/MapLayerGroup.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+export type MapLayerGroupProps = {
+    isVisible?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+};
+declare const MapLayerGroup: (props: PropsWithChildren<MapLayerGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerGroup;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useContext } from 'react';
+import { MapContext } from '../../MapContext';
+// TODO: apparently it is not used
+// Consider Using a Group Layer: If you have additional map objects or want to
+// control visibility/z-index of the cluster layer separately, using a group layer can be beneficial.
+const MapLayerGroup = (props) => {
+    const { minZoom = Number.NEGATIVE_INFINITY, maxZoom = Number.POSITIVE_INFINITY, isVisible = true, children, } = props;
+    const context = useContext(MapContext);
+    const api = context.api;
+    const [group, setGroup] = useState();
+    const [childApi, setChildApi] = useState();
+    useEffect(() => {
+        var _a;
+        const newGroup = new H.map.Group({
+            min: minZoom,
+            max: maxZoom,
+        });
+        newGroup.setVisibility(isVisible);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        setGroup(newGroup);
+        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        return () => {
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            }
+            newGroup.dispose();
+        };
+    }, [api.map]);
+    useEffect(() => {
+        if (group) {
+            group.setVisibility(isVisible);
+        }
+    }, [isVisible]);
+    return (_jsx("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && _jsx(MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+};
+export default MapLayerGroup;

package/components/map/components/features/layers/MapOverlayLayers.d.ts

@@ -0,0 +1,5 @@
+export type MapOverlayLayersProps = {
+    layers: string[];
+};
+declare const MapOverlayLayers: (props: MapOverlayLayersProps) => import("react/jsx-runtime").JSX.Element;
+export default MapOverlayLayers;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import 'react';
+import map from 'lodash/fp/map';
+import { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';
+import IncidentsLayer from './overlayLayers/IncidentsLayer';
+import RoadRestrictionLayer from './overlayLayers/RoadRestrictionLayer';
+import TrafficLayer from './overlayLayers/TrafficLayer';
+const MapOverlayLayers = (props) => {
+    const { layers } = props;
+    const layersToRender = map(layer => {
+        switch (layer) {
+            case MAP_LAYER_TRAFFIC:
+                return _jsx(TrafficLayer, { id: MAP_LAYER_TRAFFIC }, layer);
+            case MAP_LAYER_INCIDENTS:
+                return _jsx(IncidentsLayer, {}, layer);
+            case MAP_LAYER_ROAD_RESTRICTIONS:
+                return _jsx(RoadRestrictionLayer, { id: MAP_LAYER_ROAD_RESTRICTIONS }, layer);
+            default:
+                return null;
+        }
+    }, layers);
+    return _jsx(_Fragment, { children: layersToRender });
+};
+export default MapOverlayLayers;

package/components/map/components/features/layers/MarkerLayer.d.ts

@@ -1,14 +1,10 @@
+import React from 'react';
+import ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';
+export type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {
+    simpleTheme?: ClusterTheme;
+    clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
+};
+declare const MarkerLayer: (props: MarkerLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default MarkerLayer;
-declare function MarkerLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MarkerLayer {
-    namespace propTypes {
-        const simpleTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const clusterDissolvable: PropTypes.Requireable<boolean>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,27 +1,19 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import getOr from 'lodash/fp/getOr';
-import mapProps from '../../../utils/proptypes';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ClusterLayer from './clustering/ClusterLayer';
 import { wrapSimpleTheme } from '../../../utils/clustering';
-import { MapContext } from '../../context';
+import { useMapContext } from '../../MapContext';
 /*
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */
-const MarkerLayer = props => {
-    const { api } = useContext(MapContext);
+const MarkerLayer = (props) => {
+    const mapContext = useMapContext();
     const { simpleTheme, clusterDissolvable = true } = props, rest = __rest(props, ["simpleTheme", "clusterDissolvable"]);
     // Norbert: Not an ideal solution
-    const showCluster = !clusterDissolvable || getOr(true, 'settings.showCluster', api);
+    const showCluster = !clusterDissolvable || mapContext.showCluster;
     const newProps = Object.assign({ clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }, rest);
     return _jsx(ClusterLayer, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
 };
-MarkerLayer.propTypes = {
-    simpleTheme: mapProps.clusterTheme,
-    clusterDissolvable: PropTypes.bool,
-    clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: PropTypes.number,
-};
 export default MarkerLayer;

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

@@ -3,12 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { FORMAT, TILE_SIZE } from '../../constants';
 import Layer from './Layer';
-const createRoadRestrictionLayer = useWebGL => (api, language) => {
+// Layer for rendering truck road signs
+// incident_icons, traffic_flow, traffic_incidents
+// FIXME: 'truckonlytile' is HERE Map Tile v2 and therefore deprecated
+const createRoadRestrictionLayer = useWebGL => api => {
+    // "createIncidentsLayer" and "createFlowLayer" are also deprecated
+    // using the "api.platform.getTrafficService(null, 7)" Traffic Service version 7
+    // does not offer equivalent functions like:
+    // return api.platform.getTrafficService(null, 7).createFlowLayer();
     return api.platform
         .getMapTileService({ type: 'base' })
         .createTileLayer('truckonlytile', 'normal.day', TILE_SIZE, FORMAT, {
         style: 'default',
-        lg: language,
         ppi: undefined,
     });
 };

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

@@ -1,28 +1,39 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FORMAT, TILE_SIZE } from '../../constants';
 import Layer from './Layer';
-const createWebGlTrafficLayer = (api, language) => {
-    // use new Here 3.1 API traffic layer for WebGL
-    // https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
-    // Create a traffic service and a corresponding provider.
-    const service = api.platform.getTrafficService();
-    const provider = new H.service.traffic.flow.Provider(service);
-    // Create a tile layer that can be added to the map
-    return new H.map.layer.TileLayer(provider);
-};
-const createRasterTrafficLayer = (api, language) => {
+const createRasterTrafficLayer = api => {
     return api.platform
         .getMapTileService({ type: 'traffic' })
         .createTileLayer('flowtile', 'normal.day.grey', TILE_SIZE, FORMAT, {
         style: 'alps',
-        lg: language,
     });
 };
+// Here Traffic v7 API
+const createVectorTrafficLayer = api => {
+    // Pre-defined opinionated rendering of traffic
+    return api.defaultLayers.vector.traffic.map;
+    // To control the rendering, use the style config.
+    // Unfortunately there is no documentation on how the "pre-defined"
+    // style looks like as it also renders incidents icons (but inactive)
+    //     const config = `
+    //   sources:
+    //     omv:
+    //       type: OMV
+    //   layers:
+    //     traffic_incidents:
+    //       data: {source: omv}
+    //       draw:
+    //         lines:
+    //           order: 340
+    //           width: 2px
+    //           color: red
+    // `;
+    //     return api.platform.getTrafficVectorTileService().createLayer(new H.map.render.webgl.Style(config));
+};
 const TrafficLayer = props => {
     const { useWebGL } = props, remainingProps = __rest(props, ["useWebGL"]);
-    const createLayerCallback = useWebGL ? createWebGlTrafficLayer : createRasterTrafficLayer;
-    return _jsx(Layer, Object.assign({}, remainingProps, { createLayer: createLayerCallback }));
+    return _jsx(Layer, Object.assign({}, remainingProps, { createLayer: useWebGL ? createVectorTrafficLayer : createRasterTrafficLayer }));
 };
 export default TrafficLayer;

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { mapToLongLocale } from '../../../../utils/localization';
 import { getPPI } from '../../../mapUtils';
 import { MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT } from '../../../constants';
 // Obtain the default map types from the platform object:
@@ -23,12 +22,21 @@ export const getDefaultBaseLayer = (defaultLayers, mapType, useWebGL) => {
 };
 export const useBaseLayer = props => {
     const { api, additionalParameters = {}, language, isWebGL = false, mapType } = props;
-    const [baseLayer, setBaseLayer] = useState();
+    const [baseLayer, setBaseLayer] = useState(null);
+    // When the language changes from the outside, re-create the base layer with the new locale
+    useEffect(() => {
+        setBaseLayer(null);
+    }, [language]);
     useEffect(() => {
         if (!baseLayer) {
-            const additionalParametersWithLocale = Object.assign(Object.assign({}, additionalParameters), { lg: mapToLongLocale(language), 
+            const additionalParametersWithLocale = Object.assign(Object.assign({}, additionalParameters), { 
+                // Define the overall map language here so that all counties use that locale
+                // and don't show their native label names. For more details see:
+                // https://developer.here.com/documentation/examples/maps-js/maps/map-multi-language-support
+                // Note: it takes the short locale like "de", "en" etc.
+                lg: language.includes('-') ? language.split('-')[0] : language, 
                 // ppi: getPPI(),
-                // need to be set for better performence of legacy map
+                // need to be set for better performance of legacy map
                 engineType: isWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D });
             const defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
             const newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);

package/components/map/components/features/layers/clustering/ClusterLayer.d.ts

@@ -1,29 +1,22 @@
+/// <reference types="heremaps" />
+import type { EventListenerMap } from '../../../../utils/eventHandling';
+export type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+export type ClusterTheme = H.clustering.ITheme;
+export type Position = {
+    lat: number;
+    lng: number;
+};
+export type DataConverter = (data: Position, index: number) => H.clustering.DataPoint;
+export type ClusterLayerProps = {
+    data: object[];
+    dataConverter?: DataConverter;
+    minWeight?: string | number;
+    minZoom?: string | number;
+    maxZoom?: string | number;
+    clusterTheme?: ClusterTheme | undefined;
+    eventListenerMap?: EventListenerMap;
+    clusterStrategy?: ClusterStrategy;
+    eps?: number;
+};
+declare const ClusterLayer: (props: ClusterLayerProps) => null;
 export default ClusterLayer;
-declare function ClusterLayer({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme, eventListenerMap, clusterStrategy, eps, }: {
-    data: any;
-    dataConverter: any;
-    minWeight: any;
-    minZoom: any;
-    maxZoom: any;
-    clusterTheme?: any;
-    eventListenerMap: any;
-    clusterStrategy: any;
-    eps?: number | undefined;
-}): null;
-declare namespace ClusterLayer {
-    namespace propTpyes {
-        const data: PropTypes.Validator<any[]>;
-        const dataConverter: PropTypes.Requireable<(...args: any[]) => any>;
-        const minWeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const minZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const maxZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const clusterTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,13 +1,11 @@
-/* eslint-disable no-undef */
-import { useContext, useState, useEffect, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import mapProps from '../../../../utils/proptypes';
-import { MapContext } from '../../../context';
+import { useState, useEffect, useLayoutEffect } from 'react';
+// import ReactDomServer from 'react-dom/server';
+import { useMapContext } from '../../../MapContext';
 import { useUpdateProp, useUpdateEventListenerMap } from '../../../../utils/hooks';
-const DEFAULT_DATA_CONVERTER = d => new H.clustering.DataPoint(d.lat, d.lng, 1, d);
-const convertData = (data, converterFunc) => data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
+const DEFAULT_DATA_CONVERTER = (pos, index) => new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);
+const convertData = (data, converterFunc = DEFAULT_DATA_CONVERTER) => data.map((value, index) => converterFunc(value, index));
 const DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
-const getClusterStrategy = strategy => {
+const getClusterStrategy = (strategy) => {
     switch (strategy) {
         case 'GRID':
             return H.clustering.Provider.Strategy.GRID;
@@ -17,28 +15,91 @@ const getClusterStrategy = strategy => {
             return H.clustering.Provider.Strategy.FASTGRID;
     }
 };
-const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, }) => {
-    const { api } = useContext(MapContext);
+// TODO: replace some cluster marker like for POIs with SVG MarkerIcons instead of rendering DomMarker
+// to increase rendering performance, especially, when rendering hundreds of marker like for charging stations
+// const noiseSvg =
+//     '<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px"><circle cx="5px" cy="5px" r="5px" fill="green" /></svg>';
+// Create an icon to represent the noise points
+// Note that same icon will be used for all noise points
+// const noiseIcon = new H.map.Icon(noiseSvg, {
+//     size: { w: 20, h: 20 },
+//     anchor: { x: 10, y: 10 },
+// });
+// SVG template to use for cluster icons
+// const clusterSvgTemplate = `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer">
+//     <circle cx="20" cy="20" r="19.5" fill="#B23672" stroke="#B23672"/>
+//     <g transform="translate(20,24.6)">
+//         <text fill="white" font-family="'Source Sans Pro', Helvetica, sans-serif" font-size="15" font-weight="500" text-anchor="middle">
+//             {text}
+//         </text>
+//     </g>
+// </svg>`;
+const ClusterLayer = (props) => {
+    const { data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, } = props;
+    const { api } = useMapContext();
     const [provider, setProvider] = useState();
     useEffect(() => {
-        const newProviderOptions = {
+        // const reactIcon = new H.map.DomIcon(
+        //     ReactDomServer.renderToStaticMarkup(
+        //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>
+        //     )
+        // );
+        var _a;
+        const clusterProviderOptions = {
             clusteringOptions: {
                 strategy: getClusterStrategy(clusterStrategy),
                 eps,
-                minWeight: minWeight ? parseInt(minWeight, 10) : 2,
+                minWeight: minWeight ? Number.parseInt(minWeight, 10) : 2,
             },
-            min: minZoom ? parseInt(minZoom, 10) : 0,
-            max: maxZoom ? parseInt(maxZoom, 10) : 22,
-            // Note: set cluster theme every time the provider changes but leave it out of the hook dependency
-            // to avoid recreation of the provider and it's items
+            min: minZoom ? Number.parseInt(minZoom, 10) : 0,
+            max: maxZoom ? Number.parseInt(maxZoom, 10) : 22,
             theme: clusterTheme,
+            // 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;
+            //     },
+            // },
         };
-        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), newProviderOptions);
+        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);
         const objectLayer = new H.map.layer.ObjectLayer(newProvider);
-        api.map.addLayer(objectLayer);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(objectLayer);
         setProvider(newProvider);
         return () => {
-            api.map.removeLayer(objectLayer);
+            var _a;
+            (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(objectLayer);
             objectLayer.dispose();
             newProvider.dispose();
         };
@@ -50,18 +111,7 @@ const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, cluste
         }
     }, [data, dataConverter]);
     useUpdateProp(provider, 'setTheme', clusterTheme);
-    useUpdateEventListenerMap(provider, eventListenerMap, api.map);
+    useUpdateEventListenerMap(provider, eventListenerMap);
     return null;
 };
-ClusterLayer.propTpyes = {
-    data: PropTypes.array.isRequired,
-    dataConverter: PropTypes.func,
-    minWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    clusterTheme: mapProps.clusterTheme,
-    eventListenerMap: PropTypes.object,
-    clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: PropTypes.number,
-};
 export default ClusterLayer;

package/components/map/components/features/layers/clustering/SimpleClusterLayer.d.ts

@@ -1,10 +1,6 @@
+import { type ClusterTheme, type ClusterLayerProps } from './ClusterLayer';
+export type SimpleClusterLayerProps = Omit<ClusterLayerProps, 'clusterTheme'> & {
+    simpleTheme?: ClusterTheme;
+};
+declare const SimpleClusterLayer: (props: SimpleClusterLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleClusterLayer;
-declare function SimpleClusterLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleClusterLayer {
-    namespace propTypes {
-        const simpleTheme: import("prop-types").Requireable<import("prop-types").InferProps<{
-            getNoisePresentation: import("prop-types").Validator<(...args: any[]) => any>;
-            getClusterPresentation: import("prop-types").Validator<(...args: any[]) => any>;
-        }>>;
-    }
-}

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

@@ -1,15 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import mapProps from '../../../../utils/proptypes';
+import 'react';
 import ClusterLayer from './ClusterLayer';
 import { wrapSimpleTheme } from '../../../../utils/clustering';
-const SimpleClusterLayer = props => {
+const SimpleClusterLayer = (props) => {
     const { simpleTheme } = props, rest = __rest(props, ["simpleTheme"]);
-    const newProps = Object.assign({ clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }, rest);
-    return _jsx(ClusterLayer, Object.assign({}, newProps));
-};
-SimpleClusterLayer.propTypes = {
-    simpleTheme: mapProps.clusterTheme,
+    return _jsx(ClusterLayer, Object.assign({}, rest, { clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }));
 };
 export default SimpleClusterLayer;

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.d.ts

@@ -0,0 +1,6 @@
+export declare const CLUSTER_ICON_WIDTH = 34;
+export declare const CLUSTER_ICON_HEIGHT = 38;
+export declare const MARKER_ICON_WIDTH = 26;
+export declare const MARKER_ICON_HEIGHT = 31;
+declare const IncidentsLayer: () => null;
+export default IncidentsLayer;