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

package/components/map/components/Map.js

@@ -1,9 +1,4 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _PropTypes$shape;
-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) { _defineProperty(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; }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import isFunction from 'lodash/fp/isFunction';
@@ -14,7 +9,7 @@ import cloneDeep from 'lodash/fp/cloneDeep';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS } from './constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, } from './constants';
 import ZoomButtons from './features/settings/ZoomButtons';
 import IncidentsLayer from './features/layers/IncidentsLayer';
 import TrafficLayer from './features/layers/TrafficLayer';
@@ -30,378 +25,231 @@ import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandl
 import { MapContext, MapSettingsContext } from './context';
 import { createUtils, getPPI } from './mapUtils';
 import useDarkMode from '../../../hooks/useDarkMode';
-export var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
-var RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
-
+export const 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 MAP_LAYER_TRAFFIC:
-      return /*#__PURE__*/React.createElement(TrafficLayer, {
-        api: api,
-        language: language,
-        key: layer,
-        useWebGL: enableWebGL
-      });
-    case MAP_LAYER_INCIDENTS:
-      return /*#__PURE__*/React.createElement(IncidentsLayer, {
-        api: api,
-        language: language,
-        key: layer
-      });
-    case MAP_LAYER_ROAD_RESTRICTIONS:
-      return /*#__PURE__*/React.createElement(RoadRestrictionLayer, {
-        api: api,
-        language: language,
-        key: layer,
-        useWebGL: enableWebGL
-      });
-    default:
-      null;
-  }
+const getLayer = (api, layer, language, enableWebGL) => {
+    switch (layer) {
+        case MAP_LAYER_TRAFFIC:
+            return _jsx(TrafficLayer, { api: api, language: language, useWebGL: enableWebGL }, layer);
+        case MAP_LAYER_INCIDENTS:
+            return _jsx(IncidentsLayer, { api: api, language: language }, layer);
+        case MAP_LAYER_ROAD_RESTRICTIONS:
+            return _jsx(RoadRestrictionLayer, { api: api, language: language, useWebGL: enableWebGL }, layer);
+        default:
+            null;
+    }
 };
-var getBaseLayer = function getBaseLayer(api, baseLayer, language, enableWebGL, darkMode) {
-  switch (baseLayer) {
-    case MAP_TYPE_DEFAULT:
-      {
-        return !darkMode && enableWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
-          api: api,
-          language: language,
-          key: baseLayer
-        }) : /*#__PURE__*/React.createElement(DefaultRasterLayer, {
-          api: api,
-          language: language,
-          key: baseLayer,
-          darkMode: darkMode
-        });
-      }
-    case MAP_TYPE_FLEET_STYLE:
-      return /*#__PURE__*/React.createElement(FleetStyleLayer, {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case MAP_TYPE_SATELLITE:
-      return /*#__PURE__*/React.createElement(SatelliteLayer, {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case MAP_TYPE_TERRAIN:
-      return /*#__PURE__*/React.createElement(TerrainLayer, {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    case MAP_TYPE_NIGHT:
-      return /*#__PURE__*/React.createElement(NightLayer, {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
-    default:
-      null;
-  }
+const getBaseLayer = (api, baseLayer, language, enableWebGL, darkMode) => {
+    switch (baseLayer) {
+        case MAP_TYPE_DEFAULT: {
+            return !darkMode && enableWebGL ? (_jsx(DefaultVectorLayer, { api: api, language: language }, baseLayer)) : (_jsx(DefaultRasterLayer, { api: api, language: language, darkMode: darkMode }, baseLayer));
+        }
+        case MAP_TYPE_FLEET_STYLE:
+            return _jsx(FleetStyleLayer, { api: api, language: language }, baseLayer);
+        case MAP_TYPE_SATELLITE:
+            return _jsx(SatelliteLayer, { api: api, language: language }, baseLayer);
+        case MAP_TYPE_TERRAIN:
+            return _jsx(TerrainLayer, { api: api, language: language }, baseLayer);
+        case MAP_TYPE_NIGHT:
+            return _jsx(NightLayer, { api: api, language: language }, baseLayer);
+        default:
+            null;
+    }
 };
-var enrichChildrenWithApi = function enrichChildrenWithApi(children, api) {
-  return React.Children.map(children, function (child) {
+const enrichChildrenWithApi = (children, api) => React.Children.map(children, child => {
     if (child) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        api: api
-      });
+        return React.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 = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isMapInitialized = _useState2[0],
-    setMapInitialized = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    api = _useState4[0],
-    setApi = _useState4[1];
-  var _useState5 = useState(mapType),
-    _useState6 = _slicedToArray(_useState5, 2),
-    baseLayer = _useState6[0],
-    setBaseLayer = _useState6[1];
-  var _useState7 = useState(mapLayer),
-    _useState8 = _slicedToArray(_useState7, 2),
-    activeLayers = _useState8[0],
-    setActiveLayers = _useState8[1];
-  var _useState9 = useState(externalShowCluster),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showCluster = _useState10[0],
-    setShowCluster = _useState10[1];
-  var devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
-  useEffect(function () {
-    console.debug('initialize here map');
-    var bounds = boundingBox && getBounds(boundingBox);
-    var platform = getPlatform(credentials);
-    var defaultLayers = platform.createDefaultLayers();
-    var defaultLayer = 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 = addEventListener(window, 'resize', throttle(RESIZE_THROTTLE, function () {
-      return hereMap.getViewPort().resize();
-    }));
-    var orientationChangeListener = addEventListener(window, 'orientationchange', throttle(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);
-    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: createUtils(hereMap),
-      settings: {
-        enableWebGL: enableWebGL,
-        baseLayer: baseLayer,
-        mapLayer: activeLayers,
-        showCluster: showCluster
-      }
-    });
-    return function () {
-      if (hereMap) {
-        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 = useRef(null);
+    const [isMapInitialized, setMapInitialized] = useState(false);
+    const [api, setApi] = useState();
+    const [baseLayer, setBaseLayer] = useState(mapType);
+    const [activeLayers, setActiveLayers] = useState(mapLayer);
+    const [showCluster, setShowCluster] = useState(externalShowCluster);
+    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    useEffect(() => {
+        console.debug('initialize here map');
+        const bounds = boundingBox && getBounds(boundingBox);
+        const platform = getPlatform(credentials);
+        const defaultLayers = platform.createDefaultLayers();
+        const defaultLayer = 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 = addEventListener(window, 'resize', throttle(RESIZE_THROTTLE, () => hereMap.getViewPort().resize()));
+        const orientationChangeListener = addEventListener(window, 'orientationchange', throttle(RESIZE_THROTTLE, () => hereMap.getViewPort().resize()));
+        setMapInitialized(true);
+        const hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
+        const hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
+        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: createUtils(hereMap),
+            settings: {
+                enableWebGL,
+                baseLayer: baseLayer,
+                mapLayer: activeLayers,
+                showCluster: showCluster,
+            },
+        });
+        return () => {
+            if (hereMap) {
+                removeEventListenerMap(hereMap);
+                if (hereMapEvents) {
+                    hereMapEvents.dispose();
+                }
+                if (resizeListener) {
+                    resizeListener.remove();
+                }
+                if (orientationChangeListener) {
+                    orientationChangeListener.remove();
+                }
+                hereMap.dispose();
+            }
+        };
+    }, [enableWebGL, enableDevicePixelRatio]);
+    const isDarkMode = useDarkMode();
+    useEffect(() => {
+        // Toggle night map only if current map type is default
+        if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
+            handleMapTypeChange(MAP_TYPE_NIGHT);
+        }
+        // Toggle back to default map only if current map type is night
+        else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
+            handleMapTypeChange(MAP_TYPE_DEFAULT);
+        }
+    }, [isDarkMode]);
+    // Update BoundingBox from outside
+    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
+    useEffect(() => {
+        if (!api) {
+            return;
         }
-        if (resizeListener) {
-          resizeListener.remove();
+        const currentMapZoom = api.utils.getZoom();
+        if (zoom && currentMapZoom !== zoom) {
+            api.utils.setZoom(zoom, zoomAnimation);
         }
-        if (orientationChangeListener) {
-          orientationChangeListener.remove();
+    }, [zoom]);
+    // Update Lat & Lng from outside if value is different
+    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
+    useEffect(() => handleMapTypeChange(mapType), [mapType]);
+    // Update MapLayer from outside
+    useEffect(() => setActiveLayers(mapLayer), [mapLayer]);
+    // Update Cluster setting from outside
+    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 = useDarkMode();
-  useEffect(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
-      handleMapTypeChange(MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
-      handleMapTypeChange(MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
-
-  // Update BoundingBox from outside
-  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
-  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
-  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
-  useEffect(function () {
-    return handleMapTypeChange(mapType);
-  }, [mapType]);
-
-  // Update MapLayer from outside
-  useEffect(function () {
-    return setActiveLayers(mapLayer);
-  }, [mapLayer]);
-
-  // Update Cluster setting from outside
-  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(_toConsumableArray(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 = isEmpty(style) ? 'height-100pct' : '';
-  var hideZoomButtons = disableBehavior;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "Map position-relative map-type-".concat(baseLayer.toLowerCase(), " ").concat(autoHeightClass),
-    style: style,
-    ref: mapRef
-  }, isMapInitialized && /*#__PURE__*/React.createElement(MapContext.Provider, {
-    value: {
-      api: api
-    }
-  }, !hideZoomButtons && /*#__PURE__*/React.createElement(ZoomButtons, {
-    onZoomIn: handleZoomIn,
-    onZoomOut: handleZoomOut
-  }), mapSettings && /*#__PURE__*/React.createElement(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), map(function (layer) {
-    return getLayer(api, layer, language, enableWebGL);
-  }, activeLayers), children && /*#__PURE__*/React.createElement("div", {
-    className: 'MapElements'
-  }, isFunction(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 = isEmpty(style) ? 'height-100pct' : '';
+    const hideZoomButtons = disableBehavior;
+    return (_jsx("div", Object.assign({ className: `Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`, style: style, ref: mapRef }, { children: isMapInitialized && (_jsxs(MapContext.Provider, Object.assign({ value: { api } }, { children: [!hideZoomButtons && _jsx(ZoomButtons, { onZoomIn: handleZoomIn, onZoomOut: handleZoomOut }), mapSettings && (_jsx(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), map(layer => getLayer(api, layer, language, enableWebGL), activeLayers), children && (_jsx("div", Object.assign({ className: 'MapElements' }, { children: isFunction(children) ? children(api) : enrichChildrenWithApi(children, api) })))] }))) })));
 };
 Map.TYPE_DEFAULT = MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;
@@ -412,52 +260,63 @@ Map.LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;
 Map.LAYER_TRAFFIC = MAP_LAYER_TRAFFIC;
 Map.LAYER_ROAD_RESTRICTIONS = MAP_LAYER_ROAD_RESTRICTIONS;
 Map.defaultProps = {
-  language: 'en',
-  zoomAnimation: false,
-  hideMapSettings: false,
-  hideClusterSettings: false,
-  hideMapLayerSettings: false,
-  mapType: 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: MAP_TYPE_DEFAULT,
+    mapLayer: [],
+    showCluster: true,
+    showScaleBar: false,
+    onMapTypeChange: () => { },
+    onMapLayerChange: () => { },
+    onShowClusterChange: () => { },
+    onZoomIn: () => { },
+    onZoomOut: () => { },
+    enableWebGL: true,
+    enableDevicePixelRatio: true,
+    darkMode: false,
 };
 Map.propTypes = {
-  credentials: PropTypes.shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, 'app_id', PropTypes.string), _defineProperty(_PropTypes$shape, 'app_code', PropTypes.string), _defineProperty(_PropTypes$shape, 'api_key', PropTypes.string), _defineProperty(_PropTypes$shape, "apikey", PropTypes.string), _PropTypes$shape)).isRequired,
-  height: PropTypes.number,
-  width: PropTypes.number,
-  language: PropTypes.string,
-  zoom: PropTypes.number,
-  center: mapProps.position,
-  boundingBox: mapProps.rect,
-  disableMapEvents: PropTypes.bool,
-  disableBehavior: PropTypes.bool,
-  eventListenerMap: PropTypes.object,
-  hideMapSettings: PropTypes.bool,
-  hideClusterSettings: PropTypes.bool,
-  hideMapLayerSettings: PropTypes.bool,
-  mapType: PropTypes.oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN, Map.TYPE_NIGHT]),
-  mapLayer: PropTypes.arrayOf(PropTypes.string),
-  showCluster: PropTypes.bool,
-  showScaleBar: PropTypes.bool,
-  onMapTypeChange: PropTypes.func,
-  onMapLayerChange: PropTypes.func,
-  onShowClusterChange: PropTypes.func,
-  onZoomIn: PropTypes.func,
-  onZoomOut: PropTypes.func,
-  getApi: PropTypes.func,
-  mapSettingsTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  mapSettings: PropTypes.node,
-  enableWebGL: PropTypes.bool,
-  enableDevicePixelRatio: PropTypes.bool,
-  darkMode: PropTypes.bool
+    credentials: PropTypes.shape({
+        ['app_id']: PropTypes.string,
+        ['app_code']: PropTypes.string,
+        ['api_key']: PropTypes.string,
+        apikey: PropTypes.string,
+    }).isRequired,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    language: PropTypes.string,
+    zoom: PropTypes.number,
+    center: mapProps.position,
+    boundingBox: mapProps.rect,
+    disableMapEvents: PropTypes.bool,
+    disableBehavior: PropTypes.bool,
+    eventListenerMap: PropTypes.object,
+    hideMapSettings: PropTypes.bool,
+    hideClusterSettings: PropTypes.bool,
+    hideMapLayerSettings: PropTypes.bool,
+    mapType: PropTypes.oneOf([
+        Map.TYPE_DEFAULT,
+        Map.TYPE_FLEET_STYLE,
+        Map.TYPE_SATELLITE,
+        Map.TYPE_TERRAIN,
+        Map.TYPE_NIGHT,
+    ]),
+    mapLayer: PropTypes.arrayOf(PropTypes.string),
+    showCluster: PropTypes.bool,
+    showScaleBar: PropTypes.bool,
+    onMapTypeChange: PropTypes.func,
+    onMapLayerChange: PropTypes.func,
+    onShowClusterChange: PropTypes.func,
+    onZoomIn: PropTypes.func,
+    onZoomOut: PropTypes.func,
+    getApi: PropTypes.func,
+    mapSettingsTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    mapSettings: PropTypes.node,
+    enableWebGL: PropTypes.bool,
+    enableDevicePixelRatio: PropTypes.bool,
+    darkMode: PropTypes.bool,
 };
-export default Map;
+export default Map;