@impargo/react-here-maps - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

dist/HEREMap.d.ts

@@ -25,2 +25,6 @@ /// <reference types="heremaps" />
     congestion?: boolean;
+    /**
+     * Note: this cannot be changed after the map is loaded.
+     * If you want to change it, you have to re-mount the map component.
+     */
     useVectorTiles?: boolean;
@@ -27,0 +31,0 @@ onScriptLoadError?: (failedScripts: string[]) => void;

dist/HEREMap.js

@@ -33,20 +33,36 @@ "use strict";
 var context_1 = require("./context");
+var useRasterLayers_1 = require("./useRasterLayers");
+var useVectorLayers_1 = require("./useVectorLayers");
 var cache_1 = require("./utils/cache");
 var get_platform_1 = __importDefault(require("./utils/get-platform"));
 exports.HEREMap = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c;
-    var children = _a.children, secure = _a.secure, onScriptLoadError = _a.onScriptLoadError, center = _a.center, hidpi = _a.hidpi, _d = _a.interactive, interactive = _d === void 0 ? true : _d, zoom = _a.zoom, lg = _a.lg, useSatellite = _a.useSatellite, trafficLayer = _a.trafficLayer, onMapAvailable = _a.onMapAvailable, disableMapSettings = _a.disableMapSettings, language = _a.language, congestion = _a.congestion, truckRestrictions = _a.truckRestrictions, incidentsLayer = _a.incidentsLayer, apiKey = _a.apiKey, animateZoom = _a.animateZoom, animateCenter = _a.animateCenter, useVectorTiles = _a.useVectorTiles;
+    var children = _a.children, secure = _a.secure, onScriptLoadError = _a.onScriptLoadError, center = _a.center, hidpi = _a.hidpi, _b = _a.interactive, interactive = _b === void 0 ? true : _b, zoom = _a.zoom, lg = _a.lg, useSatellite = _a.useSatellite, trafficLayer = _a.trafficLayer, onMapAvailable = _a.onMapAvailable, disableMapSettings = _a.disableMapSettings, language = _a.language, congestion = _a.congestion, truckRestrictions = _a.truckRestrictions, incidentsLayer = _a.incidentsLayer, apiKey = _a.apiKey, animateZoom = _a.animateZoom, animateCenter = _a.animateCenter, useVectorTiles = _a.useVectorTiles;
     var uniqueIdRef = (0, react_1.useRef)((0, lodash_1.uniqueId)());
-    var _e = (0, react_1.useState)(null), map = _e[0], setMap = _e[1];
-    var _f = (0, react_1.useState)(null), routesGroup = _f[0], setRoutesGroup = _f[1];
+    var _c = (0, react_1.useState)(null), map = _c[0], setMap = _c[1];
+    var _d = (0, react_1.useState)(null), routesGroup = _d[0], setRoutesGroup = _d[1];
     var markersGroupsRef = (0, react_1.useRef)({});
+    var defaultLayersRef = (0, react_1.useRef)(null);
+    (0, useVectorLayers_1.useVectorLayers)({
+        congestion: congestion,
+        defaultLayers: defaultLayersRef.current,
+        incidentsLayer: incidentsLayer,
+        map: map,
+        trafficLayer: trafficLayer,
+        truckRestrictions: truckRestrictions,
+        useSatellite: useSatellite,
+        useVectorTiles: useVectorTiles
+    });
+    (0, useRasterLayers_1.useRasterLayers)({
+        apiKey: apiKey,
+        congestion: congestion,
+        defaultLayers: defaultLayersRef.current,
+        incidentsLayer: incidentsLayer,
+        lg: lg,
+        map: map,
+        trafficLayer: trafficLayer,
+        truckRestrictions: truckRestrictions,
+        useSatellite: useSatellite,
+        useVectorTiles: useVectorTiles
+    });
     var unmountedRef = (0, react_1.useRef)(false);
-    var defaultLayersRef = (0, react_1.useRef)(null);
-    var trafficOverlayLayerRef = (0, react_1.useRef)(null);
-    var trafficBaseLayerRef = (0, react_1.useRef)(null);
-    var truckOverlayLayerRef = (0, react_1.useRef)(null);
-    var truckCongestionLayerRef = (0, react_1.useRef)(null);
-    var usedMapTiles = useVectorTiles
-        ? (_b = defaultLayersRef.current) === null || _b === void 0 ? void 0 : _b.vector.normal
-        : (_c = defaultLayersRef.current) === null || _c === void 0 ? void 0 : _c.raster.normal;
     var screenToGeo = function (x, y) {
@@ -112,65 +128,2 @@ return map.screenToGeo(x, y);
     }, [map]);
-    var getTruckLayerProvider = function (enableCongestion) {
-        return {
-            max: 20,
-            min: 8,
-            getURL: function (col, row, level) {
-                return ["https://",
-                    "1.base.maps.ls.hereapi.com/maptile/2.1/truckonlytile/newest/normal.day/",
-                    level,
-                    "/",
-                    col,
-                    "/",
-                    row,
-                    "/256/png8",
-                    "?style=fleet",
-                    "&apiKey=",
-                    apiKey,
-                    enableCongestion ? "&congestion" : "",
-                    "&lg=",
-                    lg,
-                    "&ppi=",
-                    hidpi ? "320" : "72",
-                ].join("");
-            }
-        };
-    };
-    var getTrafficOverlayProvider = function () {
-        return {
-            getURL: function (col, row, level) {
-                return ["https://",
-                    "1.traffic.maps.ls.hereapi.com/maptile/2.1/flowtile/newest/normal.day/",
-                    level,
-                    "/",
-                    col,
-                    "/",
-                    row,
-                    "/256/png8",
-                    "?apiKey=",
-                    apiKey,
-                    "&ppi=",
-                    hidpi ? "320" : "72",
-                ].join("");
-            }
-        };
-    };
-    var getTrafficBaseProvider = function () {
-        return {
-            getURL: function (col, row, level) {
-                return ["https://",
-                    "1.traffic.maps.ls.hereapi.com/maptile/2.1/traffictile/newest/normal.day/",
-                    level,
-                    "/",
-                    col,
-                    "/",
-                    row,
-                    "/256/png8",
-                    "?apiKey=",
-                    apiKey,
-                    "&ppi=",
-                    hidpi ? "320" : "72",
-                ].join("");
-            }
-        };
-    };
     (0, react_1.useEffect)(function () {
@@ -190,10 +143,2 @@ (0, cache_1.loadScripts)(secure, !useVectorTiles).then(function () {
             });
-            var truckOverlayProvider = new H.map.provider.ImageTileProvider(getTruckLayerProvider(false));
-            var truckOverlayCongestionProvider = new H.map.provider.ImageTileProvider(getTruckLayerProvider(true));
-            var trafficOverlayProvider = new H.map.provider.ImageTileProvider(getTrafficOverlayProvider());
-            var trafficBaseProvider = new H.map.provider.ImageTileProvider(getTrafficBaseProvider());
-            truckOverlayLayerRef.current = new H.map.layer.TileLayer(truckOverlayProvider);
-            truckCongestionLayerRef.current = new H.map.layer.TileLayer(truckOverlayCongestionProvider);
-            trafficOverlayLayerRef.current = new H.map.layer.TileLayer(trafficOverlayProvider);
-            trafficBaseLayerRef.current = new H.map.layer.TileLayer(trafficBaseProvider);
             var hereMapEl = document.querySelector("#map-container-".concat(uniqueIdRef.current));
@@ -219,4 +164,6 @@ var baseLayer = useVectorTiles
             if (behavior) {
-                // @ts-ignore
-                behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+                if (!useVectorLayers_1.useVectorLayers) {
+                    // @ts-ignore
+                    behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+                }
                 // create the default UI for the map
@@ -246,64 +193,2 @@ ui = H.ui.UI.createDefault(newMap, defaultLayersRef.current, language);
         if (map) {
-            var satelliteBaseLayer = defaultLayersRef.current.raster.satellite.map;
-            var emptyBaseLayer = usedMapTiles.map;
-            var baseLayer = useSatellite
-                ? satelliteBaseLayer
-                : (trafficLayer && !useVectorTiles)
-                    ? trafficBaseLayerRef.current
-                    : emptyBaseLayer;
-            map.setBaseLayer(baseLayer);
-        }
-    }, [map, useSatellite, usedMapTiles, trafficLayer]);
-    (0, react_1.useEffect)(function () {
-        if (map) {
-            if (truckRestrictions) {
-                if (congestion) {
-                    map.removeLayer(truckOverlayLayerRef.current);
-                    map.addLayer(truckCongestionLayerRef.current);
-                }
-                else {
-                    map.removeLayer(truckCongestionLayerRef.current);
-                    map.addLayer(truckOverlayLayerRef.current);
-                }
-            }
-            else {
-                map.removeLayer(truckCongestionLayerRef.current);
-                map.removeLayer(truckOverlayLayerRef.current);
-            }
-        }
-    }, [truckRestrictions, congestion, map]);
-    (0, react_1.useEffect)(function () {
-        if (map) {
-            if (incidentsLayer) {
-                map.addLayer(usedMapTiles.trafficincidents);
-            }
-            else {
-                map.removeLayer(usedMapTiles.trafficincidents);
-            }
-        }
-    }, [incidentsLayer, map, usedMapTiles]);
-    (0, react_1.useEffect)(function () {
-        if (map) {
-            if (trafficLayer) {
-                if (useVectorTiles) {
-                    // Adding the vector traffic layer is not strictly necessary,
-                    // however it's helpful because it changes the color for roads
-                    // and highways to white which makes the traffic data more visible.
-                    map.addLayer(defaultLayersRef.current.vector.normal.traffic);
-                }
-                // Ideally, we wouldn't need to add an additional layer here and
-                // the vector traffic layer added above would be enough, however
-                // the vector traffic layer is only visible on a high zoom level,
-                // and if the zoom level is changed using setMin, then performance
-                // issues appear.
-                map.addLayer(trafficOverlayLayerRef.current);
-            }
-            else {
-                map.removeLayer(defaultLayersRef.current.vector.normal.traffic);
-                map.removeLayer(trafficOverlayLayerRef.current);
-            }
-        }
-    }, [trafficLayer, map]);
-    (0, react_1.useEffect)(function () {
-        if (map) {
             var resizeMap = function () {
@@ -310,0 +195,0 @@ map.getViewPort().resize();

package.json

 {
   "name": "@impargo/react-here-maps",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "React.js HERE Maps component",
@@ -16,3 +16,4 @@ "main": "dist/main.js",
     "transpile": "gulp transpile",
-    "lint": "tslint --config tslint.json --project tsconfig.json --type-check"
+    "lint": "tslint --config tslint.json --project tsconfig.json --type-check",
+    "dev": "parcel testbench/index.html"
   },
@@ -48,2 +49,3 @@ "repository": {
   "devDependencies": {
+    "@babel/core": "^7.12.0",
     "@types/chai": "^4.0.1",
@@ -93,4 +95,4 @@ "@types/enzyme": "^3.10.8",
     "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.4",
     "mocha": "^3.0.2",
+    "parcel": "^2.8.3",
     "phantomjs-polyfill": "0.0.2",
@@ -113,6 +115,3 @@ "phantomjs-prebuilt": "^2.1.12",
     "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.7.0",
-    "webpack": "^2.7.0",
-    "webpack-stream": "^3.2.0",
-    "webpack-uglify-js-plugin": "^1.1.9"
+    "watchify": "^3.7.0"
   },
@@ -119,0 +118,0 @@ "dependencies": {

No alert changes

Improved metrics

Total package byte prevSize

84494

increased by5.15%

Dev dependency count

65

decreased by-2.99%

Number of package files

42

increased by13.51%

Lines of code

1389

increased by9.03%

No dependency changes