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

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

@@ -22,8 +22,9 @@ var _constants = require("./constants");
 var _ZoomButtons = _interopRequireDefault(require("./features/settings/ZoomButtons"));
 var _IncidentsLayer = _interopRequireDefault(require("./features/layers/IncidentsLayer"));
 var _TrafficLayer = _interopRequireDefault(require("./features/layers/TrafficLayer"));
-var _TruckLayer = _interopRequireDefault(require("./features/layers/TruckLayer"));
-var _DefaultLayer = _interopRequireDefault(require("./features/layers/baselayers/DefaultLayer"));
+var _RoadRestrictionLayer = _interopRequireDefault(require("./features/layers/RoadRestrictionLayer"));
+var _DefaultVectorLayer = _interopRequireDefault(require("./features/layers/baselayers/DefaultVectorLayer"));
+var _DefaultRasterLayer = _interopRequireDefault(require("./features/layers/baselayers/DefaultRasterLayer"));
 var _FleetStyleLayer = _interopRequireDefault(require("./features/layers/baselayers/FleetStyleLayer"));
 var _SatelliteLayer = _interopRequireDefault(require("./features/layers/baselayers/SatelliteLayer"));
 var _TerrainLayer = _interopRequireDefault(require("./features/layers/baselayers/TerrainLayer"));
@@ -35,10 +36,43 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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 NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate PlainMap. Missing credentials property.';
+var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 exports.NO_CREDENTIALS_ERROR_MESSAGE = NO_CREDENTIALS_ERROR_MESSAGE;
 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: _constants.TILE_SIZE,
+    ppi: (0, _mapUtils.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,
@@ -46,41 +80,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 _constants.MAP_LAYER_TRAFFIC:
       return /*#__PURE__*/_react["default"].createElement(_TrafficLayer["default"], {
         api: api,
         language: language,
         key: layer,
-        layerIndex: 1
+        useWebGL: useWebGL
       });
     case _constants.MAP_LAYER_INCIDENTS:
       return /*#__PURE__*/_react["default"].createElement(_IncidentsLayer["default"], {
         api: api,
         language: language,
-        key: layer,
-        layerIndex: 2
+        key: layer
       });
     case _constants.MAP_LAYER_ROAD_RESTRICTIONS:
-      return /*#__PURE__*/_react["default"].createElement(_TruckLayer["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_RoadRestrictionLayer["default"], {
         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 _constants.MAP_TYPE_DEFAULT:
-      return /*#__PURE__*/_react["default"].createElement(_DefaultLayer["default"], {
-        api: api,
-        language: language,
-        key: baseLayer
-      });
+      {
+        return useWebGL ? /*#__PURE__*/_react["default"].createElement(_DefaultVectorLayer["default"], {
+          api: api,
+          language: language,
+          key: baseLayer
+        }) : /*#__PURE__*/_react["default"].createElement(_DefaultRasterLayer["default"], {
+          api: api,
+          language: language,
+          key: baseLayer,
+          darkMode: darkMode
+        });
+      }
     case _constants.MAP_TYPE_FLEET_STYLE:
       return /*#__PURE__*/_react["default"].createElement(_FleetStyleLayer["default"], {
         api: api,
@@ -103,7 +143,7 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language) {
       null;
   }
 };
-var enhanceChildren = function enhanceChildren(children, api) {
+var enrichChildrenWithApi = function enrichChildrenWithApi(children, api) {
   return _react["default"].Children.map(children, function (child) {
     if (child) {
       return /*#__PURE__*/_react["default"].cloneElement(child, {
@@ -122,6 +162,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,
@@ -147,7 +195,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 = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -155,107 +205,80 @@ var Map = function Map(props) {
     setMapInitialized = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    herePlatform = _useState4[0],
-    setHerePlatform = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
+    api = _useState4[0],
+    setApi = _useState4[1];
+  var _useState5 = (0, _react.useState)(mapType),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    api = _useState6[0],
-    setApi = _useState6[1];
-  var _useState7 = (0, _react.useState)(mapType),
+    baseLayer = _useState6[0],
+    setBaseLayer = _useState6[1];
+  var _useState7 = (0, _react.useState)(mapLayer),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    baseLayer = _useState8[0],
-    setBaseLayer = _useState8[1];
-  var _useState9 = (0, _react.useState)(mapLayer),
+    activeLayers = _useState8[0],
+    setActiveLayers = _useState8[1];
+  var _useState9 = (0, _react.useState)(externalShowCluster),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    activeLayers = _useState10[0],
-    setActiveLayers = _useState10[1];
-  var _useState11 = (0, _react.useState)(externalShowCluster),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    showCluster = _useState12[0],
-    setShowCluster = _useState12[1];
+    showCluster = _useState10[0],
+    setShowCluster = _useState10[1];
+  var devicePixelRatio = window.devicePixelRatio || 1;
   (0, _react.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: _constants.TILE_SIZE,
-        ppi: window.devicePixelRatio > 1 ? _constants.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 = (0, _addEventListener["default"])(window, 'resize', (0, _throttle["default"])(RESIZE_THROTTLE, function () {
-        return newHereMap.getViewPort().resize();
-      }));
-      var orientationChangeListener = (0, _addEventListener["default"])(window, 'orientationchange', (0, _throttle["default"])(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);
-      }
-      (0, _eventHandling.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 = (0, _addEventListener["default"])(window, 'resize', (0, _throttle["default"])(RESIZE_THROTTLE, function () {
+      return hereMap.getViewPort().resize();
+    }));
+    var orientationChangeListener = (0, _addEventListener["default"])(window, 'orientationchange', (0, _throttle["default"])(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);
+    (0, _eventHandling.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: (0, _mapUtils.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: (0, _mapUtils.createUtils)(newHereMap)
-      });
-      return function () {
-        if (newHereMap) {
-          (0, _eventHandling.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) {
+        (0, _eventHandling.removeEventListenerMap)(hereMap);
+        if (hereMapEvents) {
+          hereMapEvents.dispose();
         }
-      };
-    }
-  }, []);
+        if (resizeListener) {
+          resizeListener.remove();
+        }
+        if (orientationChangeListener) {
+          orientationChangeListener.remove();
+        }
+        hereMap.dispose();
+      }
+    };
+  }, [useWebGL, darkMode]);
 
   // Update BoundingBox from outside
   (0, _react.useEffect)(function () {
@@ -332,25 +355,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["default"].createElement("div", {
-      className: 'MapElements'
-    }, (0, _isFunction["default"])(children) ? children(api) : enhanceChildren(children, api));
-  };
   var style = getStyle(height, width);
   var autoHeightClass = (0, _isEmpty["default"])(style) ? 'height-100pct' : '';
   var hideZoomButtons = disableBehavior;
@@ -375,11 +390,12 @@ var Map = function Map(props) {
       onShowClusterChange: handleShowClusterChange,
       mapSettingsTooltip: mapSettingsTooltip
     }
-  }, mapSettings), getBaseLayer(api, baseLayer, language), (0, _map["default"])(function (layer) {
-    return getLayer(api, layer, language);
-  }, activeLayers), renderChildren()));
+  }, mapSettings), getBaseLayer(api, baseLayer, language, useWebGL, darkMode), (0, _map["default"])(function (layer) {
+    return getLayer(api, layer, language, useWebGL);
+  }, activeLayers), children && /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'MapElements'
+  }, (0, _isFunction["default"])(children) ? children(api) : enrichChildrenWithApi(children, api))));
 };
-;
 Map.TYPE_DEFAULT = _constants.MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = _constants.MAP_TYPE_FLEET_STYLE;
 Map.TYPE_SATELLITE = _constants.MAP_TYPE_SATELLITE;
@@ -401,7 +417,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["default"].shape((_PropTypes$shape = {}, (0, _defineProperty2["default"])(_PropTypes$shape, 'app_id', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, 'app_code', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, 'api_key', _propTypes["default"].string), (0, _defineProperty2["default"])(_PropTypes$shape, "apikey", _propTypes["default"].string), _PropTypes$shape)).isRequired,
@@ -428,7 +446,9 @@ Map.propTypes = {
   onZoomOut: _propTypes["default"].func,
   getApi: _propTypes["default"].func,
   mapSettingsTooltip: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  mapSettings: _propTypes["default"].node
+  mapSettings: _propTypes["default"].node,
+  useWebGL: _propTypes["default"].bool,
+  darkMode: _propTypes["default"].bool
 };
 var _default = Map;
 exports["default"] = _default;

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

@@ -25,4 +25,7 @@ exports.TILE_SIZE = TILE_SIZE;
 var TILE_TYPE = 'maptile';
 exports.TILE_TYPE = TILE_TYPE;
 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
 exports.HIGH_RES_PPI = HIGH_RES_PPI;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _constants = require("../../constants");
+var _mapUtils = require("../../mapUtils");
+var _Layer = _interopRequireDefault(require("./Layer"));
+var _excluded = ["useWebGL"];
+var createRoadRestrictionLayer = function createRoadRestrictionLayer(useWebGL) {
+  return function (api, language) {
+    return api.platform.getMapTileService({
+      type: 'base'
+    }).createTileLayer('truckonlytile', 'normal.day', _constants.TILE_SIZE, _constants.FORMAT, {
+      style: 'default',
+      lg: language,
+      ppi: useWebGL ? undefined : (0, _mapUtils.getPPI)()
+    });
+  };
+};
+var RoadRestrictionLayer = function RoadRestrictionLayer(props) {
+  var useWebGL = props.useWebGL,
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var createLayer = createRoadRestrictionLayer(useWebGL);
+  return /*#__PURE__*/React.createElement(_Layer["default"], (0, _extends2["default"])({}, remainingProps, {
+    createLayer: createLayer
+  }));
+};
+var _default = RoadRestrictionLayer;
+exports["default"] = _default;

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

@@ -6,13 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _constants = require("../../constants");
 var _Layer = _interopRequireDefault(require("./Layer"));
-/* eslint-disable no-undef */
+var _excluded = ["useWebGL"];
+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
 
-var createTrafficLayer = function createTrafficLayer(api, language) {
-  //return api.defaultLayers.vector.normal.traffic;
+  // 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', _constants.TILE_SIZE, _constants.FORMAT, {
@@ -21,8 +30,11 @@ var createTrafficLayer = function createTrafficLayer(api, language) {
   });
 };
 var TrafficLayer = function TrafficLayer(props) {
-  return /*#__PURE__*/_react["default"].createElement(_Layer["default"], (0, _extends2["default"])({}, props, {
-    createLayer: createTrafficLayer
+  var useWebGL = props.useWebGL,
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var createLayerCallback = useWebGL ? createVebGlTrafficLayer : createRasterTrafficLayer;
+  return /*#__PURE__*/React.createElement(_Layer["default"], (0, _extends2["default"])({}, remainingProps, {
+    createLayer: createLayerCallback
   }));
 };
 var _default = TrafficLayer;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _useBaseLayer = require("./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;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: !darkMode && {
+      style: 'alps'
+    }
+  });
+  return null;
+};
+var _default = DefaultRasterLayer;
+exports["default"] = _default;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _useBaseLayer = require("./useBaseLayer");
+var DefaultVectorLayer = function DefaultVectorLayer(props) {
+  var api = props.api,
+    language = props.language;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: {}
+  });
+  return null;
+};
+var _default = DefaultVectorLayer;
+exports["default"] = _default;

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

@@ -1,28 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../../constants");
-var _BaseLayer = _interopRequireDefault(require("./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', _constants.TILE_SIZE, _constants.FORMAT, {
-    style: 'fleet',
-    lg: language
-  });
-};
+var _useBaseLayer = require("./useBaseLayer");
 var FleetStyleLayer = function FleetStyleLayer(props) {
-  return /*#__PURE__*/_react["default"].createElement(_BaseLayer["default"], (0, _extends2["default"])({}, props, {
-    createBaseLayer: createFleetStyleLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapTileServiceType: 'base',
+    scheme: 'normal.day',
+    additionalParameters: {
+      style: 'fleet'
+    }
+  });
+  return null;
 };
 var _default = FleetStyleLayer;
 exports["default"] = _default;

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

@@ -1,28 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../../constants");
-var _BaseLayer = _interopRequireDefault(require("./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', _constants.TILE_SIZE, _constants.FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+var _useBaseLayer = require("./useBaseLayer");
 var SatelliteLayer = function SatelliteLayer(props) {
-  return /*#__PURE__*/_react["default"].createElement(_BaseLayer["default"], (0, _extends2["default"])({}, props, {
-    createBaseLayer: createSatelliteLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapTileServiceType: 'aerial',
+    scheme: 'hybrid.day',
+    additionalParameters: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 var _default = SatelliteLayer;
 exports["default"] = _default;

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

@@ -1,28 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _constants = require("../../../constants");
-var _BaseLayer = _interopRequireDefault(require("./BaseLayer"));
-var createTerrainLayer = function createTerrainLayer(api, language, showTraffic) {
-  var type = showTraffic ? 'traffic' : 'aerial';
-  var tileType = showTraffic ? 'traffictile' : 'maptile';
-  return api.platform.getMapTileService({
-    type: type
-  }).createTileLayer(tileType, 'terrain.day', _constants.TILE_SIZE, _constants.FORMAT, {
-    style: 'default',
-    lg: language
-  });
-};
+var _useBaseLayer = require("./useBaseLayer");
 var TerrainLayer = function TerrainLayer(props) {
-  return /*#__PURE__*/_react["default"].createElement(_BaseLayer["default"], (0, _extends2["default"])({}, props, {
-    createBaseLayer: createTerrainLayer
-  }));
+  var api = props.api,
+    language = props.language;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapTileServiceType: 'aerial',
+    scheme: 'terrain.day',
+    additionalParameter: {
+      style: 'default'
+    }
+  });
+  return null;
 };
 var _default = TerrainLayer;
 exports["default"] = _default;