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

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

@@ -1,475 +1,326 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.NO_CREDENTIALS_ERROR_MESSAGE = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
-var _map = _interopRequireDefault(require("lodash/fp/map"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
-var _cloneDeep = _interopRequireDefault(require("lodash/fp/cloneDeep"));
-var _proptypes = _interopRequireDefault(require("../utils/proptypes"));
-var _addEventListener = _interopRequireDefault(require("../../../utils/addEventListener"));
+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");
-var _constants = require("./constants");
-var _ZoomButtons = _interopRequireDefault(require("./features/settings/ZoomButtons"));
-var _IncidentsLayer = _interopRequireDefault(require("./features/layers/IncidentsLayer"));
-var _TrafficLayer = _interopRequireDefault(require("./features/layers/TrafficLayer"));
-var _RoadRestrictionLayer = _interopRequireDefault(require("./features/layers/RoadRestrictionLayer"));
-var _DefaultVectorLayer = _interopRequireDefault(require("./features/layers/baselayers/DefaultVectorLayer"));
-var _DefaultRasterLayer = _interopRequireDefault(require("./features/layers/baselayers/DefaultRasterLayer"));
-var _FleetStyleLayer = _interopRequireDefault(require("./features/layers/baselayers/FleetStyleLayer"));
-var _SatelliteLayer = _interopRequireDefault(require("./features/layers/baselayers/SatelliteLayer"));
-var _TerrainLayer = _interopRequireDefault(require("./features/layers/baselayers/TerrainLayer"));
-var _NightLayer = _interopRequireDefault(require("./features/layers/baselayers/NightLayer"));
-var _useBaseLayer = require("./features/layers/baselayers/useBaseLayer");
-var _eventHandling = require("../utils/eventHandling");
-var _context = require("./context");
-var _mapUtils = require("./mapUtils");
-var _useDarkMode = _interopRequireDefault(require("../../../hooks/useDarkMode"));
-var _PropTypes$shape;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
-exports.NO_CREDENTIALS_ERROR_MESSAGE = NO_CREDENTIALS_ERROR_MESSAGE;
-var RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
-
+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
-var getPlatform = function getPlatform(credentials) {
-  return new H.service.Platform({
+const getPlatform = credentials => new H.service.Platform({
     apikey: credentials.apikey || credentials.api_key,
     app_id: credentials.app_id,
-    app_code: credentials.app_code
-  });
-};
-var getHereUi = function getHereUi(hereMap, defaultLayers, showScaleBar) {
-  var 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;
+    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;
 };
-var getBounds = function getBounds(boundingBox) {
-  var top = boundingBox.top,
-    left = boundingBox.left,
-    bottom = boundingBox.bottom,
-    right = boundingBox.right;
-  return new H.geo.Rect(top, left, bottom, right);
+const getBounds = boundingBox => {
+    const { top, left, bottom, right } = boundingBox;
+    return new H.geo.Rect(top, left, bottom, right);
 };
-var getLayer = function getLayer(api, layer, language, enableWebGL) {
-  switch (layer) {
-    case _constants.MAP_LAYER_TRAFFIC:
-      return /*#__PURE__*/_react["default"].createElement(_TrafficLayer["default"], {
-        api: api,
-        language: language,
-        key: layer,
-        useWebGL: enableWebGL
-      });
-    case _constants.MAP_LAYER_INCIDENTS:
-      return /*#__PURE__*/_react["default"].createElement(_IncidentsLayer["default"], {
-        api: api,
-        language: language,
-        key: layer
-      });
-    case _constants.MAP_LAYER_ROAD_RESTRICTIONS:
-      return /*#__PURE__*/_react["default"].createElement(_RoadRestrictionLayer["default"], {
-        api: api,
-        language: language,
-        key: layer,
-        useWebGL: enableWebGL
-      });
-    default:
-      null;
-  }
+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;
+    }
 };
-var getBaseLayer = function getBaseLayer(api, baseLayer, language, enableWebGL, darkMode) {
-  switch (baseLayer) {
-    case _constants.MAP_TYPE_DEFAULT:
-      {
-        return !darkMode && enableWebGL ? /*#__PURE__*/_react["default"].createElement(_DefaultVectorLayer["default"], {
-          api: api,
-          language: language,
-          key: baseLayer
-        }) : /*#__PURE__*/_react["default"].createElement(_DefaultRasterLayer["default"], {
-          api: api,
-          language: language,
-          key: baseLayer,
-          darkMode: darkMode
-        });
-      }
-    case _constants.MAP_TYPE_FLEET_STYLE:
-      return /*#__PURE__*/_react["default"].createElement(_FleetStyleLayer["default"], {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case _constants.MAP_TYPE_SATELLITE:
-      return /*#__PURE__*/_react["default"].createElement(_SatelliteLayer["default"], {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case _constants.MAP_TYPE_TERRAIN:
-      return /*#__PURE__*/_react["default"].createElement(_TerrainLayer["default"], {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case _constants.MAP_TYPE_NIGHT:
-      return /*#__PURE__*/_react["default"].createElement(_NightLayer["default"], {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    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;
+    }
 };
-var enrichChildrenWithApi = function enrichChildrenWithApi(children, api) {
-  return _react["default"].Children.map(children, function (child) {
+const enrichChildrenWithApi = (children, api) => react_1.default.Children.map(children, child => {
     if (child) {
-      return /*#__PURE__*/_react["default"].cloneElement(child, {
-        api: api
-      });
+        return react_1.default.cloneElement(child, {
+            api,
+        });
     }
-  });
-};
-var getStyle = function getStyle(height, width) {
-  var style = {};
-  if (height) {
-    style.height = height;
-  }
-  if (width) {
-    style.width = width;
-  }
-  return style;
+});
+const getStyle = (height, width) => {
+    const style = {};
+    if (height) {
+        style.height = height;
+    }
+    if (width) {
+        style.width = width;
+    }
+    return style;
 };
-var Map = function Map(props) {
-  var children = props.children,
-    credentials = props.credentials,
-    width = props.width,
-    height = props.height,
-    language = props.language,
-    center = props.center,
-    zoom = props.zoom,
-    zoomAnimation = props.zoomAnimation,
-    boundingBox = props.boundingBox,
-    hideClusterSettings = props.hideClusterSettings,
-    hideMapLayerSettings = props.hideMapLayerSettings,
-    disableMapEvents = props.disableMapEvents,
-    disableBehavior = props.disableBehavior,
-    eventListenerMap = props.eventListenerMap,
-    mapType = props.mapType,
-    mapLayer = props.mapLayer,
-    externalShowCluster = props.showCluster,
-    showScaleBar = props.showScaleBar,
-    onMapLayerChange = props.onMapLayerChange,
-    onMapTypeChange = props.onMapTypeChange,
-    onShowClusterChange = props.onShowClusterChange,
-    onZoomIn = props.onZoomIn,
-    onZoomOut = props.onZoomOut,
-    mapSettingsTooltip = props.mapSettingsTooltip,
-    mapSettings = props.mapSettings,
-    enableWebGL = props.enableWebGL,
-    enableDevicePixelRatio = props.enableDevicePixelRatio,
-    darkMode = props.darkMode;
-  var mapRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isMapInitialized = _useState2[0],
-    setMapInitialized = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    api = _useState4[0],
-    setApi = _useState4[1];
-  var _useState5 = (0, _react.useState)(mapType),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    baseLayer = _useState6[0],
-    setBaseLayer = _useState6[1];
-  var _useState7 = (0, _react.useState)(mapLayer),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    activeLayers = _useState8[0],
-    setActiveLayers = _useState8[1];
-  var _useState9 = (0, _react.useState)(externalShowCluster),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    showCluster = _useState10[0],
-    setShowCluster = _useState10[1];
-  var devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
-  (0, _react.useEffect)(function () {
-    console.debug('initialize here map');
-    var bounds = boundingBox && getBounds(boundingBox);
-    var platform = getPlatform(credentials);
-    var defaultLayers = platform.createDefaultLayers();
-    var defaultLayer = (0, _useBaseLayer.getDefaultBaseLayer)(defaultLayers, baseLayer, enableWebGL);
-
-    // Instantiate (and display) a map object:
-    var mapConfig = {
-      zoom: zoom,
-      center: center,
-      bounds: bounds,
-      pixelRatio: devicePixelRatio,
-      // need to be set for better performence of legacy map
-      engineType: enableWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D
-    };
-    var hereMap = new H.Map(mapRef.current, defaultLayer, mapConfig);
-
-    // Add a resize listener to make sure that the map occupies the whole container
-    var resizeListener = (0, _addEventListener["default"])(window, 'resize', (0, _throttle["default"])(RESIZE_THROTTLE, function () {
-      return hereMap.getViewPort().resize();
-    }));
-    var orientationChangeListener = (0, _addEventListener["default"])(window, 'orientationchange', (0, _throttle["default"])(RESIZE_THROTTLE, function () {
-      return hereMap.getViewPort().resize();
-    }));
-    setMapInitialized(true);
-    var hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
-    var hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
-    (0, _eventHandling.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: credentials,
-      defaultLayers: defaultLayers,
-      map: hereMap,
-      mapEvents: hereMapEvents,
-      behavior: hereBehavior,
-      platform: platform,
-      ui: getHereUi(hereMap, defaultLayers, showScaleBar),
-      utils: (0, _mapUtils.createUtils)(hereMap),
-      settings: {
-        enableWebGL: enableWebGL,
-        baseLayer: baseLayer,
-        mapLayer: activeLayers,
-        showCluster: showCluster
-      }
-    });
-    return function () {
-      if (hereMap) {
-        (0, _eventHandling.removeEventListenerMap)(hereMap);
-        if (hereMapEvents) {
-          hereMapEvents.dispose();
+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);
         }
-        if (resizeListener) {
-          resizeListener.remove();
+    }, [boundingBox]);
+    // Update Zoom from outside if value is different
+    (0, react_1.useEffect)(() => {
+        if (!api) {
+            return;
         }
-        if (orientationChangeListener) {
-          orientationChangeListener.remove();
+        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 }) }));
         }
-        hereMap.dispose();
-      }
     };
-  }, [enableWebGL, enableDevicePixelRatio]);
-  var isDarkMode = (0, _useDarkMode["default"])();
-  (0, _react.useEffect)(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === _constants.MAP_TYPE_DEFAULT) {
-      handleMapTypeChange(_constants.MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === _constants.MAP_TYPE_NIGHT) {
-      handleMapTypeChange(_constants.MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
-
-  // Update BoundingBox from outside
-  (0, _react.useEffect)(function () {
-    if (api && boundingBox) {
-      var top = boundingBox.top,
-        left = boundingBox.left,
-        bottom = boundingBox.bottom,
-        right = boundingBox.right;
-      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.useEffect)(function () {
-    if (!api) {
-      return;
-    }
-    var 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.useEffect)(function () {
-    if (!(api && center)) {
-      return;
-    }
-    var 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.useEffect)(function () {
-    return handleMapTypeChange(mapType);
-  }, [mapType]);
-
-  // Update MapLayer from outside
-  (0, _react.useEffect)(function () {
-    return setActiveLayers(mapLayer);
-  }, [mapLayer]);
-
-  // Update Cluster setting from outside
-  (0, _react.useEffect)(function () {
-    return setShowCluster(externalShowCluster);
-  }, [externalShowCluster]);
-  var handleMapTypeChange = function handleMapTypeChange(newMapType) {
-    setBaseLayer(newMapType);
-    onMapTypeChange(newMapType, mapType);
-    if (api) {
-      setApi(_objectSpread(_objectSpread({}, api), {}, {
-        settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-          baseLayer: newMapType
-        })
-      }));
-    }
-  };
-  var handleMapLayerChange = function handleMapLayerChange(layer) {
-    var removeLayer = function removeLayer(layerToRemove) {
-      return activeLayers.filter(function (item) {
-        return 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 }) }));
     };
-    var newActiveLayers = activeLayers.includes(layer) ? removeLayer(layer) : [].concat((0, _toConsumableArray2["default"])(activeLayers), [layer]);
-    setActiveLayers(newActiveLayers);
-    onMapLayerChange(newActiveLayers, activeLayers);
-    setApi(_objectSpread(_objectSpread({}, api), {}, {
-      settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-        mapLayer: newActiveLayers
-      })
-    }));
-  };
-  var handleShowClusterChange = function handleShowClusterChange(newShowCluster) {
-    setShowCluster(newShowCluster);
-    onShowClusterChange(newShowCluster, showCluster);
-    setApi(_objectSpread(_objectSpread({}, api), {}, {
-      settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-        showCluster: newShowCluster
-      })
-    }));
-  };
-  var handleZoomIn = function handleZoomIn() {
-    var z = api.utils.getZoom();
-    var newZoom = z + 1;
-    onZoomIn(newZoom, z);
-    api.utils.setZoom(newZoom, zoomAnimation);
-  };
-  var handleZoomOut = function handleZoomOut() {
-    var z = api.utils.getZoom();
-    var newZoom = z - 1;
-    onZoomOut(newZoom, z);
-    api.utils.setZoom(newZoom, zoomAnimation);
-  };
-  var style = getStyle(height, width);
-  var autoHeightClass = (0, _isEmpty["default"])(style) ? 'height-100pct' : '';
-  var hideZoomButtons = disableBehavior;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "Map position-relative map-type-".concat(baseLayer.toLowerCase(), " ").concat(autoHeightClass),
-    style: style,
-    ref: mapRef
-  }, isMapInitialized && /*#__PURE__*/_react["default"].createElement(_context.MapContext.Provider, {
-    value: {
-      api: api
-    }
-  }, !hideZoomButtons && /*#__PURE__*/_react["default"].createElement(_ZoomButtons["default"], {
-    onZoomIn: handleZoomIn,
-    onZoomOut: handleZoomOut
-  }), mapSettings && /*#__PURE__*/_react["default"].createElement(_context.MapSettingsContext.Provider, {
-    value: {
-      mapType: baseLayer,
-      activeBuiltinLayers: activeLayers,
-      showCluster: showCluster,
-      hideMapLayerSettings: hideMapLayerSettings,
-      hideClusterSettings: hideClusterSettings,
-      onMapTypeChange: handleMapTypeChange,
-      onMapLayerChange: handleMapLayerChange,
-      onShowClusterChange: handleShowClusterChange,
-      mapSettingsTooltip: mapSettingsTooltip
-    }
-  }, mapSettings), getBaseLayer(api, baseLayer, language, enableWebGL, darkMode), (0, _map["default"])(function (layer) {
-    return getLayer(api, layer, language, enableWebGL);
-  }, activeLayers), children && /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'MapElements'
-  }, (0, _isFunction["default"])(children) ? children(api) : enrichChildrenWithApi(children, api))));
+    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.MAP_TYPE_DEFAULT;
-Map.TYPE_FLEET_STYLE = _constants.MAP_TYPE_FLEET_STYLE;
-Map.TYPE_SATELLITE = _constants.MAP_TYPE_SATELLITE;
-Map.TYPE_TERRAIN = _constants.MAP_TYPE_TERRAIN;
-Map.TYPE_NIGHT = _constants.MAP_TYPE_NIGHT;
-Map.LAYER_INCIDENTS = _constants.MAP_LAYER_INCIDENTS;
-Map.LAYER_TRAFFIC = _constants.MAP_LAYER_TRAFFIC;
-Map.LAYER_ROAD_RESTRICTIONS = _constants.MAP_LAYER_ROAD_RESTRICTIONS;
+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.MAP_TYPE_DEFAULT,
-  mapLayer: [],
-  showCluster: true,
-  showScaleBar: false,
-  onMapTypeChange: function onMapTypeChange() {},
-  onMapLayerChange: function onMapLayerChange() {},
-  onShowClusterChange: function onShowClusterChange() {},
-  onZoomIn: function onZoomIn() {},
-  onZoomOut: function onZoomOut() {},
-  enableWebGL: true,
-  enableDevicePixelRatio: true,
-  darkMode: false
+    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: _propTypes["default"].shape((_PropTypes$shape = {}, (0, _defineProperty2["default"])(_PropTypes$shape, 'app_id', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, 'app_code', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, 'api_key', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, "apikey", _propTypes["default"].string), _PropTypes$shape)).isRequired,
-  height: _propTypes["default"].number,
-  width: _propTypes["default"].number,
-  language: _propTypes["default"].string,
-  zoom: _propTypes["default"].number,
-  center: _proptypes["default"].position,
-  boundingBox: _proptypes["default"].rect,
-  disableMapEvents: _propTypes["default"].bool,
-  disableBehavior: _propTypes["default"].bool,
-  eventListenerMap: _propTypes["default"].object,
-  hideMapSettings: _propTypes["default"].bool,
-  hideClusterSettings: _propTypes["default"].bool,
-  hideMapLayerSettings: _propTypes["default"].bool,
-  mapType: _propTypes["default"].oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN, Map.TYPE_NIGHT]),
-  mapLayer: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  showCluster: _propTypes["default"].bool,
-  showScaleBar: _propTypes["default"].bool,
-  onMapTypeChange: _propTypes["default"].func,
-  onMapLayerChange: _propTypes["default"].func,
-  onShowClusterChange: _propTypes["default"].func,
-  onZoomIn: _propTypes["default"].func,
-  onZoomOut: _propTypes["default"].func,
-  getApi: _propTypes["default"].func,
-  mapSettingsTooltip: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  mapSettings: _propTypes["default"].node,
-  enableWebGL: _propTypes["default"].bool,
-  enableDevicePixelRatio: _propTypes["default"].bool,
-  darkMode: _propTypes["default"].bool
+    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,
 };
-var _default = Map;
-exports["default"] = _default;
+exports.default = Map;