@rio-cloud/rio-uikit 1.4.0 → 1.5.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = exports.MISSING_POSITIONS_EXCEPTION_MSG = void 0;
+exports.ROUTE_COLOR_WHITE = exports.ROUTE_COLOR_SUCCESS = exports.ROUTE_COLOR_WARNING = exports.ROUTE_COLOR_DANGER = exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED = exports.DEFAULT_BORDER_STROKE_COLOR = exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = exports.DEFAULT_LINE_STROKE_COLOR_REDUCED = exports.DEFAULT_LINE_STROKE_COLOR = exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = exports.MISSING_POSITIONS_EXCEPTION_MSG = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -11,21 +11,29 @@ const Marker_1 = tslib_1.__importDefault(require("./basics/Marker"));
 const MapException_1 = tslib_1.__importDefault(require("../../exceptions/MapException"));
 exports.MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 positions';
 exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
-const LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
-const LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-const BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+exports.DEFAULT_LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
+exports.DEFAULT_LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
+exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = 'rgb(200, 243, 247)';
+exports.DEFAULT_BORDER_STROKE_COLOR = 'rgba(22, 100, 141, 1)';
+exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+// Both works, rgb or hex - keep in mind that these state colors may change
+// so use this constants instead of actual color values in the service
+exports.ROUTE_COLOR_DANGER = '#e22837';
+exports.ROUTE_COLOR_WARNING = '#ff8e3c';
+exports.ROUTE_COLOR_SUCCESS = '#5cb85c';
+exports.ROUTE_COLOR_WHITE = 'rgba(255, 255, 255, 1)';
 const DEFAULT_WIDTH = 5;
 const DEFAULT_BORDER_WIDTH = 2;
 const defaultStyle = {
     width: DEFAULT_WIDTH,
-    color: LINE_STROKE_COLOR,
+    color: exports.DEFAULT_LINE_STROKE_COLOR,
     borderWidth: DEFAULT_BORDER_WIDTH,
-    borderColor: 'rgba(54, 144, 174, 1)',
+    borderColor: exports.DEFAULT_BORDER_STROKE_COLOR,
     isBorderIncludedInWidth: false,
 };
-const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: 'rgb(218,253,255)' });
+const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE });
 const Route = (props) => {
-    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], eventListenerMap, } = props;
+    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], customData, eventListenerMap, } = props;
     const [lineString, setLineString] = (0, react_1.useState)();
     const [routeStyle, setRouteStyle] = (0, react_1.useState)();
     const [borderStyle, setBorderStyle] = (0, react_1.useState)();
@@ -55,17 +63,17 @@ const Route = (props) => {
     };
     const updateStyle = (updatedStyle, isReducedStyle, isRouteAlternativeStyle) => {
         const mergedStyle = Object.assign(Object.assign({}, (isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle)), updatedStyle);
-        const { color, width, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
+        const { color, width = DEFAULT_WIDTH, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
         setBorderWidth(isReducedStyle ? 0 : mergedBorderWidth);
         if (isBorderIncludedInWidth && mergedBorderWidth >= width) {
             throw new MapException_1.default(exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG);
         }
-        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
-        setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? exports.DEFAULT_LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
     };
     if (!lineString) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [borderWidth > 0 && ((0, jsx_runtime_1.jsx)(Polyline_1.default, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle })), (0, jsx_runtime_1.jsx)(Polyline_1.default, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle }), startIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && ((0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), (0, isArray_1.default)(markers) && markers.map(marker => marker)] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [borderWidth > 0 && ((0, jsx_runtime_1.jsx)(Polyline_1.default, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle, customData: customData })), (0, jsx_runtime_1.jsx)(Polyline_1.default, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle, customData: customData }), startIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && ((0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), (0, isArray_1.default)(markers) && markers.map(marker => marker)] }));
 };
 exports.default = Route;

package/lib/es/components/map/components/features/basics/Polygon.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="heremaps" />
 import type { Position } from '../../../utils/mapTypes';
 import type { EventListenerMap } from '../../../utils/eventHandling';
+export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
 export type PolygonPoints = Position[] & Record<string, any>;
 export type PolygonProps = {
     points: PolygonPoints;

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

@@ -1,10 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorMapHighlight = exports.colorMapRating = exports.colorMapMarker = exports.colorMapStatus = exports.colorMapBrand = exports.colorMapGray = exports.colorMapWarmup = exports.colorMapColdplay = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const MapContext_1 = require("../../MapContext");
 const hooks_1 = require("../../../utils/hooks");
+var polygonColors_1 = require("./polygonColors");
+Object.defineProperty(exports, "colorMapColdplay", { enumerable: true, get: function () { return polygonColors_1.colorMapColdplay; } });
+Object.defineProperty(exports, "colorMapWarmup", { enumerable: true, get: function () { return polygonColors_1.colorMapWarmup; } });
+Object.defineProperty(exports, "colorMapGray", { enumerable: true, get: function () { return polygonColors_1.colorMapGray; } });
+Object.defineProperty(exports, "colorMapBrand", { enumerable: true, get: function () { return polygonColors_1.colorMapBrand; } });
+Object.defineProperty(exports, "colorMapStatus", { enumerable: true, get: function () { return polygonColors_1.colorMapStatus; } });
+Object.defineProperty(exports, "colorMapMarker", { enumerable: true, get: function () { return polygonColors_1.colorMapMarker; } });
+Object.defineProperty(exports, "colorMapRating", { enumerable: true, get: function () { return polygonColors_1.colorMapRating; } });
+Object.defineProperty(exports, "colorMapHighlight", { enumerable: true, get: function () { return polygonColors_1.colorMapHighlight; } });
 const createGeometry = (points) => {
     const lineString = new H.geo.LineString();
     points.forEach(p => {

package/lib/es/components/map/components/features/basics/Polyline.d.ts

@@ -2,11 +2,13 @@
 import { type EventListenerMap } from '../../../utils/eventHandling';
 export declare const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: Polyline without geometry makes no sense";
 export declare const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: property geometry must be of type H.geo.LineString";
+export type ArrowStyle = H.map.Polyline.Options;
 export type PolylineProps = {
     hasArrows?: boolean;
-    arrowStyle?: object;
+    arrowStyle?: ArrowStyle;
     geometry: H.geo.LineString;
     style?: H.map.SpatialStyle;
+    customData?: object;
     eventListenerMap?: EventListenerMap;
 };
 declare const Polyline: (props: PolylineProps) => null;

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

@@ -11,7 +11,7 @@ const rendering_1 = require("../../../utils/rendering");
 exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
 const Polyline = (props) => {
-    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, customData, eventListenerMap, } = props;
     const { api, enableWebGL, baseLayer } = (0, MapContext_1.useMapContext)();
     const [polyline, setPolyline] = (0, react_1.useState)();
     if (!geometry) {
@@ -22,32 +22,21 @@ const Polyline = (props) => {
     }
     (0, react_1.useEffect)(() => {
         var _a;
-        const lineGroup = new H.map.Group();
+        const lineGroup = new H.map.Group({ data: customData });
         const line = new H.map.Polyline(geometry, { style });
         if (hasArrows) {
             let routeArrows;
             if ((0, rendering_1.isVectorBased)(enableWebGL, baseLayer)) {
                 // WebGL way - Create a patterned polyline
                 routeArrows = new H.map.Polyline(geometry, {
-                    style: {
-                        strokeColor: 'rgba(42, 55, 64, 1)',
-                        lineWidth: 5,
-                        lineDash: [1.8, 4],
+                    style: Object.assign({ strokeColor: 'rgba(42, 55, 64, 1)', lineWidth: 5, lineDash: [1.8, 4], 
                         // @ts-ignore-next-line - the types are outdated here
-                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
-                    },
+                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW }, arrowStyle),
                 });
             }
             else {
                 // Pixel map way - Create a patterned polyline
-                const 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',
-                };
+                const defaultArrowStyle = Object.assign({ lineWidth: 2, fillColor: 'rgba(42, 55, 64, 1)', strokeColor: 'rgba(0, 0, 0, 0.8)', lineDash: [0, 4], lineTailCap: 'arrow-tail', lineHeadCap: 'arrow-head' }, arrowStyle);
                 const arrowLineStyle = new H.map.SpatialStyle({
                     lineWidth: 10,
                     strokeColor: 'rgba(255, 255, 255, 0)',

package/lib/es/components/map/components/features/basics/polygonColors.d.ts

@@ -0,0 +1,252 @@
+export declare const colorMapColdplay: {
+    'color-coldplay-wine': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-aubergine': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-kashmir': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-fountain': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-turquoise': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-bermuda': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-moos': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-primrose': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-khaki': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapWarmup: {
+    'color-warmup-crimson': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-victoria': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cadillac': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-raspberry': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cerise': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-charm': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-salmon': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cherokee': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-corn': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapGray: {
+    'gray-darkest': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-darker': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-dark': {
+        stroke: string;
+        fill: string;
+    };
+    gray: {
+        stroke: string;
+        fill: string;
+    };
+    'gray-light': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-lighter': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-lightest': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-decent': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapBrand: {
+    'brand-primary': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-secondary': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-info': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-success': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-warning': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-danger': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapStatus: {
+    'color-status-available': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-driving': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-resting': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-working': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapMarker: {
+    'color-map-marker-text': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-active': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-asset': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-poi': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-geofence': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-route': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-info': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-success': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-warning': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-danger': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapRating: {
+    'color-rating-1': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-2': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-3': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-4': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-5': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapHighlight: {
+    'color-highlight-darkest': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-darker': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-dark': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-light': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-lighter': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-lightest': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-decent': {
+        stroke: string;
+        fill: string;
+    };
+};

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

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorMapHighlight = exports.colorMapRating = exports.colorMapMarker = exports.colorMapStatus = exports.colorMapBrand = exports.colorMapGray = exports.colorMapWarmup = exports.colorMapColdplay = void 0;
+exports.colorMapColdplay = {
+    'color-coldplay-wine': {
+        stroke: 'rgba(82, 13, 78, 0.65)',
+        fill: 'rgba(82, 13, 78, 0.25)',
+    },
+    'color-coldplay-aubergine': {
+        stroke: 'rgba(90, 72, 118, 0.65)',
+        fill: 'rgba(90, 72, 118, 0.25)',
+    },
+    'color-coldplay-kashmir': {
+        stroke: 'rgba(83, 110, 139, 0.65)',
+        fill: 'rgba(83, 110, 139, 0.25)',
+    },
+    'color-coldplay-fountain': {
+        stroke: 'rgba(103, 171, 197, 0.65)',
+        fill: 'rgba(103, 171, 197, 0.25)',
+    },
+    'color-coldplay-turquoise': {
+        stroke: 'rgba(78, 204, 193, 0.65)',
+        fill: 'rgba(78, 204, 193, 0.25)',
+    },
+    'color-coldplay-bermuda': {
+        stroke: 'rgba(121, 212, 179, 0.65)',
+        fill: 'rgba(121, 212, 179, 0.25)',
+    },
+    'color-coldplay-moos': {
+        stroke: 'rgba(161, 218, 163, 0.65)',
+        fill: 'rgba(161, 218, 163, 0.25)',
+    },
+    'color-coldplay-primrose': {
+        stroke: 'rgba(199, 226, 145, 0.65)',
+        fill: 'rgba(199, 226, 145, 0.25)',
+    },
+    'color-coldplay-khaki': {
+        stroke: 'rgba(240, 235, 131, 0.65)',
+        fill: 'rgba(240, 235, 131, 0.25)',
+    },
+};
+exports.colorMapWarmup = {
+    'color-warmup-crimson': {
+        stroke: 'rgba(49, 20, 79, 0.65)',
+        fill: 'rgba(49, 20, 79, 0.25)',
+    },
+    'color-warmup-victoria': {
+        stroke: 'rgba(73, 61, 109, 0.65)',
+        fill: 'rgba(73, 61, 109, 0.25)',
+    },
+    'color-warmup-cadillac': {
+        stroke: 'rgba(126, 62, 114, 0.65)',
+        fill: 'rgba(126, 62, 114, 0.25)',
+    },
+    'color-warmup-raspberry': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'color-warmup-cerise': {
+        stroke: 'rgba(231, 36, 114, 0.65)',
+        fill: 'rgba(231, 36, 114, 0.25)',
+    },
+    'color-warmup-charm': {
+        stroke: 'rgba(201, 119, 141, 0.65)',
+        fill: 'rgba(201, 119, 141, 0.25)',
+    },
+    'color-warmup-salmon': {
+        stroke: 'rgba(241, 149, 136, 0.65)',
+        fill: 'rgba(241, 149, 136, 0.25)',
+    },
+    'color-warmup-cherokee': {
+        stroke: 'rgba(245, 187, 137, 0.65)',
+        fill: 'rgba(245, 187, 137, 0.25)',
+    },
+    'color-warmup-corn': {
+        stroke: 'rgba(253, 224, 130, 0.65)',
+        fill: 'rgba(253, 224, 130, 0.25)',
+    },
+};
+exports.colorMapGray = {
+    'gray-darkest': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'gray-darker': {
+        stroke: 'rgba(76, 86, 103, 0.65)',
+        fill: 'rgba(76, 86, 103, 0.25)',
+    },
+    'gray-dark': {
+        stroke: 'rgba(105, 122, 139, 0.65)',
+        fill: 'rgba(105, 122, 139, 0.25)',
+    },
+    gray: {
+        stroke: 'rgba(167, 175, 187, 0.65)',
+        fill: 'rgba(167, 175, 187, 0.25)',
+    },
+    'gray-light': {
+        stroke: 'rgba(208, 216, 222, 0.65)',
+        fill: 'rgba(208, 216, 222, 0.25)',
+    },
+    'gray-lighter': {
+        stroke: 'rgba(229, 235, 240, 0.65)',
+        fill: 'rgba(229, 235, 240, 0.25)',
+    },
+    'gray-lightest': {
+        stroke: 'rgba(246, 248, 249, 0.65)',
+        fill: 'rgba(246, 248, 249, 0.25)',
+    },
+    'gray-decent': {
+        stroke: 'rgba(253, 253, 253, 0.65)',
+        fill: 'rgba(253, 253, 253, 0.25)',
+    },
+};
+exports.colorMapBrand = {
+    'brand-primary': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'brand-secondary': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'brand-info': {
+        stroke: 'rgba(75, 128, 166, 0.65)',
+        fill: 'rgba(75, 128, 166, 0.25)',
+    },
+    'brand-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'brand-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'brand-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+exports.colorMapStatus = {
+    'color-status-available': {
+        stroke: 'rgba(35, 155, 125, 0.65)',
+        fill: 'rgba(35, 155, 125, 0.25)',
+    },
+    'color-status-driving': {
+        stroke: 'rgba(54, 144, 174, 0.65)',
+        fill: 'rgba(54, 144, 174, 0.25)',
+    },
+    'color-status-resting': {
+        stroke: 'rgba(98, 107, 114, 0.65)',
+        fill: 'rgba(98, 107, 114, 0.25)',
+    },
+    'color-status-working': {
+        stroke: 'rgba(148, 72, 139, 0.65)',
+        fill: 'rgba(148, 72, 139, 0.25)',
+    },
+};
+exports.colorMapMarker = {
+    'color-map-marker-text': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-active': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-asset': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'color-map-marker-poi': {
+        stroke: 'rgba(203, 57, 149, 0.65)',
+        fill: 'rgba(203, 57, 149, 0.25)',
+    },
+    'color-map-marker-geofence': {
+        stroke: 'rgba(242, 84, 95, 0.65)',
+        fill: 'rgba(242, 84, 95, 0.25)',
+    },
+    'color-map-marker-route': {
+        stroke: 'rgba(54, 175, 215, 0.65)',
+        fill: 'rgba(54, 175, 215, 0.25)',
+    },
+    'color-map-marker-info': {
+        stroke: 'rgba(63, 117, 155, 0.65)',
+        fill: 'rgba(63, 117, 155, 0.25)',
+    },
+    'color-map-marker-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-map-marker-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-map-marker-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+exports.colorMapRating = {
+    'color-rating-1': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+    'color-rating-2': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-rating-3': {
+        stroke: 'rgba(248, 197, 117, 0.65)',
+        fill: 'rgba(248, 197, 117, 0.25)',
+    },
+    'color-rating-4': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-rating-5': {
+        stroke: 'rgba(75, 146, 76, 0.65)',
+        fill: 'rgba(75, 146, 76, 0.25)',
+    },
+};
+exports.colorMapHighlight = {
+    'color-highlight-darkest': {
+        stroke: 'rgba(21, 75, 86, 0.65)',
+        fill: 'rgba(21, 75, 86, 0.25)',
+    },
+    'color-highlight-darker': {
+        stroke: 'rgba(32, 110, 126, 0.65)',
+        fill: 'rgba(32, 110, 126, 0.25)',
+    },
+    'color-highlight-dark': {
+        stroke: 'rgba(38, 136, 151, 0.65)',
+        fill: 'rgba(38, 136, 151, 0.25)',
+    },
+    'color-highlight': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'color-highlight-light': {
+        stroke: 'rgba(141, 219, 227, 0.65)',
+        fill: 'rgba(141, 219, 227, 0.25)',
+    },
+    'color-highlight-lighter': {
+        stroke: 'rgba(206, 240, 243, 0.65)',
+        fill: 'rgba(206, 240, 243, 0.25)',
+    },
+    'color-highlight-lightest': {
+        stroke: 'rgba(235, 249, 250, 0.65)',
+        fill: 'rgba(235, 249, 250, 0.25)',
+    },
+    'color-highlight-decent': {
+        stroke: 'rgba(243, 251, 252, 0.65)',
+        fill: 'rgba(243, 251, 252, 0.25)',
+    },
+};

package/lib/es/components/map/utils/mapTypes.d.ts

@@ -161,6 +161,6 @@ export type IncidentDataPoint = {
     roadClosed: boolean;
     position: Position;
 };
-export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger"];
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger", "bg-map-marker-restrictions"];
 export type MarkerColor = (typeof markerColorOptions)[number];
 export declare const markerColorMapping: Record<MarkerColor, string>;