@rio-cloud/rio-uikit 0.16.2-beta.8 → 0.16.2

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

@@ -15,6 +15,7 @@ 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"));
 require("../herePolyfill");
@@ -33,7 +34,7 @@ var _useBaseLayer = require("./features/layers/baselayers/useBaseLayer");
 var _eventHandling = require("../utils/eventHandling");
 var _context = require("./context");
 var _mapUtils = require("./mapUtils");
-var _useDarkMode = require("../../../hooks/useDarkMode");
+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; }
@@ -70,14 +71,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 _constants.MAP_LAYER_TRAFFIC:
       return /*#__PURE__*/_react["default"].createElement(_TrafficLayer["default"], {
         api: api,
         language: language,
         key: layer,
-        useWebGL: useWebGL
+        useWebGL: enableWebGL
       });
     case _constants.MAP_LAYER_INCIDENTS:
       return /*#__PURE__*/_react["default"].createElement(_IncidentsLayer["default"], {
@@ -90,17 +91,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 _constants.MAP_TYPE_DEFAULT:
       {
-        return !darkMode && useWebGL ? /*#__PURE__*/_react["default"].createElement(_DefaultVectorLayer["default"], {
+        return !darkMode && enableWebGL ? /*#__PURE__*/_react["default"].createElement(_DefaultVectorLayer["default"], {
           api: api,
           language: language,
           key: baseLayer
@@ -184,7 +185,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 = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -207,33 +209,22 @@ var Map = function Map(props) {
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     showCluster = _useState10[0],
     setShowCluster = _useState10[1];
-  var isDarkMode = (0, _useDarkMode.useDarkMode)();
-  (0, _react.useEffect)(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === _constants.MAP_TYPE_DEFAULT) {
-      setBaseLayer(_constants.MAP_TYPE_NIGHT);
-      onMapTypeChange(_constants.MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === _constants.MAP_TYPE_NIGHT) {
-      setBaseLayer(_constants.MAP_TYPE_DEFAULT);
-      onMapTypeChange(_constants.MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
-  var devicePixelRatio = window.devicePixelRatio || 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, useWebGL);
+    var defaultLayer = (0, _useBaseLayer.getDefaultBaseLayer)(defaultLayers, baseLayer, enableWebGL);
 
     // Instantiate (and display) a map object:
     var mapConfig = {
       zoom: zoom,
       center: center,
       bounds: bounds,
-      pixelRatio: devicePixelRatio
+      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);
 
@@ -248,10 +239,12 @@ var Map = function Map(props) {
     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,
-      group: hereMap,
       map: hereMap,
       mapEvents: hereMapEvents,
       behavior: hereBehavior,
@@ -259,6 +252,7 @@ var Map = function Map(props) {
       ui: getHereUi(hereMap, defaultLayers, showScaleBar),
       utils: (0, _mapUtils.createUtils)(hereMap),
       settings: {
+        enableWebGL: enableWebGL,
         baseLayer: baseLayer,
         mapLayer: activeLayers,
         showCluster: showCluster
@@ -279,7 +273,18 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL]);
+  }, [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 () {
@@ -318,7 +323,7 @@ var Map = function Map(props) {
 
   // Update MapType from outside
   (0, _react.useEffect)(function () {
-    return setBaseLayer(mapType);
+    return handleMapTypeChange(mapType);
   }, [mapType]);
 
   // Update MapLayer from outside
@@ -333,11 +338,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) {
@@ -383,7 +390,9 @@ var Map = function Map(props) {
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/_react["default"].createElement(_context.MapContext.Provider, {
-    value: api
+    value: {
+      api: api
+    }
   }, !hideZoomButtons && /*#__PURE__*/_react["default"].createElement(_ZoomButtons["default"], {
     onZoomIn: handleZoomIn,
     onZoomOut: handleZoomOut
@@ -399,8 +408,8 @@ var Map = function Map(props) {
       onShowClusterChange: handleShowClusterChange,
       mapSettingsTooltip: mapSettingsTooltip
     }
-  }, mapSettings), getBaseLayer(api, baseLayer, language, useWebGL, darkMode), (0, _map["default"])(function (layer) {
-    return getLayer(api, layer, language, useWebGL);
+  }, 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))));
@@ -428,7 +437,8 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  enableWebGL: true,
+  enableDevicePixelRatio: true,
   darkMode: false
 };
 Map.propTypes = {
@@ -457,7 +467,8 @@ Map.propTypes = {
   getApi: _propTypes["default"].func,
   mapSettingsTooltip: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   mapSettings: _propTypes["default"].node,
-  useWebGL: _propTypes["default"].bool,
+  enableWebGL: _propTypes["default"].bool,
+  enableDevicePixelRatio: _propTypes["default"].bool,
   darkMode: _propTypes["default"].bool
 };
 var _default = Map;

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

@@ -88,7 +88,7 @@ var ContextMenu = function ContextMenu(props) {
     contextMenuEvent = props.contextMenuEvent,
     targetPosition = props.targetPosition;
   var mapContext = (0, _react.useContext)(_context.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/lib/es/components/map/components/features/Route.js

@@ -26,7 +26,6 @@ var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to tru
 exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = TO_LESS_LINE_WIDTH_EXCEPTION_MSG;
 var LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 var LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-var BORDER_STROKE_COLOR = 'rgba(255, 255, 255, 1)';
 var BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
 var defaultStyle = {
   width: 5,
@@ -35,14 +34,6 @@ var defaultStyle = {
   borderColor: 'rgba(54, 144, 174, 1)',
   isBorderIncludedInWidth: false
 };
-var defaultArrowStyle = {
-  lineWidth: 10,
-  fillColor: 'rgba(42, 55, 64, 1)',
-  strokeColor: BORDER_STROKE_COLOR,
-  lineDash: [0, 6],
-  lineTailCap: 'arrow-tail',
-  lineHeadCap: 'arrow-head'
-};
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'
 });
@@ -155,7 +146,7 @@ var Route = function Route(props) {
 };
 Route.defaultProps = {
   hasArrows: true,
-  arrowStyle: defaultArrowStyle,
+  arrowStyle: {},
   isReduced: false,
   isRouteAlternative: false,
   markers: []

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

@@ -21,25 +21,30 @@ var Circle = function Circle(_ref) {
     precision = _ref$precision === void 0 ? 60 : _ref$precision,
     style = _ref.style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = (0, _react.useContext)(_context.MapContext);
+  var _useContext = (0, _react.useContext)(_context.MapContext),
+    api = _useContext.api;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     circle = _useState2[0],
     setCircle = _useState2[1];
+
+  // Create a new circle and check for changes on the map itself.
+  // The map instance may change due to rendering changes like webgl vs raster.
+  // In this case, add the circle to the new map instance otherwise it will be gone.
   (0, _react.useEffect)(function () {
     var newCircle = new H.map.Circle(position, radius, {
       style: style,
       precision: parseFloat(precision)
     });
     setCircle(newCircle);
-    context.group.addObject(newCircle);
+    api.map.addObject(newCircle);
     return function () {
-      if (context.group.getObjects().includes(newCircle)) {
-        context.group.removeObject(newCircle);
+      if (api.map.getObjects().includes(newCircle)) {
+        api.map.removeObject(newCircle);
       }
       newCircle.dispose();
     };
-  }, []);
+  }, [api.map]);
   (0, _hooks.useUpdateProp)(circle, 'setCenter', position);
   (0, _hooks.useUpdateProp)(circle, 'setStyle', style);
   (0, _hooks.useUpdateProp)(circle, 'setRadius', radius);

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

@@ -21,6 +21,7 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
     maxZoom = _ref.maxZoom,
     isVisible = _ref.isVisible;
   var context = (0, _react.useContext)(_context.MapContext);
+  var api = context.api;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     group = _useState2[0],
@@ -35,19 +36,21 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
       max: parseFloat(maxZoom)
     });
     newGroup.setVisibility(isVisible);
-    context.group.addObject(newGroup);
+    api.map.addObject(newGroup);
     setGroup(newGroup);
     var newChildApi = _objectSpread(_objectSpread({}, context), {}, {
-      group: newGroup
+      api: _objectSpread(_objectSpread({}, api), {}, {
+        group: newGroup
+      })
     });
     setChildApi(newChildApi);
     return function () {
-      if (context.group.getObjects().includes(newGroup)) {
-        context.group.removeObject(newGroup);
+      if (api.map.getObjects().includes(newGroup)) {
+        api.map.removeObject(newGroup);
       }
       newGroup.dispose();
     };
-  }, []);
+  }, [api.map]);
   (0, _react.useEffect)(function () {
     if (group) {
       group.setVisibility(isVisible);

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

@@ -29,7 +29,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 = (0, _react.useContext)(_context.MapContext);
+  var _useContext = (0, _react.useContext)(_context.MapContext),
+    api = _useContext.api;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     polygon = _useState2[0],
@@ -38,15 +39,15 @@ var Polygon = function Polygon(_ref) {
     var newPolygon = new H.map.Polygon(createGeometry(points), {
       style: style
     });
-    context.group.addObject(newPolygon);
+    api.map.addObject(newPolygon);
     setPolygon(newPolygon);
     return function () {
-      if (context.group.getObjects().includes(newPolygon)) {
-        context.group.removeObject(newPolygon);
+      if (api.map.getObjects().includes(newPolygon)) {
+        api.map.removeObject(newPolygon);
       }
       newPolygon.dispose();
     };
-  }, []);
+  }, [api.map]);
   (0, _react.useEffect)(function () {
     if (polygon) {
       polygon.setGeometry(createGeometry(points));

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,8 +13,8 @@ var _context = require("../../context");
 var _MapException = _interopRequireDefault(require("../../../exceptions/MapException"));
 var _hooks = require("../../../utils/hooks");
 var _eventHandling = require("../../../utils/eventHandling");
-/* eslint-disable no-undef */
-
+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 MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = MISSING_GEOMETRY_PROPS_EXCEPTION_MSG;
 var WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
@@ -25,7 +26,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 = (0, _react.useContext)(_context.MapContext);
+  var _useContext = (0, _react.useContext)(_context.MapContext),
+    api = _useContext.api;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     polyline = _useState2[0],
@@ -42,18 +44,39 @@ var Polyline = function Polyline(_ref) {
       style: style
     });
     if (hasArrows) {
-      // Create a patterned polyline:
-
-      // Non-legacy version:
-      var arrowLineStyle = new H.map.SpatialStyle({
-        width: 5,
-        lineWidth: 10,
-        strokeColor: 'rgba(255, 255, 255, 0)'
-      });
-      var routeArrows = new H.map.Polyline(geometry, {
-        style: arrowLineStyle
-      });
-      routeArrows.setArrows(arrowStyle);
+      var routeArrows;
+      if (api.settings.enableWebGL) {
+        // Create a patterned polyline
+        var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
+          lineWidth: 10,
+          strokeColor: 'rgba(0, 0, 0, 0.8)',
+          lineDash: [0, 3],
+          lineDashOffset: 1.6,
+          lineTailCap: 'arrow-tail',
+          lineHeadCap: 'arrow-head'
+        }));
+        routeArrows = new H.map.Polyline(geometry, {
+          style: arrowLineStyle
+        });
+      } else {
+        // Non WebGL way - Create a patterned polyline
+        var defaultArrowStyle = {
+          lineWidth: 2,
+          fillColor: 'rgba(42, 55, 64, 1)',
+          strokeColor: 'rgba(0, 0, 0, 0.8)',
+          lineDash: [0, 4],
+          lineTailCap: 'arrow-tail',
+          lineHeadCap: 'arrow-head'
+        };
+        var _arrowLineStyle = new H.map.SpatialStyle({
+          lineWidth: 10,
+          strokeColor: 'rgba(255, 255, 255, 0)'
+        });
+        routeArrows = new H.map.Polyline(geometry, {
+          style: _arrowLineStyle,
+          arrows: defaultArrowStyle
+        });
+      }
 
       // create a group that represents the route line and contains
       // outline and the pattern
@@ -61,43 +84,20 @@ var Polyline = function Polyline(_ref) {
     } else {
       lineGroup.addObjects([line]);
     }
-    context.group.addObject(lineGroup);
+    api.map.addObject(lineGroup);
     setPolyline(lineGroup);
     return function () {
-      // cleanup
-      //console.log('cleanup polyline');
-
       (0, _eventHandling.removeEventListenerMap)(lineGroup);
       lineGroup.forEach(function (singleLine) {
         lineGroup.removeObject(singleLine);
         singleLine.dispose();
       });
-      if (context.group.getObjects().includes(lineGroup)) {
-        context.group.removeObject(lineGroup);
+      if (api.map.getObjects().includes(lineGroup)) {
+        api.map.removeObject(lineGroup);
       }
       lineGroup.dispose();
     };
-  }, [geometry, style, hasArrows, arrowStyle]);
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach((line, index) => {
-              if (index === 0) {
-                  line.setStyle(style);
-              } else {
-                  line.setStyle(arrowStyle);
-              }
-          });
-      }
-  }, [style, arrowStyle]);*/
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach(line => line.setGeometry(geometry));
-      }
-  }, [geometry]);*/
-
-  //useUpdateProp(polyline, 'setStyle', style);
+  }, [api.map, geometry, style, hasArrows, arrowStyle]);
   (0, _hooks.useUpdateEventListenerMap)(polyline, eventListenerMap);
   return null;
 };

package/lib/es/components/map/components/features/basics/marker/DomMarker.js

@@ -16,6 +16,11 @@ var _proptypes = _interopRequireDefault(require("../../../../utils/proptypes"));
 var _eventHandling = require("../../../../utils/eventHandling");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
+// Should be deprecated...
+// Here Documentation:
+//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed 
+//     on the map (for example animated interactive SVG). Otherwise a H.map.Marker should be preferred for performance reasons.
+//
 var DomMarker = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DomMarker, _React$Component);
   var _super = _createSuper(DomMarker);
@@ -27,7 +32,7 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     _this.marker = new H.map.DomMarker(_this.convertPosition(props.position), {
       icon: icon
     });
-    context.api.group.addObject(_this.marker);
+    context.api.map.addObject(_this.marker);
     (0, _eventHandling.addEventListenerMap)(_this.marker, props.eventListenerMap, _this.context.api.map);
     return _this;
   }
@@ -54,8 +59,8 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       (0, _eventHandling.removeEventListenerMap)(this.marker);
-      if (this.context.api.group.includes(this.marker)) {
-        this.context.api.group.removeObject(this.marker);
+      if (this.context.api.map.includes(this.marker)) {
+        this.context.api.map.removeObject(this.marker);
       }
       this.marker.dispose();
     }