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

package/lib/es/components/map/components/Map.js

@@ -1,106 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NO_CREDENTIALS_ERROR_MESSAGE = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
-const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const react_1 = require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
-const cloneDeep_1 = tslib_1.__importDefault(require("lodash/fp/cloneDeep"));
-const proptypes_1 = tslib_1.__importDefault(require("../utils/proptypes"));
-const addEventListener_1 = tslib_1.__importDefault(require("../../../utils/addEventListener"));
-require("../herePolyfill");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
 const constants_1 = require("./constants");
-const ZoomButtons_1 = tslib_1.__importDefault(require("./features/settings/ZoomButtons"));
-const IncidentsLayer_1 = tslib_1.__importDefault(require("./features/layers/IncidentsLayer"));
-const TrafficLayer_1 = tslib_1.__importDefault(require("./features/layers/TrafficLayer"));
-const RoadRestrictionLayer_1 = tslib_1.__importDefault(require("./features/layers/RoadRestrictionLayer"));
-const DefaultVectorLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/DefaultVectorLayer"));
-const DefaultRasterLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/DefaultRasterLayer"));
-const FleetStyleLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/FleetStyleLayer"));
-const SatelliteLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/SatelliteLayer"));
-const TerrainLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/TerrainLayer"));
-const NightLayer_1 = tslib_1.__importDefault(require("./features/layers/baselayers/NightLayer"));
-const useBaseLayer_1 = require("./features/layers/baselayers/useBaseLayer");
 const eventHandling_1 = require("../utils/eventHandling");
-const context_1 = require("./context");
-const mapUtils_1 = require("./mapUtils");
+const MapContext_1 = require("./MapContext");
+const mapUtils_1 = require("../utils/mapUtils");
+const mapUi_1 = require("../utils/mapUi");
 const useDarkMode_1 = tslib_1.__importDefault(require("../../../hooks/useDarkMode"));
-exports.NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
-const RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
-// Note: "apikey" used by Here v3.1 whereas "app_id" and "app_code" are used by the 3.0 API
-// The Here API 3.1 works a little different and by default uses WebGL rendering
-// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
-const getPlatform = credentials => new H.service.Platform({
-    apikey: credentials.apikey || credentials.api_key,
-    app_id: credentials.app_id,
-    app_code: credentials.app_code,
-});
-const getHereUi = (hereMap, defaultLayers, showScaleBar) => {
-    const hereUi = H.ui.UI.createDefault(hereMap, defaultLayers);
-    if (hereUi) {
-        hereUi.getControl('scalebar').setVisibility(showScaleBar);
-        hereUi.getControl('scalebar').setAlignment('bottom-left');
-        hereUi.getControl('mapsettings').setVisibility(false);
-        hereUi.removeControl('zoom');
-    }
-    return hereUi;
-};
-const getBounds = boundingBox => {
-    const { top, left, bottom, right } = boundingBox;
-    return new H.geo.Rect(top, left, bottom, right);
-};
-const getLayer = (api, layer, language, enableWebGL) => {
-    switch (layer) {
-        case constants_1.MAP_LAYER_TRAFFIC:
-            return (0, jsx_runtime_1.jsx)(TrafficLayer_1.default, { api: api, language: language, useWebGL: enableWebGL }, layer);
-        case constants_1.MAP_LAYER_INCIDENTS:
-            return (0, jsx_runtime_1.jsx)(IncidentsLayer_1.default, { api: api, language: language }, layer);
-        case constants_1.MAP_LAYER_ROAD_RESTRICTIONS:
-            return (0, jsx_runtime_1.jsx)(RoadRestrictionLayer_1.default, { api: api, language: language, useWebGL: enableWebGL }, layer);
-        default:
-            null;
-    }
-};
-const getBaseLayer = (api, baseLayer, language, enableWebGL, darkMode) => {
-    switch (baseLayer) {
-        case constants_1.MAP_TYPE_DEFAULT: {
-            return !darkMode && enableWebGL ? ((0, jsx_runtime_1.jsx)(DefaultVectorLayer_1.default, { api: api, language: language }, baseLayer)) : ((0, jsx_runtime_1.jsx)(DefaultRasterLayer_1.default, { api: api, language: language, darkMode: darkMode }, baseLayer));
-        }
-        case constants_1.MAP_TYPE_FLEET_STYLE:
-            return (0, jsx_runtime_1.jsx)(FleetStyleLayer_1.default, { api: api, language: language }, baseLayer);
-        case constants_1.MAP_TYPE_SATELLITE:
-            return (0, jsx_runtime_1.jsx)(SatelliteLayer_1.default, { api: api, language: language }, baseLayer);
-        case constants_1.MAP_TYPE_TERRAIN:
-            return (0, jsx_runtime_1.jsx)(TerrainLayer_1.default, { api: api, language: language }, baseLayer);
-        case constants_1.MAP_TYPE_NIGHT:
-            return (0, jsx_runtime_1.jsx)(NightLayer_1.default, { api: api, language: language }, baseLayer);
-        default:
-            null;
-    }
-};
-const enrichChildrenWithApi = (children, api) => react_1.default.Children.map(children, child => {
-    if (child) {
-        return react_1.default.cloneElement(child, {
-            api,
-        });
-    }
-});
-const getStyle = (height, width) => {
-    const style = {};
-    if (height) {
-        style.height = height;
-    }
-    if (width) {
-        style.width = width;
-    }
-    return style;
-};
-const Map = props => {
-    const { children, credentials, width, height, language, center, zoom, zoomAnimation, boundingBox, hideClusterSettings, hideMapLayerSettings, disableMapEvents, disableBehavior, eventListenerMap, mapType, mapLayer, showCluster: externalShowCluster, showScaleBar, onMapLayerChange, onMapTypeChange, onShowClusterChange, onZoomIn, onZoomOut, mapSettingsTooltip, mapSettings, enableWebGL, enableDevicePixelRatio, darkMode, } = props;
+const MapZoom_1 = tslib_1.__importDefault(require("./features/MapZoom"));
+const MapOverlayLayers_1 = tslib_1.__importDefault(require("./features/layers/MapOverlayLayers"));
+const MapSize_1 = tslib_1.__importDefault(require("./MapSize"));
+const MapPosition_1 = tslib_1.__importDefault(require("./MapPosition"));
+const MapElements_1 = tslib_1.__importDefault(require("./MapElements"));
+const rendering_1 = require("../utils/rendering");
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+const Map = (props) => {
+    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, eventListenerMap, mapType = constants_1.MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, } = props;
     const mapRef = (0, react_1.useRef)(null);
     const [isMapInitialized, setMapInitialized] = (0, react_1.useState)(false);
     const [api, setApi] = (0, react_1.useState)();
@@ -108,29 +27,66 @@ const Map = props => {
     const [activeLayers, setActiveLayers] = (0, react_1.useState)(mapLayer);
     const [showCluster, setShowCluster] = (0, react_1.useState)(externalShowCluster);
     const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    // Only short locale is supported by HERE Map
+    const language = lang.split('-')[0];
     (0, react_1.useEffect)(() => {
-        console.debug('initialize here map');
-        const bounds = boundingBox && getBounds(boundingBox);
-        const platform = getPlatform(credentials);
-        const defaultLayers = platform.createDefaultLayers();
-        const defaultLayer = (0, useBaseLayer_1.getDefaultBaseLayer)(defaultLayers, baseLayer, enableWebGL);
-        // Instantiate (and display) a map object:
-        const mapConfig = {
+        let allMapObjects = [];
+        if (api === null || api === void 0 ? void 0 : api.map) {
+            allMapObjects = api.map.getObjects();
+            console.debug('re-initialize here map');
+        }
+        else {
+            console.debug('initialize here map');
+        }
+        const bounds = boundingBox && (0, mapUtils_1.getMapBounds)(boundingBox);
+        // Initialize communication with the platform
+        const platform = (0, rendering_1.getPlatform)(credentials);
+        // Specify engine type. In this example, we use HARP rendering engine, which is capable
+        // of rendering vector data using the style configuration exported from the HERE Style Editor.
+        // HARP engine is not the default engine, and it's not included in the mapsjs-core.js module.
+        // To use this engine, you need to include mapsjs-harp.js file to your HTML page
+        const engineType = (0, rendering_1.getEngineType)(baseLayer, enableWebGL);
+        // Obtain the default map types from the platform object
+        // @ts-ignore-next-line: according to the Here docs, the engine type exists
+        // see https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html
+        const defaultLayers = platform.createDefaultLayers({ engineType, lg: language, pois: true });
+        const defaultLayerMap = (0, rendering_1.getBaseLayer)({
+            baseLayerName: baseLayer,
+            defaultLayers,
+            enableWebGL,
+            platform,
+            engineType,
+            vehicleRestrictions: activeLayers.includes(constants_1.MAP_LAYER_ROAD_RESTRICTIONS),
+            language,
+        });
+        // Initialize the map
+        const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
             zoom,
             center,
             bounds,
+            engineType,
             pixelRatio: devicePixelRatio,
-            // need to be set for better performence of legacy map
-            engineType: enableWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D,
-        };
-        const hereMap = new H.Map(mapRef.current, defaultLayer, mapConfig);
-        // Add a resize listener to make sure that the map occupies the whole container
-        const resizeListener = (0, addEventListener_1.default)(window, 'resize', (0, throttle_1.default)(RESIZE_THROTTLE, () => hereMap.getViewPort().resize()));
-        const orientationChangeListener = (0, addEventListener_1.default)(window, 'orientationchange', (0, throttle_1.default)(RESIZE_THROTTLE, () => hereMap.getViewPort().resize()));
+            fixedCenter: true,
+        });
+        // Render street labels and road signs as well as additional pois as vector data
+        if (defaultLayerMap.overlayLayer) {
+            hereMap.addLayer(defaultLayerMap.overlayLayer);
+        }
         setMapInitialized(true);
-        const hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
-        const hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
+        let hereMapEvents = false;
+        let hereBehavior;
+        // Enable the map event system
+        if (!disableMapEvents) {
+            hereMapEvents = new H.mapevents.MapEvents(hereMap);
+        }
+        // Enable map interaction (pan, zoom, pinch-to-zoom)
+        if (!(disableMapEvents || disableBehavior)) {
+            hereBehavior = new H.mapevents.Behavior(hereMapEvents);
+            // @ts-ignore-next-line
+            hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+        }
         (0, eventHandling_1.addEventListenerMap)(hereMap, eventListenerMap, hereMap);
+        const hereUi = (0, mapUi_1.getHereUi)(hereMap, defaultLayers, showScaleBar, language);
         // The api will be passed to services when using a render function.
         // This allows the service to access the map internals
         setApi({
@@ -140,31 +96,32 @@ const Map = props => {
             mapEvents: hereMapEvents,
             behavior: hereBehavior,
             platform,
-            ui: getHereUi(hereMap, defaultLayers, showScaleBar),
+            ui: hereUi,
             utils: (0, mapUtils_1.createUtils)(hereMap),
+            // Put settings back into the map API object so the invoking service
+            // can check on these settings for instance inside a test
             settings: {
                 enableWebGL,
-                baseLayer: baseLayer,
-                mapLayer: activeLayers,
-                showCluster: showCluster,
+                baseLayer,
+                activeLayers,
+                showCluster,
             },
         });
+        // If the base layer changed, re-add all previous objects again,
+        // otherwise the map would be empty
+        if (allMapObjects) {
+            hereMap.addObjects(allMapObjects);
+        }
         return () => {
             if (hereMap) {
                 (0, eventHandling_1.removeEventListenerMap)(hereMap);
                 if (hereMapEvents) {
                     hereMapEvents.dispose();
                 }
-                if (resizeListener) {
-                    resizeListener.remove();
-                }
-                if (orientationChangeListener) {
-                    orientationChangeListener.remove();
-                }
                 hereMap.dispose();
             }
         };
-    }, [enableWebGL, enableDevicePixelRatio]);
+    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer]);
     const isDarkMode = (0, useDarkMode_1.default)();
     (0, react_1.useEffect)(() => {
         // Toggle night map only if current map type is default
@@ -175,85 +132,68 @@ const Map = props => {
         else if (!isDarkMode && baseLayer === constants_1.MAP_TYPE_NIGHT) {
             handleMapTypeChange(constants_1.MAP_TYPE_DEFAULT);
         }
-    }, [isDarkMode]);
-    // Update BoundingBox from outside
-    (0, react_1.useEffect)(() => {
-        if (api && boundingBox) {
-            const { top, left, bottom, right } = boundingBox;
-            api.map.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);
-        }
-    }, [boundingBox]);
-    // Update Zoom from outside if value is different
-    (0, react_1.useEffect)(() => {
-        if (!api) {
-            return;
-        }
-        const currentMapZoom = api.utils.getZoom();
-        if (zoom && currentMapZoom !== zoom) {
-            api.utils.setZoom(zoom, zoomAnimation);
-        }
-    }, [zoom]);
-    // Update Lat & Lng from outside if value is different
-    (0, react_1.useEffect)(() => {
-        if (!(api && center)) {
-            return;
-        }
-        const currentMapCenter = api.utils.getCenter();
-        if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
-            api.utils.setCenter(center, zoomAnimation);
-        }
-    }, [center]);
+    }, [isDarkMode, language]);
     // Update MapType from outside
     (0, react_1.useEffect)(() => handleMapTypeChange(mapType), [mapType]);
     // Update MapLayer from outside
-    (0, react_1.useEffect)(() => setActiveLayers(mapLayer), [mapLayer]);
+    const [previousMapLayer, setPreviousMapLayer] = (0, react_1.useState)(mapLayer);
+    if (!(0, isEqual_1.default)(mapLayer, previousMapLayer)) {
+        setActiveLayers(mapLayer);
+        setPreviousMapLayer(mapLayer);
+    }
     // Update Cluster setting from outside
     (0, react_1.useEffect)(() => setShowCluster(externalShowCluster), [externalShowCluster]);
-    const handleMapTypeChange = newMapType => {
+    const handleMapTypeChange = (newMapType) => {
         setBaseLayer(newMapType);
         onMapTypeChange(newMapType, mapType);
-        if (api) {
-            setApi(Object.assign(Object.assign({}, api), { settings: Object.assign(Object.assign({}, api.settings), { baseLayer: newMapType }) }));
-        }
     };
-    const handleMapLayerChange = layer => {
-        const removeLayer = layerToRemove => activeLayers.filter(item => item !== layerToRemove);
+    const handleMapLayerChange = (layer) => {
+        const removeLayer = (layerToRemove) => activeLayers.filter(item => item !== layerToRemove);
         const newActiveLayers = activeLayers.includes(layer) ? removeLayer(layer) : [...activeLayers, layer];
         setActiveLayers(newActiveLayers);
         onMapLayerChange(newActiveLayers, activeLayers);
-        setApi(Object.assign(Object.assign({}, api), { settings: Object.assign(Object.assign({}, api.settings), { mapLayer: newActiveLayers }) }));
     };
-    const handleShowClusterChange = newShowCluster => {
+    const handleShowClusterChange = (newShowCluster) => {
         setShowCluster(newShowCluster);
-        onShowClusterChange(newShowCluster, showCluster);
-        setApi(Object.assign(Object.assign({}, api), { settings: Object.assign(Object.assign({}, api.settings), { showCluster: newShowCluster }) }));
+        onShowClusterChange(newShowCluster);
     };
-    const handleZoomIn = () => {
-        const z = api.utils.getZoom();
-        const newZoom = z + 1;
-        onZoomIn(newZoom, z);
-        api.utils.setZoom(newZoom, zoomAnimation);
+    // Note: For performance reasons, we deactivate pointer events and hence CSS style recalculation for the
+    // the body. Having for instance many assets in the tree causes a performance loss when clicking on the map
+    // to move it and zoom in/out since the map triggers a style invalidation and recalculation and
+    // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors
+    // takes time.
+    const handleMapInteractionStart = () => {
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.add('pointer-events-none');
     };
-    const handleZoomOut = () => {
-        const z = api.utils.getZoom();
-        const newZoom = z - 1;
-        onZoomOut(newZoom, z);
-        api.utils.setZoom(newZoom, zoomAnimation);
+    const handleMapInteractionEnd = () => {
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.remove('pointer-events-none');
     };
-    const style = getStyle(height, width);
+    const style = {};
+    if (height) {
+        style.height = height;
+    }
+    if (width) {
+        style.width = width;
+    }
     const autoHeightClass = (0, isEmpty_1.default)(style) ? 'height-100pct' : '';
-    const hideZoomButtons = disableBehavior;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`, style: style, ref: mapRef }, { children: isMapInitialized && ((0, jsx_runtime_1.jsxs)(context_1.MapContext.Provider, Object.assign({ value: { api } }, { children: [!hideZoomButtons && (0, jsx_runtime_1.jsx)(ZoomButtons_1.default, { onZoomIn: handleZoomIn, onZoomOut: handleZoomOut }), mapSettings && ((0, jsx_runtime_1.jsx)(context_1.MapSettingsContext.Provider, Object.assign({ value: {
-                        mapType: baseLayer,
-                        activeBuiltinLayers: activeLayers,
-                        showCluster: showCluster,
-                        hideMapLayerSettings: hideMapLayerSettings,
-                        hideClusterSettings: hideClusterSettings,
-                        onMapTypeChange: handleMapTypeChange,
-                        onMapLayerChange: handleMapLayerChange,
-                        onShowClusterChange: handleShowClusterChange,
-                        mapSettingsTooltip: mapSettingsTooltip,
-                    } }, { children: mapSettings }))), getBaseLayer(api, baseLayer, language, enableWebGL, darkMode), (0, map_1.default)(layer => getLayer(api, layer, language, enableWebGL), activeLayers), children && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapElements' }, { children: (0, isFunction_1.default)(children) ? children(api) : enrichChildrenWithApi(children, api) })))] }))) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`, style: style, ref: mapRef, onTouchStart: handleMapInteractionStart, onTouchEnd: handleMapInteractionEnd, onMouseEnter: handleMapInteractionStart, onMouseOut: handleMapInteractionEnd, onBlur: handleMapInteractionEnd }, { children: isMapInitialized && api && ((0, jsx_runtime_1.jsxs)(MapContext_1.MapContext.Provider, Object.assign({ value: {
+                api,
+                language,
+                enableWebGL,
+                showCluster,
+                activeLayers,
+                baseLayer,
+                hideMapLayerSettings,
+                hideClusterSettings,
+                onMapTypeChange: handleMapTypeChange,
+                onMapLayerChange: handleMapLayerChange,
+                onShowClusterChange: handleShowClusterChange,
+                mapSettingsTooltip,
+                onIncidentsChange,
+                devicePixelRatio,
+            } }, { children: [(0, jsx_runtime_1.jsx)(MapPosition_1.default, { api: api, boundingBox: boundingBox, center: center, zoomAnimation: zoomAnimation }), (0, jsx_runtime_1.jsx)(MapSize_1.default, { api: api }), (0, jsx_runtime_1.jsx)(MapZoom_1.default, { zoom: zoom, hideZoomButtons: disableBehavior, onZoomIn: onZoomIn, onZoomOut: onZoomOut, zoomAnimation: zoomAnimation }), mapSettings && mapSettings, (0, jsx_runtime_1.jsx)(MapOverlayLayers_1.default, { layers: activeLayers }), (0, jsx_runtime_1.jsx)(MapElements_1.default, Object.assign({ api: api }, { children: children }))] }))) })));
 };
 Map.TYPE_DEFAULT = constants_1.MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = constants_1.MAP_TYPE_FLEET_STYLE;
@@ -263,64 +203,4 @@ Map.TYPE_NIGHT = constants_1.MAP_TYPE_NIGHT;
 Map.LAYER_INCIDENTS = constants_1.MAP_LAYER_INCIDENTS;
 Map.LAYER_TRAFFIC = constants_1.MAP_LAYER_TRAFFIC;
 Map.LAYER_ROAD_RESTRICTIONS = constants_1.MAP_LAYER_ROAD_RESTRICTIONS;
-Map.defaultProps = {
-    language: 'en',
-    zoomAnimation: false,
-    hideMapSettings: false,
-    hideClusterSettings: false,
-    hideMapLayerSettings: false,
-    mapType: constants_1.MAP_TYPE_DEFAULT,
-    mapLayer: [],
-    showCluster: true,
-    showScaleBar: false,
-    onMapTypeChange: () => { },
-    onMapLayerChange: () => { },
-    onShowClusterChange: () => { },
-    onZoomIn: () => { },
-    onZoomOut: () => { },
-    enableWebGL: true,
-    enableDevicePixelRatio: true,
-    darkMode: false,
-};
-Map.propTypes = {
-    credentials: prop_types_1.default.shape({
-        ['app_id']: prop_types_1.default.string,
-        ['app_code']: prop_types_1.default.string,
-        ['api_key']: prop_types_1.default.string,
-        apikey: prop_types_1.default.string,
-    }).isRequired,
-    height: prop_types_1.default.number,
-    width: prop_types_1.default.number,
-    language: prop_types_1.default.string,
-    zoom: prop_types_1.default.number,
-    center: proptypes_1.default.position,
-    boundingBox: proptypes_1.default.rect,
-    disableMapEvents: prop_types_1.default.bool,
-    disableBehavior: prop_types_1.default.bool,
-    eventListenerMap: prop_types_1.default.object,
-    hideMapSettings: prop_types_1.default.bool,
-    hideClusterSettings: prop_types_1.default.bool,
-    hideMapLayerSettings: prop_types_1.default.bool,
-    mapType: prop_types_1.default.oneOf([
-        Map.TYPE_DEFAULT,
-        Map.TYPE_FLEET_STYLE,
-        Map.TYPE_SATELLITE,
-        Map.TYPE_TERRAIN,
-        Map.TYPE_NIGHT,
-    ]),
-    mapLayer: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    showCluster: prop_types_1.default.bool,
-    showScaleBar: prop_types_1.default.bool,
-    onMapTypeChange: prop_types_1.default.func,
-    onMapLayerChange: prop_types_1.default.func,
-    onShowClusterChange: prop_types_1.default.func,
-    onZoomIn: prop_types_1.default.func,
-    onZoomOut: prop_types_1.default.func,
-    getApi: prop_types_1.default.func,
-    mapSettingsTooltip: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    mapSettings: prop_types_1.default.node,
-    enableWebGL: prop_types_1.default.bool,
-    enableDevicePixelRatio: prop_types_1.default.bool,
-    darkMode: prop_types_1.default.bool,
-};
 exports.default = Map;

package/lib/es/components/map/components/MapContext.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { MapApi, MapIncidents, MapLayer, MapType } from '../utils/mapTypes';
+export type MapContextType = {
+    api: MapApi;
+    language: string;
+    enableWebGL: boolean;
+    baseLayer: MapType;
+    activeLayers: MapLayer[];
+    showCluster: boolean;
+    devicePixelRatio: number;
+    onMapTypeChange?: (type: MapType) => void;
+    onMapLayerChange?: (layer: MapLayer) => void;
+    onShowClusterChange?: (showCluster: boolean) => void;
+    mapSettingsTooltip?: string | React.ReactNode;
+    hideMapLayerSettings?: boolean;
+    hideClusterSettings?: boolean;
+    onIncidentsChange: (incidentsResult: MapIncidents) => void;
+};
+export declare const defaultMapContext: MapContextType;
+export declare const MapContext: import("react").Context<MapContextType>;
+export declare const useMapContext: () => MapContextType;

package/lib/es/components/map/components/MapContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMapContext = exports.MapContext = exports.defaultMapContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+exports.defaultMapContext = {
+    api: {},
+    language: 'en',
+    enableWebGL: true,
+    baseLayer: constants_1.MAP_TYPE_DEFAULT,
+    activeLayers: [],
+    showCluster: true,
+    devicePixelRatio: 1,
+    onIncidentsChange: () => { },
+};
+exports.MapContext = (0, react_1.createContext)(exports.defaultMapContext);
+const useMapContext = () => (0, react_1.useContext)(exports.MapContext);
+exports.useMapContext = useMapContext;

package/lib/es/components/map/components/MapElements.d.ts

@@ -0,0 +1,6 @@
+import type { MapApi, MapProps } from '../utils/mapTypes';
+export type MapElementsProps = Pick<MapProps, 'children'> & {
+    api?: MapApi;
+};
+declare const MapElements: (props: MapElementsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapElements;

package/lib/es/components/map/components/MapElements.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const MapContext_1 = require("./MapContext");
+const enrichChildrenWithApi = (children, api) => react_1.default.Children.map(children, child => {
+    if (child) {
+        return react_1.default.cloneElement(child, {
+            api,
+        });
+    }
+});
+const MapElements = (props) => {
+    const { children } = props;
+    const { api } = (0, MapContext_1.useMapContext)();
+    if (!children) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapElements' }, { children: (0, isFunction_1.default)(children) ? children(api) : enrichChildrenWithApi(children, api) })));
+};
+exports.default = MapElements;

package/lib/es/components/map/components/MapPosition.d.ts

@@ -0,0 +1,6 @@
+import type { MapApi, MapProps } from '../utils/mapTypes';
+export type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoomAnimation'> & {
+    api: MapApi;
+};
+declare const MapPosition: (props: MapPositionProps) => null;
+export default MapPosition;

package/lib/es/components/map/components/MapPosition.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const MapPosition = (props) => {
+    const { api, boundingBox, center, zoomAnimation = false } = props;
+    // Update BoundingBox from outside
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (api && boundingBox) {
+            const { top, left, bottom, right } = boundingBox;
+            (_a = api.map) === null || _a === void 0 ? void 0 : _a.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);
+        }
+    }, [boundingBox]);
+    // Update Lat & Lng from outside if value is different
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!(api && center)) {
+            return;
+        }
+        const currentMapCenter = (_a = api.utils) === null || _a === void 0 ? void 0 : _a.getCenter();
+        if (currentMapCenter) {
+            if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
+                (_b = api.utils) === null || _b === void 0 ? void 0 : _b.setCenter(center, zoomAnimation);
+            }
+        }
+    }, [center]);
+    return null;
+};
+exports.default = MapPosition;

package/lib/es/components/map/components/MapSize.d.ts

@@ -0,0 +1,5 @@
+import type { MapApi } from '../utils/mapTypes';
+declare const MapSize: ({ api }: {
+    api: MapApi;
+}) => null;
+export default MapSize;

package/lib/es/components/map/components/MapSize.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
+const useEvent_1 = tslib_1.__importDefault(require("../../../useEvent"));
+const RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
+const MapSize = ({ api }) => {
+    (0, react_1.useEffect)(() => {
+        const resizeMap = () => { var _a; return (_a = api === null || api === void 0 ? void 0 : api.map) === null || _a === void 0 ? void 0 : _a.getViewPort().resize(); };
+        window.addEventListener('resize', resizeMap, { passive: true });
+        return () => {
+            window.removeEventListener('resize', resizeMap);
+        };
+    }, [api === null || api === void 0 ? void 0 : api.map]);
+    // Add a orientationchange listener to make sure that the map occupies the whole container on mobile
+    (0, useEvent_1.default)('orientationchange', (0, throttle_1.default)(RESIZE_THROTTLE, () => { var _a; return (_a = api === null || api === void 0 ? void 0 : api.map) === null || _a === void 0 ? void 0 : _a.getViewPort().resize(); }), { passive: true }, window);
+    return null;
+};
+exports.default = MapSize;

package/lib/es/components/map/components/constants.d.ts

@@ -1,12 +1,18 @@
-export const MAP_TYPE_DEFAULT: "DEFAULT";
-export const MAP_TYPE_FLEET_STYLE: "FLEET_STYLE";
-export const MAP_TYPE_SATELLITE: "SATELLITE";
-export const MAP_TYPE_TERRAIN: "TERRAIN";
-export const MAP_TYPE_NIGHT: "NIGHT";
-export const MAP_LAYER_INCIDENTS: "INCIDENTS";
-export const MAP_LAYER_TRAFFIC: "TRAFFIC";
-export const MAP_LAYER_ROAD_RESTRICTIONS: "ROAD_RESTRICTIONS";
-export const FORMAT: "png8";
-export const TILE_SIZE: 256;
-export const TILE_TYPE: "maptile";
-export const HIGH_RES_PPI: 320;
+/// <reference types="heremaps" />
+import type { MapType } from '../utils/mapTypes';
+export declare const MAP_TYPE_DEFAULT: MapType;
+export declare const MAP_TYPE_FLEET_STYLE: MapType;
+export declare const MAP_TYPE_SATELLITE: MapType;
+export declare const MAP_TYPE_TERRAIN: MapType;
+export declare const MAP_TYPE_NIGHT: MapType;
+export declare const MAP_LAYER_INCIDENTS = "INCIDENTS";
+export declare const MAP_LAYER_TRAFFIC = "TRAFFIC";
+export declare const MAP_LAYER_ROAD_RESTRICTIONS = "ROAD_RESTRICTIONS";
+export declare const FORMAT = "png8";
+export declare const TILE_SIZE = 256;
+export declare const TILE_TYPE = "maptile";
+export declare const NO_CREDENTIALS_ERROR_MESSAGE = "Cannot instantiate the Map. Missing credentials property.";
+export declare const ENGINE_TYPE_HARP: any;
+export declare const ENGINE_TYPE_P2D: H.Map.EngineType;
+export declare const DEFAULT_TILE_SIZE = 512;
+export declare const DEFAULT_RASTER_LAYER_FORMAT = "png";

package/lib/es/components/map/components/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HIGH_RES_PPI = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
+exports.DEFAULT_RASTER_LAYER_FORMAT = exports.DEFAULT_TILE_SIZE = exports.ENGINE_TYPE_P2D = exports.ENGINE_TYPE_HARP = exports.NO_CREDENTIALS_ERROR_MESSAGE = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
 exports.MAP_TYPE_DEFAULT = 'DEFAULT';
 exports.MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
 exports.MAP_TYPE_SATELLITE = 'SATELLITE';
@@ -9,7 +9,13 @@ exports.MAP_TYPE_NIGHT = 'NIGHT';
 exports.MAP_LAYER_INCIDENTS = 'INCIDENTS';
 exports.MAP_LAYER_TRAFFIC = 'TRAFFIC';
 exports.MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
+// outdated?
 exports.FORMAT = 'png8';
 exports.TILE_SIZE = 256;
 exports.TILE_TYPE = 'maptile';
-exports.HIGH_RES_PPI = 320;
+exports.NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
+// @ts-ignore-next-line
+exports.ENGINE_TYPE_HARP = H.Map.EngineType['HARP'];
+exports.ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
+exports.DEFAULT_TILE_SIZE = 512;
+exports.DEFAULT_RASTER_LAYER_FORMAT = 'png'; // 'jpeg';