@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/lib/es/components/map/components/features/basics/marker/Marker.d.ts

@@ -1,4 +1,4 @@
-export function getOrCreateIcon(icon: any): any;
+export function getOrCreateIcon(icon: any): H.map.DomIcon | undefined;
 export function isHMapIcon(icon: any): boolean;
 export function isDomMakerNeeded(icon: any): boolean;
 export default Marker;
@@ -12,7 +12,7 @@ declare namespace Marker {
             lat: PropTypes.Validator<number>;
             lng: PropTypes.Validator<number>;
         }> | null | undefined)[] | null | undefined>>>;
-        const icon: PropTypes.Requireable<any>;
+        const icon: PropTypes.Requireable<H.map.DomIcon>;
         const eventListenerMap: PropTypes.Requireable<object>;
         const customData: PropTypes.Requireable<object>;
         const draggable: PropTypes.Requireable<boolean>;

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

@@ -2,11 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-undef */
 const react_1 = tslib_1.__importDefault(require("react"));
 const Layer_1 = tslib_1.__importDefault(require("./Layer"));
-function getIncidentsLayer(api) {
-    return api.defaultLayers.vector.normal.trafficincidents;
-}
-const IncidentsLayer = props => (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, props, { createLayer: getIncidentsLayer }));
+// Layer that shows construction sites marker that are interactive and use a popup for details
+// Since "vector.normal.trafficincidents" is deprecated we have to use the Here Traffic Service v7
+// see: https://developer.here.com/documentation/maps/3.1.46.0/api_reference/H.service.Platform.html
+const createTrafficIncidentsLayer = api => {
+    const config = `
+  sources:
+    omv:
+        type: OMV
+  layers:
+    incident_icons:
+        data: {source: omv}
+`;
+    return api.platform.getTrafficVectorTileService().createLayer(new H.map.render.webgl.Style(config));
+};
+// For raster map, we use the old deprecated fallback for now
+const createTrafficIncidentsLayerFallback = api => api.defaultLayers.vector.normal.trafficincidents;
+const IncidentsLayer = props => {
+    const { useWebGL } = props, remainingProps = tslib_1.__rest(props, ["useWebGL"]);
+    return ((0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, remainingProps, { createLayer: useWebGL ? createTrafficIncidentsLayer : createTrafficIncidentsLayerFallback })));
+};
 exports.default = IncidentsLayer;

package/lib/es/components/map/components/features/layers/Layer.d.ts

@@ -3,13 +3,12 @@ declare function Layer(props: any): null;
 declare namespace Layer {
     namespace propTypes {
         const api: PropTypes.Requireable<PropTypes.InferProps<{
-            map: PropTypes.Requireable<any>;
-            platform: PropTypes.Requireable<any>;
+            map: PropTypes.Requireable<H.Map>;
+            platform: PropTypes.Requireable<H.service.Platform>;
             defaultLayers: PropTypes.Requireable<object>;
-            group: PropTypes.Requireable<any>;
+            group: PropTypes.Requireable<NonNullable<H.Map | H.map.Group | null | undefined>>;
         }>>;
         const createLayer: PropTypes.Validator<(...args: any[]) => any>;
-        const language: PropTypes.Requireable<string>;
         const layerIndex: PropTypes.Requireable<number>;
     }
 }

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

@@ -4,12 +4,10 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const proptypes_1 = tslib_1.__importDefault(require("../../../utils/proptypes"));
-const localization_1 = require("../../../utils/localization");
 const Layer = props => {
-    const { api, createLayer, layerIndex, language } = props;
+    const { api, createLayer, layerIndex } = props;
     (0, react_1.useEffect)(() => {
-        const lang = (0, localization_1.mapToLongLocale)(language);
-        const newLayer = createLayer(api, lang);
+        const newLayer = createLayer(api);
         api.map.addLayer(newLayer, layerIndex);
         return () => {
             if (newLayer) {
@@ -23,7 +21,6 @@ const Layer = props => {
 Layer.propTypes = {
     api: proptypes_1.default.api,
     createLayer: prop_types_1.default.func.isRequired,
-    language: prop_types_1.default.string,
     layerIndex: prop_types_1.default.number,
 };
 exports.default = Layer;

package/lib/es/components/map/components/features/layers/MapBaseLayer.d.ts

@@ -0,0 +1,8 @@
+export type MapBaseLayerProps = {
+    baseLayerName: string;
+    language: string;
+    enableWebGL: boolean;
+    darkMode: boolean;
+};
+declare const MapBaseLayer: (props: MapBaseLayerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapBaseLayer;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const DefaultRasterLayer_1 = tslib_1.__importDefault(require("./baselayers/DefaultRasterLayer"));
+require("./baselayers/DefaultVectorLayer");
+const FleetStyleLayer_1 = tslib_1.__importDefault(require("./baselayers/FleetStyleLayer"));
+const NightLayer_1 = tslib_1.__importDefault(require("./baselayers/NightLayer"));
+const SatelliteLayer_1 = tslib_1.__importDefault(require("./baselayers/SatelliteLayer"));
+const TerrainLayer_1 = tslib_1.__importDefault(require("./baselayers/TerrainLayer"));
+const MapContext_1 = require("../../MapContext");
+const MapBaseLayer = (props) => {
+    const { baseLayerName, language, enableWebGL, darkMode } = props;
+    const { api } = (0, react_1.useContext)(MapContext_1.MapContext);
+    switch (baseLayerName) {
+        case constants_1.MAP_TYPE_DEFAULT: {
+            return !darkMode && enableWebGL ? (
+            // <DefaultVectorLayer api={api} language={language} key={baseLayerName} />
+            (0, jsx_runtime_1.jsx)(DefaultRasterLayer_1.default, { api: api, language: language, darkMode: darkMode, isWebGL: enableWebGL }, baseLayerName)) : ((0, jsx_runtime_1.jsx)(DefaultRasterLayer_1.default, { api: api, language: language, darkMode: darkMode, isWebGL: enableWebGL }, baseLayerName));
+        }
+        case constants_1.MAP_TYPE_FLEET_STYLE:
+            return (0, jsx_runtime_1.jsx)(FleetStyleLayer_1.default, { api: api, language: language, isWebGL: enableWebGL }, baseLayerName);
+        case constants_1.MAP_TYPE_SATELLITE:
+            return (0, jsx_runtime_1.jsx)(SatelliteLayer_1.default, { api: api, language: language, isWebGL: enableWebGL }, baseLayerName);
+        case constants_1.MAP_TYPE_TERRAIN:
+            return (0, jsx_runtime_1.jsx)(TerrainLayer_1.default, { api: api, language: language, isWebGL: enableWebGL }, baseLayerName);
+        case constants_1.MAP_TYPE_NIGHT:
+            return (0, jsx_runtime_1.jsx)(NightLayer_1.default, { api: api, language: language, isWebGL: enableWebGL }, baseLayerName);
+        default:
+            return null;
+    }
+};
+exports.default = MapBaseLayer;

package/lib/es/components/map/components/features/layers/MapLayerGroup.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+export type MapLayerGroupProps = {
+    isVisible?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+};
+declare const MapLayerGroup: (props: PropsWithChildren<MapLayerGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerGroup;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MapContext_1 = require("../../MapContext");
+// TODO: apparently it is not used
+// Consider Using a Group Layer: If you have additional map objects or want to
+// control visibility/z-index of the cluster layer separately, using a group layer can be beneficial.
+const MapLayerGroup = (props) => {
+    const { minZoom = Number.NEGATIVE_INFINITY, maxZoom = Number.POSITIVE_INFINITY, isVisible = true, children, } = props;
+    const context = (0, react_1.useContext)(MapContext_1.MapContext);
+    const api = context.api;
+    const [group, setGroup] = (0, react_1.useState)();
+    const [childApi, setChildApi] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const newGroup = new H.map.Group({
+            min: minZoom,
+            max: maxZoom,
+        });
+        newGroup.setVisibility(isVisible);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        setGroup(newGroup);
+        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        return () => {
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            }
+            newGroup.dispose();
+        };
+    }, [api.map]);
+    (0, react_1.useEffect)(() => {
+        if (group) {
+            group.setVisibility(isVisible);
+        }
+    }, [isVisible]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && (0, jsx_runtime_1.jsx)(MapContext_1.MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+};
+exports.default = MapLayerGroup;

package/lib/es/components/map/components/features/layers/MapOverlayLayers.d.ts

@@ -0,0 +1,5 @@
+export type MapOverlayLayersProps = {
+    layers: string[];
+};
+declare const MapOverlayLayers: (props: MapOverlayLayersProps) => import("react/jsx-runtime").JSX.Element;
+export default MapOverlayLayers;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const constants_1 = require("../../constants");
+const IncidentsLayer_1 = tslib_1.__importDefault(require("./overlayLayers/IncidentsLayer"));
+const RoadRestrictionLayer_1 = tslib_1.__importDefault(require("./overlayLayers/RoadRestrictionLayer"));
+const TrafficLayer_1 = tslib_1.__importDefault(require("./overlayLayers/TrafficLayer"));
+const MapOverlayLayers = (props) => {
+    const { layers } = props;
+    const layersToRender = (0, map_1.default)(layer => {
+        switch (layer) {
+            case constants_1.MAP_LAYER_TRAFFIC:
+                return (0, jsx_runtime_1.jsx)(TrafficLayer_1.default, { id: constants_1.MAP_LAYER_TRAFFIC }, layer);
+            case constants_1.MAP_LAYER_INCIDENTS:
+                return (0, jsx_runtime_1.jsx)(IncidentsLayer_1.default, {}, layer);
+            case constants_1.MAP_LAYER_ROAD_RESTRICTIONS:
+                return (0, jsx_runtime_1.jsx)(RoadRestrictionLayer_1.default, { id: constants_1.MAP_LAYER_ROAD_RESTRICTIONS }, layer);
+            default:
+                return null;
+        }
+    }, layers);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: layersToRender });
+};
+exports.default = MapOverlayLayers;

package/lib/es/components/map/components/features/layers/MarkerLayer.d.ts

@@ -1,14 +1,10 @@
+import React from 'react';
+import ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';
+export type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {
+    simpleTheme?: ClusterTheme;
+    clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
+};
+declare const MarkerLayer: (props: MarkerLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default MarkerLayer;
-declare function MarkerLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MarkerLayer {
-    namespace propTypes {
-        const simpleTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const clusterDissolvable: PropTypes.Requireable<boolean>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -2,28 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../utils/proptypes"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const ClusterLayer_1 = tslib_1.__importDefault(require("./clustering/ClusterLayer"));
 const clustering_1 = require("../../../utils/clustering");
-const context_1 = require("../../context");
+const MapContext_1 = require("../../MapContext");
 /*
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */
-const MarkerLayer = props => {
-    const { api } = (0, react_1.useContext)(context_1.MapContext);
+const MarkerLayer = (props) => {
+    const mapContext = (0, MapContext_1.useMapContext)();
     const { simpleTheme, clusterDissolvable = true } = props, rest = tslib_1.__rest(props, ["simpleTheme", "clusterDissolvable"]);
     // Norbert: Not an ideal solution
-    const showCluster = !clusterDissolvable || (0, getOr_1.default)(true, 'settings.showCluster', api);
+    const showCluster = !clusterDissolvable || mapContext.showCluster;
     const newProps = Object.assign({ clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }, rest);
     return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
 };
-MarkerLayer.propTypes = {
-    simpleTheme: proptypes_1.default.clusterTheme,
-    clusterDissolvable: prop_types_1.default.bool,
-    clusterStrategy: prop_types_1.default.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: prop_types_1.default.number,
-};
 exports.default = MarkerLayer;

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

@@ -5,12 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const constants_1 = require("../../constants");
 const Layer_1 = tslib_1.__importDefault(require("./Layer"));
-const createRoadRestrictionLayer = useWebGL => (api, language) => {
+// Layer for rendering truck road signs
+// incident_icons, traffic_flow, traffic_incidents
+// FIXME: 'truckonlytile' is HERE Map Tile v2 and therefore deprecated
+const createRoadRestrictionLayer = useWebGL => api => {
+    // "createIncidentsLayer" and "createFlowLayer" are also deprecated
+    // using the "api.platform.getTrafficService(null, 7)" Traffic Service version 7
+    // does not offer equivalent functions like:
+    // return api.platform.getTrafficService(null, 7).createFlowLayer();
     return api.platform
         .getMapTileService({ type: 'base' })
         .createTileLayer('truckonlytile', 'normal.day', constants_1.TILE_SIZE, constants_1.FORMAT, {
         style: 'default',
-        lg: language,
         ppi: undefined,
     });
 };

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

@@ -2,29 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../constants");
 const Layer_1 = tslib_1.__importDefault(require("./Layer"));
-const createWebGlTrafficLayer = (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.
-    const service = api.platform.getTrafficService();
-    const 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);
-};
-const createRasterTrafficLayer = (api, language) => {
+const createRasterTrafficLayer = api => {
     return api.platform
         .getMapTileService({ type: 'traffic' })
         .createTileLayer('flowtile', 'normal.day.grey', constants_1.TILE_SIZE, constants_1.FORMAT, {
         style: 'alps',
-        lg: language,
     });
 };
+// Here Traffic v7 API
+const createVectorTrafficLayer = api => {
+    // Pre-defined opinionated rendering of traffic
+    return api.defaultLayers.vector.traffic.map;
+    // To control the rendering, use the style config.
+    // Unfortunately there is no documentation on how the "pre-defined"
+    // style looks like as it also renders incidents icons (but inactive)
+    //     const config = `
+    //   sources:
+    //     omv:
+    //       type: OMV
+    //   layers:
+    //     traffic_incidents:
+    //       data: {source: omv}
+    //       draw:
+    //         lines:
+    //           order: 340
+    //           width: 2px
+    //           color: red
+    // `;
+    //     return api.platform.getTrafficVectorTileService().createLayer(new H.map.render.webgl.Style(config));
+};
 const TrafficLayer = props => {
     const { useWebGL } = props, remainingProps = tslib_1.__rest(props, ["useWebGL"]);
-    const createLayerCallback = useWebGL ? createWebGlTrafficLayer : createRasterTrafficLayer;
-    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, remainingProps, { createLayer: createLayerCallback }));
+    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, remainingProps, { createLayer: useWebGL ? createVectorTrafficLayer : createRasterTrafficLayer }));
 };
 exports.default = TrafficLayer;

package/lib/es/components/map/components/features/layers/baselayers/DefaultRasterLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type DefaultRasterLayerProps = UseBaseLayerProps & {};
+declare const DefaultRasterLayer: (props: DefaultRasterLayerProps) => null;
 export default DefaultRasterLayer;
-declare function DefaultRasterLayer(props: any): null;

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

@@ -1,19 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const useBaseLayer_1 = require("./useBaseLayer");
-const constants_1 = require("../../../constants");
+require("./useBaseLayer");
+require("../../../constants");
 // https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
-const DefaultRasterLayer = props => {
-    const { api, language } = props;
-    (0, useBaseLayer_1.useBaseLayer)({
-        api,
-        language,
-        mapType: constants_1.MAP_TYPE_DEFAULT,
-        additionalParameters: {
-        // should not be used as Vector map does not support it it would different anyhow
-        //style: 'alps',
+const DefaultRasterLayer = (props) => {
+    var _a, _b;
+    const { api, language, isWebGL } = props;
+    const rasterTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+        format: 'png',
+        queryParams: {
+            lang: 'en',
+            ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
+            style: 'explore.day',
+            features: 'pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:active_and_inactive',
         },
     });
+    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
+        engineType: H.Map.EngineType['HARP'],
+        tileSize: 512,
+    });
+    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
+    const defaultLayer = rasterTileLayer;
+    (_b = api.map) === null || _b === void 0 ? void 0 : _b.setBaseLayer(defaultLayer);
+    // useBaseLayer({
+    //     api,
+    //     language,
+    //     mapType: MAP_TYPE_DEFAULT,
+    //     additionalParameters: {
+    //         // should not be used as Vector map does not support it it would different anyhow
+    //         // style: 'alps',
+    //     },
+    // });
     return null;
 };
 exports.default = DefaultRasterLayer;

package/lib/es/components/map/components/features/layers/baselayers/DefaultVectorLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type DefaultVectorLayerProps = UseBaseLayerProps & {};
+declare const DefaultVectorLayer: (props: DefaultVectorLayerProps) => null;
 export default DefaultVectorLayer;
-declare function DefaultVectorLayer(props: any): null;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const useBaseLayer_1 = require("./useBaseLayer");
 const constants_1 = require("../../../constants");
-const DefaultVectorLayer = props => {
+const DefaultVectorLayer = (props) => {
     const { api, language } = props;
     (0, useBaseLayer_1.useBaseLayer)({
         api,

package/lib/es/components/map/components/features/layers/baselayers/FleetStyleLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type FleetStyleLayerProps = UseBaseLayerProps & {};
+declare const FleetStyleLayer: (props: FleetStyleLayerProps) => null;
 export default FleetStyleLayer;
-declare function FleetStyleLayer(props: any): null;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const useBaseLayer_1 = require("./useBaseLayer");
 const constants_1 = require("../../../constants");
-const FleetStyleLayer = props => {
+const FleetStyleLayer = (props) => {
     const { api, language } = props;
     (0, useBaseLayer_1.useBaseLayer)({
         api,

package/lib/es/components/map/components/features/layers/baselayers/NightLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type NightLayerProps = UseBaseLayerProps & {};
+declare const NightLayer: (props: NightLayerProps) => null;
 export default NightLayer;
-declare function NightLayer(props: any): null;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const useBaseLayer_1 = require("./useBaseLayer");
 const constants_1 = require("../../../constants");
 // https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
-const NightLayer = props => {
+const NightLayer = (props) => {
     const { api, language } = props;
     (0, useBaseLayer_1.useBaseLayer)({
         api,

package/lib/es/components/map/components/features/layers/baselayers/SatelliteLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type SatelliteLayerProps = UseBaseLayerProps & {};
+declare const SatelliteLayer: (props: SatelliteLayerProps) => null;
 export default SatelliteLayer;
-declare function SatelliteLayer(props: any): null;

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

@@ -1,17 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const useBaseLayer_1 = require("./useBaseLayer");
-const constants_1 = require("../../../constants");
-const SatelliteLayer = props => {
-    const { api, language } = props;
-    (0, useBaseLayer_1.useBaseLayer)({
-        api,
-        language,
-        mapType: constants_1.MAP_TYPE_SATELLITE,
-        additionalParameters: {
-            style: 'default',
+require("./useBaseLayer");
+require("../../../constants");
+const SatelliteLayer = (props) => {
+    var _a, _b;
+    const { api, language, isWebGL } = props;
+    const satelliteTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+        format: 'jpeg',
+        queryParams: {
+            lang: 'en',
+            ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
+            style: 'explore.satellite.day',
+            features: 'pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:active_and_inactive',
         },
     });
+    const satelliteTileProvider = new H.service.rasterTile.Provider(satelliteTileService, {
+        engineType: H.Map.EngineType['HARP'],
+        tileSize: 512,
+    });
+    const satelliteTileLayer = new H.map.layer.TileLayer(satelliteTileProvider);
+    const defaultLayer = satelliteTileLayer;
+    (_b = api.map) === null || _b === void 0 ? void 0 : _b.setBaseLayer(defaultLayer);
+    // useBaseLayer({
+    //     api,
+    //     language,
+    //     mapType: MAP_TYPE_SATELLITE,
+    //     additionalParameters: {
+    //         style: 'default',
+    //     },
+    // });
     return null;
 };
 exports.default = SatelliteLayer;

package/lib/es/components/map/components/features/layers/baselayers/TerrainLayer.d.ts

@@ -1,2 +1,4 @@
+import { type UseBaseLayerProps } from './useBaseLayer';
+export type TerrainLayerProps = UseBaseLayerProps & {};
+declare const TerrainLayer: (props: TerrainLayerProps) => null;
 export default TerrainLayer;
-declare function TerrainLayer(props: any): null;

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

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const useBaseLayer_1 = require("./useBaseLayer");
 const constants_1 = require("../../../constants");
-const TerrainLayer = props => {
+const TerrainLayer = (props) => {
     const { api, language } = props;
     (0, useBaseLayer_1.useBaseLayer)({
         api,
         language,
         mapType: constants_1.MAP_TYPE_TERRAIN,
-        additionalParameter: {
+        additionalParameters: {
             style: 'default',
         },
     });

package/lib/es/components/map/components/features/layers/baselayers/useBaseLayer.d.ts

@@ -1,2 +1,11 @@
-export function getDefaultBaseLayer(defaultLayers: any, mapType: any, useWebGL: any): any;
-export function useBaseLayer(props: any): void;
+/// <reference types="heremaps" />
+import type { MapApi } from '../../../../utils/mapTypes';
+export declare const getDefaultBaseLayer: (defaultLayers: H.service.DefaultLayers | undefined, mapType: string, useWebGL: boolean) => H.map.layer.TileLayer | null | undefined;
+export type UseBaseLayerProps = {
+    api: MapApi;
+    additionalParameters: object;
+    language: string;
+    isWebGL?: boolean;
+    mapType: string;
+};
+export declare const useBaseLayer: (props: UseBaseLayerProps) => void;