@rio-cloud/rio-uikit 0.16.2-beta.11 → 0.16.2-beta.13

package/components/map/components/Map.js

@@ -59,14 +59,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 +79,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 +173,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),
@@ -209,13 +210,13 @@ var Map = function Map(props) {
       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 +269,7 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL]);
+  }, [enableWebGL, enableDevicePixelRatio]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -388,8 +389,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 +418,8 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  enableWebGL: true,
+  enableDevicePixelRatio: true,
   darkMode: false
 };
 Map.propTypes = {
@@ -446,7 +448,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/layers/MarkerLayer.js

@@ -33,6 +33,8 @@ var MarkerLayer = function MarkerLayer(props) {
 MarkerLayer.propTypes = {
   // api: mapProps.api,
   simpleTheme: mapProps.clusterTheme,
-  clusterDissolvable: PropTypes.bool
+  clusterDissolvable: PropTypes.bool,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default MarkerLayer;

package/components/map/components/features/layers/baselayers/DefaultRasterLayer.js

@@ -11,7 +11,8 @@ var DefaultRasterLayer = function DefaultRasterLayer(props) {
     language: language,
     mapType: MAP_TYPE_DEFAULT,
     additionalParameters: {
-      style: 'alps'
+      // should not be used as Vector map does not support it it would different anyhow
+      //style: 'alps',
     }
   });
   return null;

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -41,9 +41,10 @@ export var useBaseLayer = function useBaseLayer(props) {
   useEffect(function () {
     if (!baseLayer) {
       var additionalParametersWithLocale = _objectSpread(_objectSpread({}, additionalParameters), {}, {
-        lg: mapToLongLocale(language),
-        ppi: getPPI()
+        lg: mapToLongLocale(language)
+        // ppi: getPPI(),
       });
+
       var defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
       var newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);
       api.map.setBaseLayer(newBaseLayer);

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -12,6 +12,16 @@ var convertData = function convertData(data, converterFunc) {
   return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
 };
 var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
+var getClusterStrategy = function getClusterStrategy(strategy) {
+  switch (strategy) {
+    case 'GRID':
+      return H.clustering.Provider.Strategy.GRID;
+    case 'DYNAMICGRID':
+      return H.clustering.Provider.Strategy.DYNAMICGRID;
+    default:
+      return H.clustering.Provider.Strategy.FASTGRID;
+  }
+};
 var ClusterLayer = function ClusterLayer(_ref) {
   var data = _ref.data,
     dataConverter = _ref.dataConverter,
@@ -20,7 +30,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
     maxZoom = _ref.maxZoom,
     _ref$clusterTheme = _ref.clusterTheme,
     clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
-    eventListenerMap = _ref.eventListenerMap;
+    eventListenerMap = _ref.eventListenerMap,
+    clusterStrategy = _ref.clusterStrategy,
+    _ref$eps = _ref.eps,
+    eps = _ref$eps === void 0 ? 100 : _ref$eps;
   var context = useContext(MapContext);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -29,8 +42,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
   useEffect(function () {
     var newProviderOptions = {
       clusteringOptions: {
-        strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
-        eps: 100,
+        strategy: getClusterStrategy(clusterStrategy),
+        eps: eps,
         minWeight: minWeight ? parseInt(minWeight, 10) : 2
       },
       min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -67,6 +80,8 @@ ClusterLayer.propTpyes = {
   minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   clusterTheme: mapProps.clusterTheme,
-  eventListenerMap: PropTypes.object
+  eventListenerMap: PropTypes.object,
+  clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: PropTypes.number
 };
 export default ClusterLayer;

package/components/mapMarker/ClusterMapMarker.js

@@ -28,7 +28,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var baseColor = getColorMapping(colorClass) || markerColor;
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/mapMarker/SingleMapMarker.js

@@ -42,9 +42,6 @@ var SingleMapMarker = function SingleMapMarker(props) {
     textColor = props.textColor,
     warningCount = props.warningCount,
     fixed = props.fixed;
-
-  // TODO: check if we still need "colorClass"
-
   if (colorClass) {
     // warnung
   }
@@ -55,12 +52,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-
-  // const baseColorWithMode = isDarkMode ?
-
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/hooks/useScrollPosition.js

@@ -42,8 +42,8 @@ var useScrollPosition = function useScrollPosition(target) {
     else {
       setTargetElement(target);
     }
-    return {
-      "if": function _if(checkForModuleContent) {
+    return function () {
+      if (checkForModuleContent) {
         clearInterval(check);
       }
     };

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

@@ -70,14 +70,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 +90,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 +184,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),
@@ -220,13 +221,13 @@ var Map = function Map(props) {
       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 = {
@@ -279,7 +280,7 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL]);
+  }, [enableWebGL, enableDevicePixelRatio]);
 
   // Update BoundingBox from outside
   (0, _react.useEffect)(function () {
@@ -399,8 +400,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 +429,8 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  enableWebGL: true,
+  enableDevicePixelRatio: true,
   darkMode: false
 };
 Map.propTypes = {
@@ -457,7 +459,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/layers/MarkerLayer.js

@@ -42,7 +42,9 @@ var MarkerLayer = function MarkerLayer(props) {
 MarkerLayer.propTypes = {
   // api: mapProps.api,
   simpleTheme: _proptypes["default"].clusterTheme,
-  clusterDissolvable: _propTypes["default"].bool
+  clusterDissolvable: _propTypes["default"].bool,
+  clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: _propTypes["default"].number
 };
 var _default = MarkerLayer;
 exports["default"] = _default;

package/lib/es/components/map/components/features/layers/baselayers/DefaultRasterLayer.js

@@ -16,7 +16,8 @@ var DefaultRasterLayer = function DefaultRasterLayer(props) {
     language: language,
     mapType: _constants.MAP_TYPE_DEFAULT,
     additionalParameters: {
-      style: 'alps'
+      // should not be used as Vector map does not support it it would different anyhow
+      //style: 'alps',
     }
   });
   return null;

package/lib/es/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -48,9 +48,10 @@ var useBaseLayer = function useBaseLayer(props) {
   (0, _react.useEffect)(function () {
     if (!baseLayer) {
       var additionalParametersWithLocale = _objectSpread(_objectSpread({}, additionalParameters), {}, {
-        lg: (0, _localization.mapToLongLocale)(language),
-        ppi: (0, _mapUtils.getPPI)()
+        lg: (0, _localization.mapToLongLocale)(language)
+        // ppi: getPPI(),
       });
+
       var defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
       var newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);
       api.map.setBaseLayer(newBaseLayer);

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -20,6 +20,16 @@ var convertData = function convertData(data, converterFunc) {
   return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
 };
 var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
+var getClusterStrategy = function getClusterStrategy(strategy) {
+  switch (strategy) {
+    case 'GRID':
+      return H.clustering.Provider.Strategy.GRID;
+    case 'DYNAMICGRID':
+      return H.clustering.Provider.Strategy.DYNAMICGRID;
+    default:
+      return H.clustering.Provider.Strategy.FASTGRID;
+  }
+};
 var ClusterLayer = function ClusterLayer(_ref) {
   var data = _ref.data,
     dataConverter = _ref.dataConverter,
@@ -28,7 +38,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
     maxZoom = _ref.maxZoom,
     _ref$clusterTheme = _ref.clusterTheme,
     clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
-    eventListenerMap = _ref.eventListenerMap;
+    eventListenerMap = _ref.eventListenerMap,
+    clusterStrategy = _ref.clusterStrategy,
+    _ref$eps = _ref.eps,
+    eps = _ref$eps === void 0 ? 100 : _ref$eps;
   var context = (0, _react.useContext)(_context.MapContext);
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -37,8 +50,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
   (0, _react.useEffect)(function () {
     var newProviderOptions = {
       clusteringOptions: {
-        strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
-        eps: 100,
+        strategy: getClusterStrategy(clusterStrategy),
+        eps: eps,
         minWeight: minWeight ? parseInt(minWeight, 10) : 2
       },
       min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -75,7 +88,9 @@ ClusterLayer.propTpyes = {
   minZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   maxZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   clusterTheme: _proptypes["default"].clusterTheme,
-  eventListenerMap: _propTypes["default"].object
+  eventListenerMap: _propTypes["default"].object,
+  clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
+  eps: _propTypes["default"].number
 };
 var _default = ClusterLayer;
 exports["default"] = _default;

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -35,7 +35,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var baseColor = getColorMapping(colorClass) || markerColor;
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -49,9 +49,6 @@ var SingleMapMarker = function SingleMapMarker(props) {
     textColor = props.textColor,
     warningCount = props.warningCount,
     fixed = props.fixed;
-
-  // TODO: check if we still need "colorClass"
-
   if (colorClass) {
     // warnung
   }
@@ -62,12 +59,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-
-  // const baseColorWithMode = isDarkMode ?
-
   var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/hooks/useScrollPosition.js

@@ -49,8 +49,8 @@ var useScrollPosition = function useScrollPosition(target) {
     else {
       setTargetElement(target);
     }
-    return {
-      "if": function _if(checkForModuleContent) {
+    return function () {
+      if (checkForModuleContent) {
         clearInterval(check);
       }
     };

package/lib/es/styles/design/border.less

@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/design/colors.less

@@ -72,7 +72,6 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .bg-@{key} {
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/design/text.less

@@ -55,7 +55,6 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
-.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
+// .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
+
 // rating-1
 // rating-2
 // rating-3

package/lib/es/styles/mapping/color-map.less

@@ -115,6 +115,7 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
+  map-marker-text: var(--color-map-marker-text);
   map-marker-active: var(--color-map-marker-active);
   map-marker-asset: var(--color-map-marker-asset);
   map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
   map-marker-route: var(--color-map-marker-route);
 }
 
+@colors-map-marker-night-map: {
+  map-marker-text-night: var(--color-map-marker-text-night);
+  map-marker-active-night: var(--color-map-marker-active-night);
+  map-marker-asset-night: var(--color-map-marker-asset-night);
+  map-marker-poi-night: var(--color-map-marker-poi-night);
+  map-marker-geofence-night: var(--color-map-marker-geofence-night);
+  map-marker-route-night: var(--color-map-marker-route-night);
+}
+
 // Color Map - Rating
 // rating-1
 // rating-2

package/lib/es/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/lib/es/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/lib/es/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/lib/es/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #79e703;
+@color-map-marker-asset-night: #0e8a14;
+@color-map-marker-poi-night: #d212be;
+@color-map-marker-geofence-night: #d7b269;
+@color-map-marker-route-night: #750666;
+@color-map-marker-text-night: #f7ff13;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/lib/es/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/lib/es/types.ts

@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -871,6 +873,9 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    enableWebGl?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -983,6 +988,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.11"
+    "version": "0.16.2-beta.13"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2-beta.11",
+    "version": "0.16.2-beta.13",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/design/border.less

@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/styles/design/colors.less

@@ -72,7 +72,6 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .bg-@{key} {
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3

package/styles/design/text.less

@@ -55,7 +55,6 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
-.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
+// .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
+
 // rating-1
 // rating-2
 // rating-3

package/styles/mapping/color-map.less

@@ -115,6 +115,7 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
+  map-marker-text: var(--color-map-marker-text);
   map-marker-active: var(--color-map-marker-active);
   map-marker-asset: var(--color-map-marker-asset);
   map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
   map-marker-route: var(--color-map-marker-route);
 }
 
+@colors-map-marker-night-map: {
+  map-marker-text-night: var(--color-map-marker-text-night);
+  map-marker-active-night: var(--color-map-marker-active-night);
+  map-marker-asset-night: var(--color-map-marker-asset-night);
+  map-marker-poi-night: var(--color-map-marker-poi-night);
+  map-marker-geofence-night: var(--color-map-marker-geofence-night);
+  map-marker-route-night: var(--color-map-marker-route-night);
+}
+
 // Color Map - Rating
 // rating-1
 // rating-2

package/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #79e703;
+@color-map-marker-asset-night: #0e8a14;
+@color-map-marker-poi-night: #d212be;
+@color-map-marker-geofence-night: #d7b269;
+@color-map-marker-route-night: #750666;
+@color-map-marker-text-night: #f7ff13;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/types.ts

@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
     maxZoom?: string | number;
     clusterTheme?: ClusterTheme;
     eventListenerMap: EventListenerMap;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface ClusterMapMarkerProps {
@@ -871,6 +873,9 @@ export interface MapProps {
     getApi?: Function;
     mapSettingsTooltip?: string | React.ReactNode;
     mapSettings?: React.ReactNode;
+    enableWebGl?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: any;
 }
 
 export interface MapBoundingBoxButtonProps {
@@ -983,6 +988,8 @@ export interface MarkerProps {
 export interface MarkerLayerProps {
     simpleTheme?: ClusterTheme;
     clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
 }
 
 export interface MenuItem {

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.2-beta.11"
+    "version": "0.16.2-beta.13"
 }