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

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,45 @@ 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_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS } 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 NightLayer from './features/layers/baselayers/NightLayer';
+import { getDefaultBaseLayer } from './features/layers/baselayers/useBaseLayer';
 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';
+import useDarkMode from '../../../hooks/useDarkMode';
+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
+  });
+};
+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 +59,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 !darkMode && 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,
@@ -91,11 +118,17 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language) {
         language: language,
         key: baseLayer
       });
+    case MAP_TYPE_NIGHT:
+      return /*#__PURE__*/React.createElement(NightLayer, {
+        api: api,
+        language: language,
+        key: baseLayer
+      });
     default:
       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, {
@@ -139,7 +172,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 +182,93 @@ 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 isDarkMode = useDarkMode();
   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
-      });
+    // Toggle night map only if current map type is default
+    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
+      setBaseLayer(MAP_TYPE_NIGHT);
+      onMapTypeChange(MAP_TYPE_NIGHT);
+    }
+    // Toggle back to default map only if current map type is night
+    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
+      setBaseLayer(MAP_TYPE_DEFAULT);
+      onMapTypeChange(MAP_TYPE_DEFAULT);
+    }
+  }, [isDarkMode]);
+  var devicePixelRatio = window.devicePixelRatio || 1;
+  useEffect(function () {
+    console.debug('initialize here map');
+    var bounds = boundingBox && getBounds(boundingBox);
+    var platform = getPlatform(credentials);
+    var defaultLayers = platform.createDefaultLayers();
+    var defaultLayer = getDefaultBaseLayer(defaultLayers, baseLayer, useWebGL);
 
-      // 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 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 = 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]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -262,17 +283,25 @@ var Map = function Map(props) {
     }
   }, [boundingBox]);
 
-  // Update Zoom from outside
+  // Update Zoom from outside if value is different
   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
   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]);
 
@@ -324,30 +353,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.createElement("div", {
-      className: 'MapElements'
-    }, isFunction(children) ? children(api) : enhanceChildren(children, api));
+    api.utils.setZoom(newZoom, zoomAnimation);
   };
   var style = getStyle(height, width);
   var autoHeightClass = isEmpty(style) ? 'height-100pct' : '';
   var hideZoomButtons = disableBehavior;
   return /*#__PURE__*/React.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.createElement(MapContext.Provider, {
@@ -367,15 +388,17 @@ 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;
 Map.TYPE_TERRAIN = MAP_TYPE_TERRAIN;
+Map.TYPE_NIGHT = MAP_TYPE_NIGHT;
 Map.LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;
 Map.LAYER_TRAFFIC = MAP_LAYER_TRAFFIC;
 Map.LAYER_ROAD_RESTRICTIONS = MAP_LAYER_ROAD_RESTRICTIONS;
@@ -393,7 +416,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,
@@ -409,7 +434,7 @@ Map.propTypes = {
   hideMapSettings: PropTypes.bool,
   hideClusterSettings: PropTypes.bool,
   hideMapLayerSettings: PropTypes.bool,
-  mapType: PropTypes.oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN]),
+  mapType: PropTypes.oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN, Map.TYPE_NIGHT]),
   mapLayer: PropTypes.arrayOf(PropTypes.string),
   showCluster: PropTypes.bool,
   showScaleBar: PropTypes.bool,
@@ -420,6 +445,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

@@ -2,6 +2,7 @@ export var MAP_TYPE_DEFAULT = 'DEFAULT';
 export var MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
 export var MAP_TYPE_SATELLITE = 'SATELLITE';
 export var MAP_TYPE_TERRAIN = 'TERRAIN';
+export var MAP_TYPE_NIGHT = 'NIGHT';
 export var MAP_LAYER_INCIDENTS = 'INCIDENTS';
 export var MAP_LAYER_TRAFFIC = 'TRAFFIC';
 export var MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';

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

@@ -15,7 +15,6 @@ export var MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 posi
 export var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
 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,
@@ -25,12 +24,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/components/map/components/features/basics/Polyline.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 */
 import { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -35,15 +38,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/components/map/components/features/layers/RoadRestrictionLayer.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["useWebGL"];
+import React from 'react';
+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,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable no-undef */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["useWebGL"];
 import React from 'react';
 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 +24,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,19 @@
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_DEFAULT } from '../../../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;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_DEFAULT,
+    additionalParameters: {
+      style: 'alps'
+    }
+  });
+  return null;
+};
+export default DefaultRasterLayer;

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

@@ -0,0 +1,15 @@
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_DEFAULT } from '../../../constants';
+var DefaultVectorLayer = function DefaultVectorLayer(props) {
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_DEFAULT,
+    additionalParameters: {},
+    isWebGL: true
+  });
+  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';
+import { MAP_TYPE_FLEET_STYLE } from '../../../constants';
 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,
+    mapType: MAP_TYPE_FLEET_STYLE,
+    additionalParameters: {
+      style: 'fleet'
+    }
+  });
+  return null;
 };
 export default FleetStyleLayer;