@rio-cloud/rio-uikit 0.16.2-beta.12 → 0.16.2-beta.14

package/Map.d.ts

@@ -3,7 +3,7 @@ import { MapProps } from './types';
 
 export { BoundingBox } from './types';
 
-export default class Map extends React.Component<MapProps> {
+export default class Map extends React.Component<React.PropsWithChildren<MapProps>> {
     static TYPE_DEFAULT = 'DEFAULT';
     static TYPE_FLEET_STYLE = 'FLEET_STYLE';
     static TYPE_SATELLITE = 'SATELLITE';

package/RuleConnector.d.ts

@@ -1,7 +1,8 @@
 declare module '@rio-cloud/rio-uikit/RuleConnector' {
     import React from 'react';
     import { RuleConnectorProps } from './types';
-    export default class RuleConnector extends React.Component<RuleConnectorProps> {
+
+    export default class RuleConnector extends React.Component<React.PropsWithChildren<RuleConnectorProps>> {
         static START = 'start';
         static CENTER = 'center';
         static END = 'end';

package/RuleContainer.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RuleContainer' {
     import React from 'react';
     import { RuleContainerProps } from './types';
-    export default class RuleContainer extends React.Component<RuleContainerProps> {}
-}
+
+    export default class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
+}

package/RulesWrapper.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RulesWrapper' {
     import React from 'react';
     import { RulesWrapperProps } from './types';
+
     export default class RulesWrapper extends React.Component<RulesWrapperProps> {}
-}
+}

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,20 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "buttonAlignment", "useBodyPaddings", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export var ApplicationLayoutBodyBottomBar = function ApplicationLayoutBodyBottomBar(_ref) {
+export var ApplicationLayoutBodyBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     buttonAlignment = _ref.buttonAlignment,
     useBodyPaddings = _ref.useBodyPaddings,
     children = _ref.children,
     remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayoutBodyBottomBar', buttonAlignment === 'left' && 'justify-content-start', buttonAlignment === 'right' && 'justify-content-end', buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between', useBodyPaddings && 'use-body-padding', className && className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainigProps, {
     className: classes
   }), children);
-};
+});
 ApplicationLayoutBodyBottomBar.LEFT = 'left';
 ApplicationLayoutBodyBottomBar.RIGHT = 'right';
 ApplicationLayoutBodyBottomBar.defaultProps = {

package/components/map/components/Map.js

@@ -10,6 +10,7 @@ import isFunction from 'lodash/fp/isFunction';
 import map from 'lodash/fp/map';
 import isEmpty from 'lodash/fp/isEmpty';
 import throttle from 'lodash/fp/throttle';
+import cloneDeep from 'lodash/fp/cloneDeep';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
@@ -59,14 +60,14 @@ var getBounds = function getBounds(boundingBox) {
     right = boundingBox.right;
   return new H.geo.Rect(top, left, bottom, right);
 };
-var getLayer = function getLayer(api, layer, language, useWebGL) {
+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: useWebGL
+        useWebGL: enableWebGL
       });
     case MAP_LAYER_INCIDENTS:
       return /*#__PURE__*/React.createElement(IncidentsLayer, {
@@ -79,17 +80,17 @@ var getLayer = function getLayer(api, layer, language, useWebGL) {
         api: api,
         language: language,
         key: layer,
-        useWebGL: useWebGL
+        useWebGL: enableWebGL
       });
     default:
       null;
   }
 };
-var getBaseLayer = function getBaseLayer(api, baseLayer, language, useWebGL, darkMode) {
+var getBaseLayer = function getBaseLayer(api, baseLayer, language, enableWebGL, darkMode) {
   switch (baseLayer) {
     case MAP_TYPE_DEFAULT:
       {
-        return !darkMode && useWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
+        return !darkMode && enableWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
           api: api,
           language: language,
           key: baseLayer
@@ -173,7 +174,8 @@ var Map = function Map(props) {
     onZoomOut = props.onZoomOut,
     mapSettingsTooltip = props.mapSettingsTooltip,
     mapSettings = props.mapSettings,
-    useWebGL = props.useWebGL,
+    enableWebGL = props.enableWebGL,
+    enableDevicePixelRatio = props.enableDevicePixelRatio,
     darkMode = props.darkMode;
   var mapRef = useRef(null);
   var _useState = useState(false),
@@ -196,26 +198,13 @@ var Map = function Map(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     showCluster = _useState10[0],
     setShowCluster = _useState10[1];
-  var isDarkMode = useDarkMode();
-  useEffect(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
-      setBaseLayer(MAP_TYPE_NIGHT);
-      onMapTypeChange(MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
-      setBaseLayer(MAP_TYPE_DEFAULT);
-      onMapTypeChange(MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
-  var devicePixelRatio = window.devicePixelRatio || 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, useWebGL);
+    var defaultLayer = getDefaultBaseLayer(defaultLayers, baseLayer, enableWebGL);
 
     // Instantiate (and display) a map object:
     var mapConfig = {
@@ -268,7 +257,18 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL]);
+  }, [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 () {
@@ -307,7 +307,7 @@ var Map = function Map(props) {
 
   // Update MapType from outside
   useEffect(function () {
-    return setBaseLayer(mapType);
+    return handleMapTypeChange(mapType);
   }, [mapType]);
 
   // Update MapLayer from outside
@@ -322,11 +322,13 @@ var Map = function Map(props) {
   var handleMapTypeChange = function handleMapTypeChange(newMapType) {
     setBaseLayer(newMapType);
     onMapTypeChange(newMapType, mapType);
-    setApi(_objectSpread(_objectSpread({}, api), {}, {
-      settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-        baseLayer: newMapType
-      })
-    }));
+    if (api) {
+      setApi(_objectSpread(_objectSpread({}, api), {}, {
+        settings: _objectSpread(_objectSpread({}, api.settings), {}, {
+          baseLayer: newMapType
+        })
+      }));
+    }
   };
   var handleMapLayerChange = function handleMapLayerChange(layer) {
     var removeLayer = function removeLayer(layerToRemove) {
@@ -372,7 +374,9 @@ var Map = function Map(props) {
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/React.createElement(MapContext.Provider, {
-    value: api
+    value: {
+      api: api
+    }
   }, !hideZoomButtons && /*#__PURE__*/React.createElement(ZoomButtons, {
     onZoomIn: handleZoomIn,
     onZoomOut: handleZoomOut
@@ -388,8 +392,8 @@ var Map = function Map(props) {
       onShowClusterChange: handleShowClusterChange,
       mapSettingsTooltip: mapSettingsTooltip
     }
-  }, mapSettings), getBaseLayer(api, baseLayer, language, useWebGL, darkMode), map(function (layer) {
-    return getLayer(api, layer, language, useWebGL);
+  }, 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))));
@@ -417,7 +421,8 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: true,
+  enableWebGL: true,
+  enableDevicePixelRatio: true,
   darkMode: false
 };
 Map.propTypes = {
@@ -446,7 +451,8 @@ Map.propTypes = {
   getApi: PropTypes.func,
   mapSettingsTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   mapSettings: PropTypes.node,
-  useWebGL: PropTypes.bool,
+  enableWebGL: PropTypes.bool,
+  enableDevicePixelRatio: PropTypes.bool,
   darkMode: PropTypes.bool
 };
 export default Map;

package/components/map/components/features/ContextMenu.js

@@ -80,7 +80,7 @@ var ContextMenu = function ContextMenu(props) {
     contextMenuEvent = props.contextMenuEvent,
     targetPosition = props.targetPosition;
   var mapContext = useContext(MapContext);
-  var _ref = api || mapContext,
+  var _ref = api || mapContext.api,
     hereMap = _ref.map;
 
   // Use a ref to store the target position used when a map object was clicked with a fixed

package/components/map/components/features/basics/Circle.js

@@ -13,7 +13,8 @@ var Circle = function Circle(_ref) {
     precision = _ref$precision === void 0 ? 60 : _ref$precision,
     style = _ref.style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     circle = _useState2[0],
@@ -24,10 +25,10 @@ var Circle = function Circle(_ref) {
       precision: parseFloat(precision)
     });
     setCircle(newCircle);
-    context.group.addObject(newCircle);
+    api.group.addObject(newCircle);
     return function () {
-      if (context.group.getObjects().includes(newCircle)) {
-        context.group.removeObject(newCircle);
+      if (api.group.getObjects().includes(newCircle)) {
+        api.group.removeObject(newCircle);
       }
       newCircle.dispose();
     };

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

@@ -26,15 +26,17 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
       max: parseFloat(maxZoom)
     });
     newGroup.setVisibility(isVisible);
-    context.group.addObject(newGroup);
+    context.api.group.addObject(newGroup);
     setGroup(newGroup);
     var newChildApi = _objectSpread(_objectSpread({}, context), {}, {
-      group: newGroup
+      api: _objectSpread(_objectSpread({}, context.api), {}, {
+        group: newGroup
+      })
     });
     setChildApi(newChildApi);
     return function () {
-      if (context.group.getObjects().includes(newGroup)) {
-        context.group.removeObject(newGroup);
+      if (context.api.group.getObjects().includes(newGroup)) {
+        context.api.group.removeObject(newGroup);
       }
       newGroup.dispose();
     };

package/components/map/components/features/basics/Polygon.js

@@ -21,7 +21,8 @@ var Polygon = function Polygon(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polygon = _useState2[0],
@@ -30,11 +31,11 @@ var Polygon = function Polygon(_ref) {
     var newPolygon = new H.map.Polygon(createGeometry(points), {
       style: style
     });
-    context.group.addObject(newPolygon);
+    api.group.addObject(newPolygon);
     setPolygon(newPolygon);
     return function () {
-      if (context.group.getObjects().includes(newPolygon)) {
-        context.group.removeObject(newPolygon);
+      if (api.group.getObjects().includes(newPolygon)) {
+        api.group.removeObject(newPolygon);
       }
       newPolygon.dispose();
     };

package/components/map/components/features/basics/Polyline.js

@@ -18,7 +18,8 @@ var Polyline = function Polyline(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polyline = _useState2[0],
@@ -56,7 +57,7 @@ var Polyline = function Polyline(_ref) {
     } else {
       lineGroup.addObjects([line]);
     }
-    context.group.addObject(lineGroup);
+    api.group.addObject(lineGroup);
     setPolyline(lineGroup);
     return function () {
       // cleanup
@@ -67,8 +68,8 @@ var Polyline = function Polyline(_ref) {
         lineGroup.removeObject(singleLine);
         singleLine.dispose();
       });
-      if (context.group.getObjects().includes(lineGroup)) {
-        context.group.removeObject(lineGroup);
+      if (api.group.getObjects().includes(lineGroup)) {
+        api.group.removeObject(lineGroup);
       }
       lineGroup.dispose();
     };

package/components/map/components/features/basics/marker/Marker.js

@@ -1,16 +1,10 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable no-undef */
-import React from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import ReactDomServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import mapProps from '../../../../utils/proptypes';
-import { addEventListenerMap, removeEventListenerMap, checkAndUpdateEventListenerMap } from '../../../../utils/eventHandling';
+import { addEventListenerMap, removeEventListenerMap } from '../../../../utils/eventHandling';
 import MapException from '../../../../exceptions/MapException';
 import { MapContext } from '../../../context';
 export var isHMapIcon = function isHMapIcon(icon) {
@@ -19,131 +13,142 @@ export var isHMapIcon = function isHMapIcon(icon) {
 export var isDomMakerNeeded = function isDomMakerNeeded(icon) {
   return !icon ? false : !isHMapIcon(icon);
 };
-export function getOrCreateIcon(icon) {
+export function getOrCreateIcon(icon, mapType) {
   if (!icon || isHMapIcon(icon) || icon instanceof H.map.DomIcon) {
     return;
   }
-  var renderedIcon = /*#__PURE__*/React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup(icon) : icon;
+  var renderedIcon = /*#__PURE__*/React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup( /*#__PURE__*/React.cloneElement(icon, {
+    mapType: mapType
+  })) : icon;
   return new H.map.DomIcon(renderedIcon);
 }
-var Marker = /*#__PURE__*/function (_React$Component) {
-  _inherits(Marker, _React$Component);
-  var _super = _createSuper(Marker);
-  function Marker(props, context) {
-    var _this;
-    _classCallCheck(this, Marker);
-    _this = _super.call(this, props, context);
-    //console.log(context);
-    _this.setupMarker(props);
-    return _this;
+var convertPosition = function convertPosition(pos) {
+  return Array.isArray(pos) ? new H.geo.MultiPoint(pos) : pos;
+};
+var checkPositionProperties = function checkPositionProperties(position) {
+  ['lat', 'lng'].forEach(function (propertyName) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!position.hasOwnProperty(propertyName)) {
+      throw new MapException("Error in Marker: position object requires property \"".concat(propertyName, "\""));
+    }
+  });
+};
+var getPosition = function getPosition(position) {
+  if (!position) {
+    throw new MapException('Error in Marker: invalid position property');
   }
-
-  // eslint-disable-next-line camelcase
-  _createClass(Marker, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this$props = this.props,
-        position = _this$props.position,
-        customData = _this$props.customData,
-        icon = _this$props.icon;
-      checkAndUpdateEventListenerMap(this.marker, this.props, nextProps);
-      if (position !== nextProps.position) {
-        this.marker.setGeometry(this.getConvertedPosition(nextProps));
-      }
-      this.marker.draggable = !!nextProps.draggable;
-      if (customData !== nextProps.customData) {
-        this.marker.setData(nextProps.customData);
-      }
-      if (icon !== nextProps.icon) {
-        if (isDomMakerNeeded(icon) !== isDomMakerNeeded(nextProps.icon)) {
-          // icon type changed so we need to change the marker type
-          this.destroyMarker();
-          this.setupMarker(nextProps);
-        } else {
-          this.marker.setIcon(getOrCreateIcon(nextProps.icon));
-        }
+  if (Array.isArray(position)) {
+    position.forEach(function (pos) {
+      return checkPositionProperties(pos);
+    });
+  } else {
+    checkPositionProperties(position);
+  }
+  return position;
+};
+var getConvertedPosition = function getConvertedPosition(position) {
+  return convertPosition(getPosition(position));
+};
+var setupMarker = function setupMarker(props, api) {
+  var position = props.position,
+    customData = props.customData,
+    icon = props.icon,
+    draggable = props.draggable,
+    eventListenerMap = props.eventListenerMap;
+  var MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
+  var marker = new MarkerConstructor(getConvertedPosition(position), {
+    icon: getOrCreateIcon(icon, api.settings.baseLayer)
+  });
+  marker.setData(customData);
+  marker.draggable = !!draggable;
+  api.group.addObject(marker);
+  addEventListenerMap(marker, eventListenerMap, api.map);
+  return marker;
+};
+var destroyMarker = function destroyMarker(marker, api) {
+  removeEventListenerMap(marker);
+  if (api.group.getObjects().includes(marker)) {
+    api.group.removeObject(marker);
+  }
+  marker.dispose();
+};
+var Marker = function Marker(props) {
+  var position = props.position,
+    customData = props.customData,
+    icon = props.icon,
+    eventListenerMap = props.eventListenerMap;
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
+  var markerRef = useRef();
+  var _useState = useState(api === null || api === void 0 ? void 0 : api.settings.baseLayer),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentBaseLayer = _useState2[0],
+    setCurrentBaseLayer = _useState2[1];
+  useEffect(function () {
+    markerRef.current = setupMarker(props, api);
+    return function () {
+      if (markerRef.current) {
+        destroyMarker(markerRef.current, api);
+        markerRef.current = undefined;
       }
+    };
+  }, []);
+
+  // Update marker position
+  useEffect(function () {
+    if (markerRef.current) {
+      markerRef.current.setGeometry(getConvertedPosition(position));
     }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate() {
-      return false;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.destroyMarker();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }, {
-    key: "setupMarker",
-    value: function setupMarker(nextProps) {
-      var _this$props2 = this.props,
-        customData = _this$props2.customData,
-        draggable = _this$props2.draggable;
-      var MarkerConstructor = isDomMakerNeeded(nextProps.icon) ? H.map.DomMarker : H.map.Marker;
-      this.marker = new MarkerConstructor(this.getConvertedPosition(nextProps), {
-        icon: getOrCreateIcon(nextProps.icon)
-      });
-      this.marker.setData(customData);
-      this.marker.draggable = !!draggable;
-      this.context.group.addObject(this.marker);
-      addEventListenerMap(this.marker, nextProps.eventListenerMap, this.context.map);
+  }, [position, markerRef.current]);
+
+  // Update marker custom data
+  useEffect(function () {
+    if (markerRef.current) {
+      markerRef.current.setData(customData);
     }
-  }, {
-    key: "destroyMarker",
-    value: function destroyMarker() {
-      removeEventListenerMap(this.marker);
-      if (this.context.group.getObjects().includes(this.marker)) {
-        this.context.group.removeObject(this.marker);
-      }
-      this.marker.dispose();
+  }, [customData, markerRef.current]);
+
+  // Update EventListenerMap
+  useEffect(function () {
+    if (markerRef.current) {
+      // use exports to make methods accessible for stubbing
+      var mapApi = removeEventListenerMap(markerRef.current);
+      addEventListenerMap(markerRef.current, eventListenerMap, mapApi);
     }
-  }, {
-    key: "getConvertedPosition",
-    value: function getConvertedPosition(props) {
-      return this.convertPosition(this.getPosition(props));
+  }, [eventListenerMap, markerRef.current]);
+
+  // In case the map base layer has changed between day and night, update the marker
+  useEffect(function () {
+    if (!markerRef.current) {
+      return;
     }
-  }, {
-    key: "getPosition",
-    value: function getPosition(props) {
-      var _this2 = this;
-      var position = props.position;
-      if (!position) {
-        throw new MapException('Error in Marker: invalid position property');
-      }
-      if (Array.isArray(position)) {
-        position.forEach(function (pos) {
-          return _this2.checkPositionProperties(pos);
-        });
-      } else {
-        this.checkPositionProperties(position);
-      }
-      return position;
+    var newBaseLayer = api.settings.baseLayer;
+    console.log({
+      newBaseLayer: newBaseLayer
+    });
+    if (newBaseLayer !== currentBaseLayer) {
+      console.log(newBaseLayer);
+
+      // Update marker icons
+      markerRef.current.setIcon(getOrCreateIcon(icon, newBaseLayer));
+      setCurrentBaseLayer(newBaseLayer);
     }
-  }, {
-    key: "checkPositionProperties",
-    value: function checkPositionProperties(position) {
-      ['lat', 'lng'].forEach(function (propertyName) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (!position.hasOwnProperty(propertyName)) {
-          throw new MapException("Error in Marker: position object requires property \"".concat(propertyName, "\""));
-        }
-      });
+  }, [api.settings.baseLayer, markerRef.current]);
+
+  // If icon type changed, we need to change the marker type
+  useEffect(function () {
+    if (!(markerRef.current && icon)) {
+      return;
     }
-  }, {
-    key: "convertPosition",
-    value: function convertPosition(pos) {
-      return Array.isArray(pos) ? new H.geo.MultiPoint(pos) : pos;
+    if (isDomMakerNeeded(icon)) {
+      destroyMarker(markerRef.current, api);
+      markerRef.current = setupMarker(props, api);
+    } else {
+      markerRef.current.setIcon(getOrCreateIcon(icon, api.settings.baseLayer));
     }
-  }]);
-  return Marker;
-}(React.Component);
-Marker.contextType = MapContext;
+  }, [icon, markerRef.current]);
+  return null;
+};
 Marker.propTypes = {
   position: PropTypes.oneOfType([mapProps.position, mapProps.positions]).isRequired,
   icon: mapProps.icon,