@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

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

@@ -1,326 +1,347 @@
-"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 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 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 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 mapRef = (0, react_1.useRef)(null);
-    const [isMapInitialized, setMapInitialized] = (0, react_1.useState)(false);
-    const [api, setApi] = (0, react_1.useState)();
-    const [baseLayer, setBaseLayer] = (0, react_1.useState)(mapType);
-    const [activeLayers, setActiveLayers] = (0, react_1.useState)(mapLayer);
-    const [showCluster, setShowCluster] = (0, react_1.useState)(externalShowCluster);
-    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
-    (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 = {
-            zoom,
-            center,
-            bounds,
-            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()));
-        setMapInitialized(true);
-        const hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
-        const hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
-        (0, eventHandling_1.addEventListenerMap)(hereMap, eventListenerMap, hereMap);
-        // The api will be passed to services when using a render function.
-        // This allows the service to access the map internals
-        setApi({
-            credentials,
-            defaultLayers,
-            map: hereMap,
-            mapEvents: hereMapEvents,
-            behavior: hereBehavior,
-            platform,
-            ui: getHereUi(hereMap, defaultLayers, showScaleBar),
-            utils: (0, mapUtils_1.createUtils)(hereMap),
-            settings: {
-                enableWebGL,
-                baseLayer: baseLayer,
-                mapLayer: activeLayers,
-                showCluster: showCluster,
-            },
-        });
-        return () => {
-            if (hereMap) {
-                (0, eventHandling_1.removeEventListenerMap)(hereMap);
-                if (hereMapEvents) {
-                    hereMapEvents.dispose();
-                }
-                if (resizeListener) {
-                    resizeListener.remove();
-                }
-                if (orientationChangeListener) {
-                    orientationChangeListener.remove();
-                }
-                hereMap.dispose();
-            }
-        };
-    }, [enableWebGL, enableDevicePixelRatio]);
-    const isDarkMode = (0, useDarkMode_1.default)();
-    (0, react_1.useEffect)(() => {
-        // Toggle night map only if current map type is default
-        if (isDarkMode && baseLayer === constants_1.MAP_TYPE_DEFAULT) {
-            handleMapTypeChange(constants_1.MAP_TYPE_NIGHT);
-        }
-        // Toggle back to default map only if current map type is night
-        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]);
-    // Update MapType from outside
-    (0, react_1.useEffect)(() => handleMapTypeChange(mapType), [mapType]);
-    // Update MapLayer from outside
-    (0, react_1.useEffect)(() => setActiveLayers(mapLayer), [mapLayer]);
-    // Update Cluster setting from outside
-    (0, react_1.useEffect)(() => setShowCluster(externalShowCluster), [externalShowCluster]);
-    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 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 => {
-        setShowCluster(newShowCluster);
-        onShowClusterChange(newShowCluster, showCluster);
-        setApi(Object.assign(Object.assign({}, api), { settings: Object.assign(Object.assign({}, api.settings), { showCluster: newShowCluster }) }));
-    };
-    const handleZoomIn = () => {
-        const z = api.utils.getZoom();
-        const newZoom = z + 1;
-        onZoomIn(newZoom, z);
-        api.utils.setZoom(newZoom, zoomAnimation);
-    };
-    const handleZoomOut = () => {
-        const z = api.utils.getZoom();
-        const newZoom = z - 1;
-        onZoomOut(newZoom, z);
-        api.utils.setZoom(newZoom, zoomAnimation);
-    };
-    const style = getStyle(height, 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) })))] }))) })));
-};
-Map.TYPE_DEFAULT = constants_1.MAP_TYPE_DEFAULT;
-Map.TYPE_FLEET_STYLE = constants_1.MAP_TYPE_FLEET_STYLE;
-Map.TYPE_SATELLITE = constants_1.MAP_TYPE_SATELLITE;
-Map.TYPE_TERRAIN = constants_1.MAP_TYPE_TERRAIN;
-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;
+"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 isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
+const proptypes_1 = tslib_1.__importDefault(require("../utils/proptypes"));
+const addEventListener_1 = tslib_1.__importDefault(require("../../../utils/addEventListener"));
+require("../herePolyfill");
+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 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,
+    useHTTPS: location.protocol === 'https:' ? true : false,
+});
+const getSupportedUiLocale = language => {
+    const supportedLocales = [
+        'en-US',
+        'de-DE',
+        'es-ES',
+        'fi-FI',
+        'fr-FR',
+        'it-IT',
+        'nl-NL',
+        'pl-PL',
+        'pt-BR',
+        'pt-PT',
+        'ru-RU',
+        'tr-TR',
+        'zh-CN',
+    ];
+    return language ? supportedLocales.find(locale => locale.startsWith(language)) : undefined;
+};
+const getHereUi = (hereMap, defaultLayers, showScaleBar, language) => {
+    const hereUi = H.ui.UI.createDefault(hereMap, defaultLayers, getSupportedUiLocale(language));
+    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 mapRef = (0, react_1.useRef)(null);
+    const [isMapInitialized, setMapInitialized] = (0, react_1.useState)(false);
+    const [api, setApi] = (0, react_1.useState)();
+    const [baseLayer, setBaseLayer] = (0, react_1.useState)(mapType);
+    const [activeLayers, setActiveLayers] = (0, react_1.useState)(mapLayer);
+    const [showCluster, setShowCluster] = (0, react_1.useState)(externalShowCluster);
+    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    (0, react_1.useEffect)(() => {
+        console.debug('initialize here map');
+        const bounds = boundingBox && getBounds(boundingBox);
+        const platform = getPlatform(credentials);
+        // const defaultLayers = platform.createDefaultLayers({
+        //     engineType: enableWebGL ? H.Map.EngineType['HARP'] : H.map.render.RenderEngine.EngineType.P2D,
+        // });
+        const defaultLayers = platform.createDefaultLayers();
+        const defaultLayer = (0, useBaseLayer_1.getDefaultBaseLayer)(defaultLayers, baseLayer, enableWebGL);
+        // Instantiate (and display) a map object:
+        const mapConfig = {
+            zoom,
+            center,
+            bounds,
+            pixelRatio: devicePixelRatio,
+            // need to be set for better performance 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()));
+        setMapInitialized(true);
+        const hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
+        const hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
+        (0, eventHandling_1.addEventListenerMap)(hereMap, eventListenerMap, hereMap);
+        // The api will be passed to services when using a render function.
+        // This allows the service to access the map internals
+        setApi({
+            credentials,
+            defaultLayers,
+            map: hereMap,
+            mapEvents: hereMapEvents,
+            behavior: hereBehavior,
+            platform,
+            ui: getHereUi(hereMap, defaultLayers, showScaleBar, language),
+            utils: (0, mapUtils_1.createUtils)(hereMap),
+            settings: {
+                enableWebGL,
+                baseLayer,
+                mapLayer: activeLayers,
+                showCluster,
+            },
+        });
+        return () => {
+            if (hereMap) {
+                (0, eventHandling_1.removeEventListenerMap)(hereMap);
+                if (hereMapEvents) {
+                    hereMapEvents.dispose();
+                }
+                if (resizeListener) {
+                    resizeListener.remove();
+                }
+                if (orientationChangeListener) {
+                    orientationChangeListener.remove();
+                }
+                hereMap.dispose();
+            }
+        };
+    }, [enableWebGL, enableDevicePixelRatio, language]);
+    const isDarkMode = (0, useDarkMode_1.default)();
+    (0, react_1.useEffect)(() => {
+        // Toggle night map only if current map type is default
+        if (isDarkMode && baseLayer === constants_1.MAP_TYPE_DEFAULT) {
+            handleMapTypeChange(constants_1.MAP_TYPE_NIGHT);
+        }
+        // Toggle back to default map only if current map type is night
+        else if (!isDarkMode && baseLayer === constants_1.MAP_TYPE_NIGHT) {
+            handleMapTypeChange(constants_1.MAP_TYPE_DEFAULT);
+        }
+    }, [isDarkMode, language]);
+    // 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]);
+    // Update MapType from outside
+    (0, react_1.useEffect)(() => handleMapTypeChange(mapType), [mapType]);
+    // Update MapLayer from outside
+    (0, react_1.useEffect)(() => setActiveLayers(mapLayer), [mapLayer]);
+    // Update Cluster setting from outside
+    (0, react_1.useEffect)(() => setShowCluster(externalShowCluster), [externalShowCluster]);
+    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 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 => {
+        setShowCluster(newShowCluster);
+        onShowClusterChange(newShowCluster, showCluster);
+        setApi(Object.assign(Object.assign({}, api), { settings: Object.assign(Object.assign({}, api.settings), { showCluster: newShowCluster }) }));
+    };
+    const handleZoomIn = () => {
+        const z = api.utils.getZoom();
+        const newZoom = z + 1;
+        onZoomIn(newZoom, z);
+        api.utils.setZoom(newZoom, zoomAnimation);
+    };
+    const handleZoomOut = () => {
+        const z = api.utils.getZoom();
+        const newZoom = z - 1;
+        onZoomOut(newZoom, z);
+        api.utils.setZoom(newZoom, zoomAnimation);
+    };
+    const style = getStyle(height, 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,
+                        hideMapLayerSettings,
+                        hideClusterSettings,
+                        onMapTypeChange: handleMapTypeChange,
+                        onMapLayerChange: handleMapLayerChange,
+                        onShowClusterChange: handleShowClusterChange,
+                        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) })))] }))) })));
+};
+Map.TYPE_DEFAULT = constants_1.MAP_TYPE_DEFAULT;
+Map.TYPE_FLEET_STYLE = constants_1.MAP_TYPE_FLEET_STYLE;
+Map.TYPE_SATELLITE = constants_1.MAP_TYPE_SATELLITE;
+Map.TYPE_TERRAIN = constants_1.MAP_TYPE_TERRAIN;
+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;