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

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

@@ -22,23 +22,47 @@ 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"));
+var _NightLayer = _interopRequireDefault(require("./features/layers/baselayers/NightLayer"));
+var _useBaseLayer = require("./features/layers/baselayers/useBaseLayer");
 var _eventHandling = require("../utils/eventHandling");
 var _context = require("./context");
 var _mapUtils = require("./mapUtils");
+var _useDarkMode = _interopRequireDefault(require("../../../hooks/useDarkMode"));
 var _PropTypes$shape;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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
+  });
+};
+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 +70,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 !darkMode && 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,
@@ -99,11 +129,17 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language) {
         language: language,
         key: baseLayer
       });
+    case _constants.MAP_TYPE_NIGHT:
+      return /*#__PURE__*/_react["default"].createElement(_NightLayer["default"], {
+        api: api,
+        language: language,
+        key: baseLayer
+      });
     default:
       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, {
@@ -147,7 +183,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 +193,93 @@ 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 isDarkMode = (0, _useDarkMode["default"])();
   (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
-      });
+    // Toggle night map only if current map type is default
+    if (isDarkMode && baseLayer === _constants.MAP_TYPE_DEFAULT) {
+      setBaseLayer(_constants.MAP_TYPE_NIGHT);
+      onMapTypeChange(_constants.MAP_TYPE_NIGHT);
+    }
+    // Toggle back to default map only if current map type is night
+    else if (!isDarkMode && baseLayer === _constants.MAP_TYPE_NIGHT) {
+      setBaseLayer(_constants.MAP_TYPE_DEFAULT);
+      onMapTypeChange(_constants.MAP_TYPE_DEFAULT);
+    }
+  }, [isDarkMode]);
+  var devicePixelRatio = window.devicePixelRatio || 1;
+  (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);
 
-      // 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 mapConfig = {
+      zoom: zoom,
+      center: center,
+      bounds: bounds,
+      pixelRatio: devicePixelRatio
+    };
+    var hereMap = new H.Map(mapRef.current, defaultLayer, mapConfig);
+
+    // 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]);
 
   // Update BoundingBox from outside
   (0, _react.useEffect)(function () {
@@ -270,17 +294,25 @@ var Map = function Map(props) {
     }
   }, [boundingBox]);
 
-  // Update Zoom from outside
+  // Update Zoom from outside if value is different
   (0, _react.useEffect)(function () {
-    if (api && zoom) {
-      api.map.setZoom(zoom, zoomAnimation);
+    if (!api) {
+      return;
+    }
+    var currentMapZoom = api.utils.getZoom();
+    if (zoom && currentMapZoom !== zoom) {
+      api.utils.setZoom(zoom, zoomAnimation);
     }
   }, [zoom]);
 
-  // Update Lat & Lng from outside
+  // Update Lat & Lng from outside if value is different
   (0, _react.useEffect)(function () {
-    if (api && center) {
-      api.map.setCenter(center, zoomAnimation);
+    if (!(api && center)) {
+      return;
+    }
+    var currentMapCenter = api.utils.getCenter();
+    if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
+      api.utils.setCenter(center, zoomAnimation);
     }
   }, [center]);
 
@@ -332,30 +364,22 @@ var Map = function Map(props) {
     }));
   };
   var handleZoomIn = function handleZoomIn() {
-    var z = api.map.getZoom();
+    var z = api.utils.getZoom();
     var newZoom = z + 1;
     onZoomIn(newZoom, z);
-    api.map.setZoom(newZoom, true);
+    api.utils.setZoom(newZoom, zoomAnimation);
   };
   var handleZoomOut = function handleZoomOut() {
-    var z = api.map.getZoom();
+    var z = api.utils.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));
+    api.utils.setZoom(newZoom, zoomAnimation);
   };
   var style = getStyle(height, width);
   var autoHeightClass = (0, _isEmpty["default"])(style) ? 'height-100pct' : '';
   var hideZoomButtons = disableBehavior;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "Map position-relative ".concat(autoHeightClass),
+    className: "Map position-relative map-type-".concat(baseLayer.toLowerCase(), " ").concat(autoHeightClass),
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/_react["default"].createElement(_context.MapContext.Provider, {
@@ -375,15 +399,17 @@ 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;
 Map.TYPE_TERRAIN = _constants.MAP_TYPE_TERRAIN;
+Map.TYPE_NIGHT = _constants.MAP_TYPE_NIGHT;
 Map.LAYER_INCIDENTS = _constants.MAP_LAYER_INCIDENTS;
 Map.LAYER_TRAFFIC = _constants.MAP_LAYER_TRAFFIC;
 Map.LAYER_ROAD_RESTRICTIONS = _constants.MAP_LAYER_ROAD_RESTRICTIONS;
@@ -401,7 +427,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,
@@ -417,7 +445,7 @@ Map.propTypes = {
   hideMapSettings: _propTypes["default"].bool,
   hideClusterSettings: _propTypes["default"].bool,
   hideMapLayerSettings: _propTypes["default"].bool,
-  mapType: _propTypes["default"].oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN]),
+  mapType: _propTypes["default"].oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN, Map.TYPE_NIGHT]),
   mapLayer: _propTypes["default"].arrayOf(_propTypes["default"].string),
   showCluster: _propTypes["default"].bool,
   showScaleBar: _propTypes["default"].bool,
@@ -428,7 +456,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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TILE_TYPE = exports.TILE_SIZE = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_INCIDENTS = exports.HIGH_RES_PPI = exports.FORMAT = void 0;
+exports.TILE_TYPE = exports.TILE_SIZE = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_INCIDENTS = exports.HIGH_RES_PPI = exports.FORMAT = void 0;
 var MAP_TYPE_DEFAULT = 'DEFAULT';
 exports.MAP_TYPE_DEFAULT = MAP_TYPE_DEFAULT;
 var MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
@@ -12,6 +12,8 @@ var MAP_TYPE_SATELLITE = 'SATELLITE';
 exports.MAP_TYPE_SATELLITE = MAP_TYPE_SATELLITE;
 var MAP_TYPE_TERRAIN = 'TERRAIN';
 exports.MAP_TYPE_TERRAIN = MAP_TYPE_TERRAIN;
+var MAP_TYPE_NIGHT = 'NIGHT';
+exports.MAP_TYPE_NIGHT = MAP_TYPE_NIGHT;
 var MAP_LAYER_INCIDENTS = 'INCIDENTS';
 exports.MAP_LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;
 var MAP_LAYER_TRAFFIC = 'TRAFFIC';

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

@@ -26,7 +26,6 @@ var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to tru
 exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = TO_LESS_LINE_WIDTH_EXCEPTION_MSG;
 var LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 var LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-var BORDER_STROKE_COLOR = 'rgba(255, 255, 255, 1)';
 var BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
 var defaultStyle = {
   width: 5,
@@ -36,12 +35,12 @@ var defaultStyle = {
   isBorderIncludedInWidth: false
 };
 var defaultArrowStyle = {
-  lineWidth: 10,
-  fillColor: 'rgba(42, 55, 64, 1)',
-  strokeColor: BORDER_STROKE_COLOR,
-  lineDash: [0, 6],
-  lineTailCap: 'arrow-tail',
-  lineHeadCap: 'arrow-head'
+  // lineWidth: 12,
+  // strokeColor: 'rgba(0, 0, 0, 0.8)',
+  // lineDash: [0, 3],
+  // lineDashOffset: 2,
+  // lineTailCap: 'arrow-tail',
+  // lineHeadCap: 'arrow-head',
 };
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,8 +13,8 @@ var _context = require("../../context");
 var _MapException = _interopRequireDefault(require("../../../exceptions/MapException"));
 var _hooks = require("../../../utils/hooks");
 var _eventHandling = require("../../../utils/eventHandling");
-/* eslint-disable no-undef */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = MISSING_GEOMETRY_PROPS_EXCEPTION_MSG;
 var WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
@@ -45,15 +46,17 @@ var Polyline = function Polyline(_ref) {
       // Create a patterned polyline:
 
       // Non-legacy version:
-      var arrowLineStyle = new H.map.SpatialStyle({
-        width: 5,
+      var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
         lineWidth: 10,
-        strokeColor: 'rgba(255, 255, 255, 0)'
-      });
+        strokeColor: 'rgba(0, 0, 0, 0.8)',
+        lineDash: [0, 3],
+        lineDashOffset: 1.6,
+        lineTailCap: 'arrow-tail',
+        lineHeadCap: 'arrow-head'
+      }));
       var routeArrows = new H.map.Polyline(geometry, {
         style: arrowLineStyle
       });
-      routeArrows.setArrows(arrowStyle);
 
       // create a group that represents the route line and contains
       // outline and the pattern

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

@@ -0,0 +1,35 @@
+"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 _react = _interopRequireDefault(require("react"));
+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["default"].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,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 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 +31,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["default"].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,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _useBaseLayer = require("./useBaseLayer");
+var _constants = require("../../../constants");
+// 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;
+  (0, _useBaseLayer.useBaseLayer)({
+    api: api,
+    language: language,
+    mapType: _constants.MAP_TYPE_DEFAULT,
+    additionalParameters: {
+      style: 'alps'
+    }
+  });
+  return null;
+};
+var _default = DefaultRasterLayer;
+exports["default"] = _default;