@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.3

package/ColorScheme.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/ColorScheme' {
+    export function getColorScheme(): string;
+    export function setColorScheme(scheme: 'dark' | 'light' | 'default' | 'system'): void;
+}

package/ColorScheme.js

@@ -0,0 +1,2 @@
+import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';
+export { _getColorScheme as getColorScheme, _setColorScheme as setColorScheme };

package/Colors.js

@@ -1,2 +1,2 @@
-import _colors from './styles/shared/colors.json';
+import _colors from './styles/variables/colors.json';
 export { _colors as default };

package/TruckLayer.js

@@ -1,2 +1,2 @@
-import { default as _TruckLayer } from './components/map/components/features/layers/TruckLayer';
+import { default as _TruckLayer } from './components/map/components/features/layers/RoadRestrictionLayer';
 export { _TruckLayer as default };

package/components/assetTree/Tree.js

@@ -643,7 +643,7 @@ Tree.propTypes = {
       firstName: PropTypes.string,
       lastName: PropTypes.string.isRequired
     })]).isRequired,
-    info: PropTypes.string,
+    info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     type: PropTypes.string.isRequired,
     groupIds: PropTypes.arrayOf(PropTypes.string),
     className: PropTypes.string

package/components/charts/chartHelper.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import colors from '../../styles/shared/colors.json';
+import colors from '../../styles/variables/colors.json';
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
 export var defaultChartColors = Object.keys(colors).reverse().filter(function (key) {
   return !brightColors.includes(key);

package/components/map/components/Map.js

@@ -4,8 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _PropTypes$shape;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/* eslint-disable no-undef, camelcase */
-
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import isFunction from 'lodash/fp/isFunction';
@@ -15,22 +13,55 @@ import throttle from 'lodash/fp/throttle';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, TILE_SIZE, HIGH_RES_PPI } from './constants';
-// import MapSettings from './features/old/MapSettings';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, TILE_SIZE } from './constants';
 import ZoomButtons from './features/settings/ZoomButtons';
 import IncidentsLayer from './features/layers/IncidentsLayer';
 import TrafficLayer from './features/layers/TrafficLayer';
-import TruckLayer from './features/layers/TruckLayer';
-import DefaultLayer from './features/layers/baselayers/DefaultLayer';
+import RoadRestrictionLayer from './features/layers/RoadRestrictionLayer';
+import DefaultVectorLayer from './features/layers/baselayers/DefaultVectorLayer';
+import DefaultRasterLayer from './features/layers/baselayers/DefaultRasterLayer';
 import FleetStyleLayer from './features/layers/baselayers/FleetStyleLayer';
 import SatelliteLayer from './features/layers/baselayers/SatelliteLayer';
 import TerrainLayer from './features/layers/baselayers/TerrainLayer';
 import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';
 import { MapContext, MapSettingsContext } from './context';
-import { createUtils } from './mapUtils';
-export var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate PlainMap. Missing credentials property.';
+import { createUtils, getPPI } from './mapUtils';
+export var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 var RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
 
+// Note: "apikey" used by Here v3.1 whereas "app_id" and "app_code" are used by the 3.0 API
+// The Here API 3.1 works a little different and by default uses WebGL rendering
+// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
+var getPlatform = function getPlatform(credentials) {
+  return new H.service.Platform({
+    apikey: credentials.apikey || credentials.api_key,
+    app_id: credentials.app_id,
+    app_code: credentials.app_code
+  });
+};
+
+// Obtain the default map types from the platform object:
+var createDefaultLayers = function createDefaultLayers(platform, language, darkMode) {
+  return platform.createDefaultLayers({
+    lg: language,
+    lg2: 'de',
+    // Only needed for a raster based map
+    tileSize: TILE_SIZE,
+    ppi: getPPI(),
+    // default style for default raster layer
+    style: !darkMode && 'mini'
+  });
+};
+var getHereUi = function getHereUi(hereMap, defaultLayers, showScaleBar) {
+  var hereUi = H.ui.UI.createDefault(hereMap, defaultLayers);
+  if (hereUi) {
+    hereUi.getControl('scalebar').setVisibility(showScaleBar);
+    hereUi.getControl('scalebar').setAlignment('bottom-left');
+    hereUi.getControl('mapsettings').setVisibility(false);
+    hereUi.removeControl('zoom');
+  }
+  return hereUi;
+};
 var getBounds = function getBounds(boundingBox) {
   var top = boundingBox.top,
     left = boundingBox.left,
@@ -38,41 +69,47 @@ var getBounds = function getBounds(boundingBox) {
     right = boundingBox.right;
   return new H.geo.Rect(top, left, bottom, right);
 };
-var getLayer = function getLayer(api, layer, language) {
+var getLayer = function getLayer(api, layer, language, useWebGL) {
   switch (layer) {
     case MAP_LAYER_TRAFFIC:
       return /*#__PURE__*/React.createElement(TrafficLayer, {
         api: api,
         language: language,
         key: layer,
-        layerIndex: 1
+        useWebGL: useWebGL
       });
     case MAP_LAYER_INCIDENTS:
       return /*#__PURE__*/React.createElement(IncidentsLayer, {
         api: api,
         language: language,
-        key: layer,
-        layerIndex: 2
+        key: layer
       });
     case MAP_LAYER_ROAD_RESTRICTIONS:
-      return /*#__PURE__*/React.createElement(TruckLayer, {
+      return /*#__PURE__*/React.createElement(RoadRestrictionLayer, {
         api: api,
         language: language,
         key: layer,
-        layerIndex: 3
+        useWebGL: useWebGL
       });
     default:
       null;
   }
 };
-var getBaseLayer = function getBaseLayer(api, baseLayer, language) {
+var getBaseLayer = function getBaseLayer(api, baseLayer, language, useWebGL, darkMode) {
   switch (baseLayer) {
     case MAP_TYPE_DEFAULT:
-      return /*#__PURE__*/React.createElement(DefaultLayer, {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
+      {
+        return useWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
+          api: api,
+          language: language,
+          key: baseLayer
+        }) : /*#__PURE__*/React.createElement(DefaultRasterLayer, {
+          api: api,
+          language: language,
+          key: baseLayer,
+          darkMode: darkMode
+        });
+      }
     case MAP_TYPE_FLEET_STYLE:
       return /*#__PURE__*/React.createElement(FleetStyleLayer, {
         api: api,
@@ -95,7 +132,7 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language) {
       null;
   }
 };
-var enhanceChildren = function enhanceChildren(children, api) {
+var enrichChildrenWithApi = function enrichChildrenWithApi(children, api) {
   return React.Children.map(children, function (child) {
     if (child) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -114,6 +151,14 @@ var getStyle = function getStyle(height, width) {
   }
   return style;
 };
+
+// https://developer.here.com/documentation/maps/3.1.37.0/api_reference/H.service.Platform.html#createDefaultLayers
+var getMapRenderingEngine = function getMapRenderingEngine(defaultLayers, useWebGL, darkMode) {
+  if (useWebGL) {
+    return defaultLayers.vector.normal.map;
+  }
+  return darkMode ? defaultLayers.raster.normal.mapnight : defaultLayers.raster.normal.map;
+};
 var Map = function Map(props) {
   var children = props.children,
     credentials = props.credentials,
@@ -139,7 +184,9 @@ var Map = function Map(props) {
     onZoomIn = props.onZoomIn,
     onZoomOut = props.onZoomOut,
     mapSettingsTooltip = props.mapSettingsTooltip,
-    mapSettings = props.mapSettings;
+    mapSettings = props.mapSettings,
+    useWebGL = props.useWebGL,
+    darkMode = props.darkMode;
   var mapRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -147,107 +194,80 @@ var Map = function Map(props) {
     setMapInitialized = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    herePlatform = _useState4[0],
-    setHerePlatform = _useState4[1];
-  var _useState5 = useState(),
+    api = _useState4[0],
+    setApi = _useState4[1];
+  var _useState5 = useState(mapType),
     _useState6 = _slicedToArray(_useState5, 2),
-    api = _useState6[0],
-    setApi = _useState6[1];
-  var _useState7 = useState(mapType),
+    baseLayer = _useState6[0],
+    setBaseLayer = _useState6[1];
+  var _useState7 = useState(mapLayer),
     _useState8 = _slicedToArray(_useState7, 2),
-    baseLayer = _useState8[0],
-    setBaseLayer = _useState8[1];
-  var _useState9 = useState(mapLayer),
+    activeLayers = _useState8[0],
+    setActiveLayers = _useState8[1];
+  var _useState9 = useState(externalShowCluster),
     _useState10 = _slicedToArray(_useState9, 2),
-    activeLayers = _useState10[0],
-    setActiveLayers = _useState10[1];
-  var _useState11 = useState(externalShowCluster),
-    _useState12 = _slicedToArray(_useState11, 2),
-    showCluster = _useState12[0],
-    setShowCluster = _useState12[1];
+    showCluster = _useState10[0],
+    setShowCluster = _useState10[1];
+  var devicePixelRatio = window.devicePixelRatio || 1;
   useEffect(function () {
-    if (!herePlatform) {
-      var platform = new H.service.Platform({
-        // Note: "apikey" used by Here v3.1 whereas "app_id" and "app_code" are used by the 3.0 API
-        apikey: credentials.apikey || credentials.api_key,
-        app_id: credentials.app_id,
-        app_code: credentials.app_code
-      });
-      setHerePlatform(platform);
-      var defaultLayers = platform.createDefaultLayers({
-        tileSize: TILE_SIZE,
-        ppi: window.devicePixelRatio > 1 ? HIGH_RES_PPI : undefined,
-        lg: language,
-        lg2: 'en'
-      });
-      var bounds = boundingBox && getBounds(boundingBox);
-      var newHereMap = new H.Map(mapRef.current, defaultLayers.raster.normal.map, {
-        zoom: zoom,
-        center: center,
-        bounds: bounds,
-        // Removed window.devicePixelRatio || 1 since it was zooming out when devicePixelRatio > 1
-        pixelRatio: 1,
-        // need to be set for better performence of legacy map
-        engineType: H.map.render.RenderEngine.EngineType.P2D
-      });
+    var platform = getPlatform(credentials);
+    var defaultLayers = createDefaultLayers(platform, language, darkMode);
+    var bounds = boundingBox && getBounds(boundingBox);
+    var mapRenderingEngine = getMapRenderingEngine(defaultLayers, useWebGL, darkMode);
 
-      // Add a resize listener to make sure that the map occupies the whole container
-      var resizeListener = addEventListener(window, 'resize', throttle(RESIZE_THROTTLE, function () {
-        return newHereMap.getViewPort().resize();
-      }));
-      var orientationChangeListener = addEventListener(window, 'orientationchange', throttle(RESIZE_THROTTLE, function () {
-        return newHereMap.getViewPort().resize();
-      }));
-      setMapInitialized(true);
-      var newHereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(newHereMap);
-      var newHereBehavior = !disableMapEvents && !disableBehavior && new H.mapevents.Behavior(newHereMapEvents);
-      if (newHereBehavior) {
-        newHereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
-      }
-      addEventListenerMap(newHereMap, eventListenerMap, newHereMap);
-      var hereUi = H.ui.UI.createDefault(newHereMap, defaultLayers);
-      if (hereUi) {
-        hereUi.getControl('scalebar').setVisibility(showScaleBar);
-        hereUi.getControl('scalebar').setAlignment('bottom-left');
-        hereUi.getControl('mapsettings').setVisibility(false);
-        hereUi.removeControl('zoom');
-      }
-      var newSettings = {
+    // Instantiate (and display) a map object:
+    var hereMap = new H.Map(mapRef.current, mapRenderingEngine, {
+      zoom: zoom,
+      center: center,
+      bounds: bounds,
+      pixelRatio: devicePixelRatio,
+      // Need to be set for better performence of raster based map
+      engineType: useWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D
+    });
+
+    // Add a resize listener to make sure that the map occupies the whole container
+    var resizeListener = addEventListener(window, 'resize', throttle(RESIZE_THROTTLE, function () {
+      return hereMap.getViewPort().resize();
+    }));
+    var orientationChangeListener = addEventListener(window, 'orientationchange', throttle(RESIZE_THROTTLE, function () {
+      return hereMap.getViewPort().resize();
+    }));
+    setMapInitialized(true);
+    var hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
+    var hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
+    addEventListenerMap(hereMap, eventListenerMap, hereMap);
+    setApi({
+      credentials: credentials,
+      defaultLayers: defaultLayers,
+      group: hereMap,
+      map: hereMap,
+      mapEvents: hereMapEvents,
+      behavior: hereBehavior,
+      platform: platform,
+      ui: getHereUi(hereMap, defaultLayers, showScaleBar),
+      utils: createUtils(hereMap),
+      settings: {
         baseLayer: baseLayer,
         mapLayer: activeLayers,
         showCluster: showCluster
-      };
-      setApi({
-        credentials: credentials,
-        defaultLayers: defaultLayers,
-        group: newHereMap,
-        map: newHereMap,
-        mapEvents: newHereMapEvents,
-        behavior: newHereBehavior,
-        platform: platform,
-        ui: hereUi,
-        settings: newSettings,
-        utils: createUtils(newHereMap)
-      });
-      return function () {
-        if (newHereMap) {
-          removeEventListenerMap(newHereMap);
-          if (newHereMapEvents) {
-            newHereMapEvents.dispose();
-          }
-          if (resizeListener) {
-            resizeListener.remove();
-          }
-          if (orientationChangeListener) {
-            orientationChangeListener.remove();
-          }
-          //console.log('Destroy map', newHereMap);
-          newHereMap.dispose();
-          // setTimeout(() => newHereMap.dispose(), 0);
+      }
+    });
+    return function () {
+      if (hereMap) {
+        removeEventListenerMap(hereMap);
+        if (hereMapEvents) {
+          hereMapEvents.dispose();
         }
-      };
-    }
-  }, []);
+        if (resizeListener) {
+          resizeListener.remove();
+        }
+        if (orientationChangeListener) {
+          orientationChangeListener.remove();
+        }
+        hereMap.dispose();
+      }
+    };
+  }, [useWebGL, darkMode]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -324,25 +344,17 @@ var Map = function Map(props) {
     }));
   };
   var handleZoomIn = function handleZoomIn() {
-    var z = api.map.getZoom();
+    var z = Math.round(api.map.getZoom());
     var newZoom = z + 1;
     onZoomIn(newZoom, z);
     api.map.setZoom(newZoom, true);
   };
   var handleZoomOut = function handleZoomOut() {
-    var z = api.map.getZoom();
+    var z = Math.round(api.map.getZoom());
     var newZoom = z - 1;
     onZoomOut(newZoom, z);
     api.map.setZoom(newZoom, true);
   };
-  var renderChildren = function renderChildren() {
-    if (!children) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: 'MapElements'
-    }, isFunction(children) ? children(api) : enhanceChildren(children, api));
-  };
   var style = getStyle(height, width);
   var autoHeightClass = isEmpty(style) ? 'height-100pct' : '';
   var hideZoomButtons = disableBehavior;
@@ -367,11 +379,12 @@ var Map = function Map(props) {
       onShowClusterChange: handleShowClusterChange,
       mapSettingsTooltip: mapSettingsTooltip
     }
-  }, mapSettings), getBaseLayer(api, baseLayer, language), map(function (layer) {
-    return getLayer(api, layer, language);
-  }, activeLayers), renderChildren()));
+  }, mapSettings), getBaseLayer(api, baseLayer, language, useWebGL, darkMode), map(function (layer) {
+    return getLayer(api, layer, language, useWebGL);
+  }, activeLayers), children && /*#__PURE__*/React.createElement("div", {
+    className: 'MapElements'
+  }, isFunction(children) ? children(api) : enrichChildrenWithApi(children, api))));
 };
-;
 Map.TYPE_DEFAULT = MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;
 Map.TYPE_SATELLITE = MAP_TYPE_SATELLITE;
@@ -393,7 +406,9 @@ Map.defaultProps = {
   onMapLayerChange: function onMapLayerChange() {},
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
-  onZoomOut: function onZoomOut() {}
+  onZoomOut: function onZoomOut() {},
+  useWebGL: false,
+  darkMode: false
 };
 Map.propTypes = {
   credentials: PropTypes.shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, 'app_id', PropTypes.string), _defineProperty(_PropTypes$shape, 'app_code', PropTypes.string), _defineProperty(_PropTypes$shape, 'api_key', PropTypes.string), _defineProperty(_PropTypes$shape, "apikey", PropTypes.string), _PropTypes$shape)).isRequired,
@@ -420,6 +435,8 @@ Map.propTypes = {
   onZoomOut: PropTypes.func,
   getApi: PropTypes.func,
   mapSettingsTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  mapSettings: PropTypes.node
+  mapSettings: PropTypes.node,
+  useWebGL: PropTypes.bool,
+  darkMode: PropTypes.bool
 };
 export default Map;

package/components/map/components/constants.js

@@ -8,4 +8,7 @@ export var MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
 export var FORMAT = 'png8';
 export var TILE_SIZE = 256;
 export var TILE_TYPE = 'maptile';
-export var HIGH_RES_PPI = 320;
+export var HIGH_RES_PPI = 320;
+
+// https://3.base.maps.ls.hereapi.com/maptile/2.1/maptile/da6f196b15/normal.day/11/1086/709/256/png8?xnlp=CL_JSMv3.1.37.0&apikey=Kls87GMD8WOPMBac1vgJ0eWYpSw1YzSXtXNcWHtZf5w&style=alps&lg=eng
+// https://3.base.maps.ls.hereapi.com/maptile/2.1/maptile/da6f196b15/normal.day/11/1086/709/256/png8?xnlp=CL_JSMv3.1.37.0&apikey=Kls87GMD8WOPMBac1vgJ0eWYpSw1YzSXtXNcWHtZf5w&ppi=320&lg=en&lg2=de

package/components/map/components/features/layers/RoadRestrictionLayer.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["useWebGL"];
+import { FORMAT, TILE_SIZE } from '../../constants';
+import { getPPI } from '../../mapUtils';
+import Layer from './Layer';
+var createRoadRestrictionLayer = function createRoadRestrictionLayer(useWebGL) {
+  return function (api, language) {
+    return api.platform.getMapTileService({
+      type: 'base'
+    }).createTileLayer('truckonlytile', 'normal.day', TILE_SIZE, FORMAT, {
+      style: 'default',
+      lg: language,
+      ppi: useWebGL ? undefined : getPPI()
+    });
+  };
+};
+var RoadRestrictionLayer = function RoadRestrictionLayer(props) {
+  var useWebGL = props.useWebGL,
+    remainingProps = _objectWithoutProperties(props, _excluded);
+  var createLayer = createRoadRestrictionLayer(useWebGL);
+  return /*#__PURE__*/React.createElement(Layer, _extends({}, remainingProps, {
+    createLayer: createLayer
+  }));
+};
+export default RoadRestrictionLayer;

package/components/map/components/features/layers/TrafficLayer.js

@@ -1,10 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable no-undef */
-import React from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["useWebGL"];
 import { FORMAT, TILE_SIZE } from '../../constants';
 import Layer from './Layer';
-var createTrafficLayer = function createTrafficLayer(api, language) {
-  //return api.defaultLayers.vector.normal.traffic;
+var createVebGlTrafficLayer = function createVebGlTrafficLayer(api, language) {
+  // use new Here 3.1 API traffic layer for WebGL
+  // https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
+
+  // Create a traffic service and a corresponding provider.
+  var service = api.platform.getTrafficService();
+  var provider = new H.service.traffic.flow.Provider(service);
+
+  // Create a tile layer that can be added to the map
+  return new H.map.layer.TileLayer(provider);
+};
+var createRasterTrafficLayer = function createRasterTrafficLayer(api, language) {
   return api.platform.getMapTileService({
     type: 'traffic'
   }).createTileLayer('flowtile', 'normal.day.grey', TILE_SIZE, FORMAT, {
@@ -13,8 +23,11 @@ var createTrafficLayer = function createTrafficLayer(api, language) {
   });
 };
 var TrafficLayer = function TrafficLayer(props) {
-  return /*#__PURE__*/React.createElement(Layer, _extends({}, props, {
-    createLayer: createTrafficLayer
+  var useWebGL = props.useWebGL,
+    remainingProps = _objectWithoutProperties(props, _excluded);
+  var createLayerCallback = useWebGL ? createVebGlTrafficLayer : createRasterTrafficLayer;
+  return /*#__PURE__*/React.createElement(Layer, _extends({}, remainingProps, {
+    createLayer: createLayerCallback
   }));
 };
 export default TrafficLayer;

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

@@ -0,0 +1,20 @@
+import { useBaseLayer } from './useBaseLayer';
+
+// https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
+
+var DefaultRasterLayer = function DefaultRasterLayer(props) {
+  var api = props.api,
+    language = props.language,
+    darkMode = props.darkMode;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: !darkMode && {
+      style: 'alps'
+    }
+  });
+  return null;
+};
+export default DefaultRasterLayer;

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

@@ -0,0 +1,14 @@
+import { useBaseLayer } from './useBaseLayer';
+var DefaultVectorLayer = function DefaultVectorLayer(props) {
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: {}
+  });
+  return null;
+};
+export default DefaultVectorLayer;

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

@@ -1,20 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-var createFleetStyleLayer = function createFleetStyleLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'base';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'normal.day', TILE_SIZE, FORMAT, {
-    style: 'fleet',
-    lg: language
-  });
-};
+import { useBaseLayer } from './useBaseLayer';
 var FleetStyleLayer = function FleetStyleLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createFleetStyleLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: {
+      style: 'fleet'
+    }
+  });
+  return null;
 };
 export default FleetStyleLayer;

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

@@ -1,20 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { FORMAT, TILE_SIZE } from '../../../constants';
-import BaseLayer from './BaseLayer';
-var createSatelliteLayer = function createSatelliteLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'aerial';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'hybrid.day', TILE_SIZE, FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+import { useBaseLayer } from './useBaseLayer';
 var SatelliteLayer = function SatelliteLayer(props) {
-  return /*#__PURE__*/React.createElement(BaseLayer, _extends({}, props, {
-    createBaseLayer: createSatelliteLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapTileServiceType: 'aerial',
+    scheme: 'hybrid.day',
+    additionalParameters: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 export default SatelliteLayer;