proximiio-js-library 1.5.1 → 1.6.3

package/README.md

@@ -119,8 +119,19 @@ const map = new Proximiio.Map({
     initPolygons: false, // optional, default: false, if enabled and yours geojson includes required data the map will show defined features as polygons with hover/click effect
     considerVisibilityParam: false, // optional, default: true, if enabled all pois with visibility property defined as 'hidden' will not be visible as default, will be possible to toggle them with toggleHiddenPois() method
     fitBoundsPadding: 200, // optional, default 250, number | PaddingOptions, the amount of padding in pixels to add to the given bounds for found route, https://docs.mapbox.com/mapbox-gl-js/api/properties/#paddingoptions
+    minFitBoundsDistance: 50, // optional, default 15, number, the minimum route length in meters to zoom into it's bounds, if length is smaller regular center change will be used
     showLevelDirectionIcon: false // optional, default: false, if enabled arrow icon will be shown at the levelchanger indicating direction of level change along the found route,
-    showRasterFloorplans: false // optional, default: false, if enabled raster floorplans will be visible
+    showRasterFloorplans: false // optional, default: false, if enabled raster floorplans will be visible,
+    animatedRoute: false // optional, default: false, EXPERIMENTAL, if enabled animated dot will be displayed along the route,
+    useRasterTiles: false, // optional, default: false, this will add raster tile source and layer with defined options from rasterTilesOptions
+    rasterTilesOptions: {
+        tilesUrl: string[], mandatory
+        tileSize: number, optional, default: 256,
+        minZoom: number, optional, default: 15,
+        maxZoom: number, optional, default: 22,
+        beforeLayer: string, optional, default: 'proximiio-shop',
+        attribution: string, optional
+    },
 });
 ```
 #### Required Data for 3D Polygons
@@ -289,6 +300,36 @@ map.getMapReadyListener().subscribe(ready => {
 });
 ```
 
+###### by coords
+This method will generate route based on attached coords.
+```
+// @param latTo {number} finish latitude coordinate
+// @param lngTo {number} finish longitude coordinate
+// @param levelTo {number} finish level
+// @param latFrom {number} start latitude coordinate, optional for kiosk
+// @param lngFrom {number} start longitude coordinate, optional for kiosk
+// @param levelFrom {number} start level, optional for kiosk
+// @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
+
+map.getMapReadyListener().subscribe(ready => {
+   console.log('map ready', ready);
+   map.findRouteByCoords(48.606703739771774, 17.833092384506614, 0, 48.60684545080579, 17.833450676669543, 0);
+});
+```
+
+###### by nearest amenity feature
+This method will generate route based on nearest amenity feature.
+```
+// @param amenityId {string} amenity id of a nearest feature to look for
+// @param idFrom {string} start feature id, optional for kiosk
+// @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
+
+map.getMapReadyListener().subscribe(ready => {
+   console.log('map ready', ready);
+   map.findRouteToNearestFeature('amenityId');
+});
+```
+
 ##### Cancel Route
 Use this method to cancel generated route.
 ```

package/lib/components/map/custom-layers.js

@@ -18,6 +18,8 @@ exports.PolygonsLayer = new fill_extrusion_layer_1.default({
             '#6945ed',
             ['boolean', ['feature-state', 'hover'], false],
             '#a58dfa',
+            ['boolean', ['feature-state', 'active'], false],
+            '#ac94ff',
             ['boolean', ['feature-state', 'disabled'], false],
             '#8a8a8a',
             '#dbd7e8',

package/lib/components/map/main.d.ts

@@ -43,8 +43,19 @@ interface Options {
     zoomLevel?: number;
     considerVisibilityParam?: boolean;
     fitBoundsPadding?: number | PaddingOptions;
+    minFitBoundsDistance?: number;
     showLevelDirectionIcon?: boolean;
     showRasterFloorplans?: boolean;
+    animatedRoute?: boolean;
+    useRasterTiles?: boolean;
+    rasterTilesOptions?: {
+        tilesUrl: string[];
+        tileSize?: number;
+        minZoom?: number;
+        maxZoom?: number;
+        beforeLayer?: string;
+        attribution?: string;
+    };
 }
 interface PaddingOptions {
     bottom: number;
@@ -92,6 +103,8 @@ export declare class Map {
     private initKiosk;
     private onSetKiosk;
     private initDirectionIcon;
+    private initAnimatedRoute;
+    private initRasterTiles;
     private initPolygons;
     private onShopClick;
     handlePolygonSelection(poi?: Feature): void;
@@ -107,6 +120,8 @@ export declare class Map {
     private onRemoveAmenityFilter;
     private onResetAmenityFilters;
     private filterOutFeatures;
+    private activePolygonsAmenity;
+    private setActivePolygons;
     private handlePoiVisibility;
     private onToggleHiddenPois;
     private onSetPerson;
@@ -132,6 +147,14 @@ export declare class Map {
     private updateImages;
     private getUpcomingFloorNumber;
     private addDirectionFeatures;
+    private counter;
+    private arc;
+    private steps;
+    private animationInstances;
+    private addAnimatedRouteFeatures;
+    private animate;
+    private cancelAnimation;
+    private getClosestFeature;
     /**
      *  @memberof Map
      *  @name getMapboxInstance
@@ -281,6 +304,21 @@ export declare class Map {
      *  });
      */
     findRouteByCoords(latTo: number, lngTo: number, levelTo: number, latFrom?: number, lngFrom?: number, levelFrom?: number, accessibleRoute?: boolean): void;
+    /**
+     * This method will generate route to nearest amenity feature
+     *  @memberof Map
+     *  @name findRouteToNearestFeature
+     *  @param amenityId {string} amenity id of a nearest feature to look for
+     *  @param idFrom {string} start feature id, optional for kiosk
+     *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
+     *  @example
+     *  const map = new Proximiio.Map();
+     *  map.getMapReadyListener().subscribe(ready => {
+     *    console.log('map ready', ready);
+     *    map.findRouteToNearestFeature('amenityId');
+     *  });
+     */
+    findRouteToNearestFeature(amenityId: string, idFrom?: string, accessibleRoute?: boolean): void;
     /**
      * This method will cancel generated route
      *  @memberof Map

package/lib/components/map/main.js

@@ -126,14 +126,26 @@ var Map = /** @class */ (function () {
             initPolygons: false,
             considerVisibilityParam: true,
             fitBoundsPadding: 250,
+            minFitBoundsDistance: 15,
             showLevelDirectionIcon: false,
             showRasterFloorplans: false,
+            animatedRoute: false,
+            useRasterTiles: false,
         };
         this.showStartPoint = false;
         this.amenityIds = [];
         this.filteredAmenities = [];
         this.amenityFilters = [];
         this.amenityCategories = {};
+        // Used to increment the value of the point measurement against the route.
+        this.counter = 0;
+        // store route part animation points
+        this.arc = {};
+        // Number of steps to use in the arc and animation, more steps means
+        // a smoother arc and animation, but too many steps will result in a
+        // low frame rate
+        this.steps = 300;
+        this.animationInstances = [];
         // fix centering in case of kiosk with defined pitch/bearing/etc. in mapbox options
         if (options.isKiosk && options.mapboxOptions && options.kioskSettings && !options.mapboxOptions.center) {
             options.mapboxOptions.center = options.kioskSettings.coordinates;
@@ -297,6 +309,12 @@ var Map = /** @class */ (function () {
                         if (this.defaultOptions.showLevelDirectionIcon) {
                             this.initDirectionIcon();
                         }
+                        if (this.defaultOptions.animatedRoute) {
+                            this.initAnimatedRoute();
+                        }
+                        if (this.defaultOptions.useRasterTiles) {
+                            this.initRasterTiles();
+                        }
                         this.initPersonsMap();
                         this.map.on('click', 'proximiio-pois-icons', function (ev) {
                             _this.onShopClick(ev);
@@ -386,6 +404,54 @@ var Map = /** @class */ (function () {
             this.map.setStyle(this.state.style);
         }
     };
+    Map.prototype.initAnimatedRoute = function () {
+        if (this.map) {
+            this.state.style.addSource('route-point', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: [],
+                },
+            });
+            this.state.style.addLayer({
+                id: 'route-point',
+                type: 'circle',
+                source: 'route-point',
+                minzoom: 17,
+                maxzoom: 24,
+                paint: {
+                    'circle-color': '#1d8a9f',
+                    'circle-radius': 10,
+                },
+                filter: ['all', ['==', ['to-number', ['get', 'level']], this.state.floor.level]],
+            });
+            this.map.setStyle(this.state.style);
+        }
+    };
+    Map.prototype.initRasterTiles = function () {
+        if (this.map) {
+            this.state.style.addSource('raster-tiles', {
+                type: 'raster',
+                tiles: this.defaultOptions.rasterTilesOptions.tilesUrl,
+                tileSize: this.defaultOptions.rasterTilesOptions.tileSize
+                    ? this.defaultOptions.rasterTilesOptions.tileSize
+                    : 256,
+                attribution: this.defaultOptions.rasterTilesOptions.attribution
+                    ? this.defaultOptions.rasterTilesOptions.attribution
+                    : '',
+            });
+            this.state.style.addLayer({
+                id: 'raster-tiles',
+                type: 'raster',
+                source: 'raster-tiles',
+                minzoom: this.defaultOptions.rasterTilesOptions.minZoom ? this.defaultOptions.rasterTilesOptions.minZoom : 15,
+                maxzoom: this.defaultOptions.rasterTilesOptions.maxZoom ? this.defaultOptions.rasterTilesOptions.maxZoom : 22,
+            }, this.defaultOptions.rasterTilesOptions.maxZoom
+                ? this.defaultOptions.rasterTilesOptions.beforeLayer
+                : 'proximiio-shop');
+            this.map.setStyle(this.state.style);
+        }
+    };
     Map.prototype.initPolygons = function () {
         var _this = this;
         if (this.map) {
@@ -444,19 +510,21 @@ var Map = /** @class */ (function () {
         }
         if (connectedPolygonId) {
             this.selectedPolygon = this.state.allFeatures.features.find(function (i) { return i.properties.id === connectedPolygonId; });
-            this.map.setFeatureState({
-                source: 'main',
-                id: this.selectedPolygon.id,
-            }, {
-                selected: true,
-            });
-            if (this.selectedPolygon.properties.label_id) {
+            if (this.selectedPolygon) {
                 this.map.setFeatureState({
                     source: 'main',
-                    id: this.selectedPolygon.properties.label_id,
+                    id: this.selectedPolygon.id,
                 }, {
                     selected: true,
                 });
+                if (this.selectedPolygon.properties.label_id) {
+                    this.map.setFeatureState({
+                        source: 'main',
+                        id: this.selectedPolygon.properties.label_id,
+                    }, {
+                        selected: true,
+                    });
+                }
             }
         }
     };
@@ -738,6 +806,7 @@ var Map = /** @class */ (function () {
         }
         this.filteredAmenities = this.amenityFilters;
         this.filterOutFeatures();
+        this.setActivePolygons(amenityId);
     };
     Map.prototype.onRemoveAmenityFilter = function (amenityId, category) {
         if (category &&
@@ -752,6 +821,7 @@ var Map = /** @class */ (function () {
         }
         this.filteredAmenities = this.amenityFilters.length > 0 ? this.amenityFilters : this.amenityIds;
         this.filterOutFeatures();
+        this.setActivePolygons(null);
     };
     Map.prototype.onResetAmenityFilters = function () {
         this.amenityFilters = [];
@@ -762,6 +832,7 @@ var Map = /** @class */ (function () {
         }
         this.filteredAmenities = this.amenityIds;
         this.filterOutFeatures();
+        this.setActivePolygons(null);
     };
     Map.prototype.filterOutFeatures = function () {
         var _this = this;
@@ -801,6 +872,59 @@ var Map = /** @class */ (function () {
         });
         this.state.style.notify('filter-change');
     };
+    Map.prototype.setActivePolygons = function (amenityId) {
+        var _this = this;
+        if (this.defaultOptions.initPolygons) {
+            var activeFeatures = this.activePolygonsAmenity
+                ? this.state.allFeatures.features.filter(function (f) {
+                    var _a;
+                    return f.properties.amenity === _this.activePolygonsAmenity &&
+                        ((_a = f.properties.metadata) === null || _a === void 0 ? void 0 : _a.polygon_id) &&
+                        f.geometry.type === 'Point';
+                })
+                : [];
+            var amenityFeatures = amenityId
+                ? this.state.allFeatures.features.filter(function (f) { var _a; return f.properties.amenity === amenityId && ((_a = f.properties.metadata) === null || _a === void 0 ? void 0 : _a.polygon_id) && f.geometry.type === 'Point'; })
+                : [];
+            if (activeFeatures.length > 0) {
+                var _loop_2 = function (f) {
+                    var polygon = this_2.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id; });
+                    if (polygon) {
+                        this_2.map.setFeatureState({
+                            source: 'main',
+                            id: polygon.id,
+                        }, {
+                            active: false,
+                        });
+                    }
+                };
+                var this_2 = this;
+                for (var _i = 0, activeFeatures_1 = activeFeatures; _i < activeFeatures_1.length; _i++) {
+                    var f = activeFeatures_1[_i];
+                    _loop_2(f);
+                }
+            }
+            if (amenityFeatures.length > 0) {
+                var _loop_3 = function (f) {
+                    var polygon = this_3.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id; });
+                    if (polygon) {
+                        this_3.map.setFeatureState({
+                            source: 'main',
+                            id: polygon.id,
+                        }, {
+                            active: true,
+                        });
+                    }
+                };
+                var this_3 = this;
+                for (var _a = 0, amenityFeatures_1 = amenityFeatures; _a < amenityFeatures_1.length; _a++) {
+                    var f = amenityFeatures_1[_a];
+                    _loop_3(f);
+                }
+            }
+        }
+        this.activePolygonsAmenity = amenityId;
+    };
     Map.prototype.handlePoiVisibility = function () {
         var _this = this;
         // proximiio-pois-icons, proximiio-pois-labels, 'pois-icons', 'pois-labels'
@@ -910,11 +1034,14 @@ var Map = /** @class */ (function () {
             if (this.routingSource.route) {
                 var routeStart = this.routingSource.lines[0];
                 var textNavigation = this.routeFactory.generateRoute(JSON.stringify(this.routingSource.points), JSON.stringify(this.endPoint));
-                this.centerOnRoute(routeStart);
+                this.state = __assign(__assign({}, this.state), { loadingRoute: false, textNavigation: textNavigation });
                 if (this.defaultOptions.showLevelDirectionIcon) {
                     this.addDirectionFeatures();
                 }
-                this.state = __assign(__assign({}, this.state), { loadingRoute: false, textNavigation: textNavigation });
+                if (this.defaultOptions.animatedRoute) {
+                    this.addAnimatedRouteFeatures();
+                }
+                this.centerOnRoute(routeStart);
                 this.onRouteFoundListener.next({
                     route: this.routingSource.route,
                     TBTNav: this.defaultOptions.enableTBTNavigation ? textNavigation : null,
@@ -1097,13 +1224,20 @@ var Map = /** @class */ (function () {
             });
             if (route) {
                 var routePoints = helpers_1.lineString(this.routingSource.levelPoints[floor.level].map(function (i) { return i.geometry.coordinates; }));
+                var lengthInMeters = turf.length(routePoints, { units: 'kilometers' }) * 1000;
                 var bbox = turf.bbox(routePoints);
-                // @ts-ignore;
-                map.fitBounds(bbox, {
-                    padding: this.defaultOptions.fitBoundsPadding,
-                    bearing: this.map.getBearing(),
-                    pitch: this.map.getPitch(),
-                });
+                if (lengthInMeters >= this.defaultOptions.minFitBoundsDistance) {
+                    // @ts-ignore;
+                    map.fitBounds(bbox, {
+                        padding: this.defaultOptions.fitBoundsPadding,
+                        bearing: this.map.getBearing(),
+                        pitch: this.map.getPitch(),
+                    });
+                }
+                else {
+                    // @ts-ignore
+                    this.map.flyTo({ center: turf.center(routePoints).geometry.coordinates });
+                }
             }
             if (this.defaultOptions.isKiosk && map.getLayer('my-location-layer')) {
                 var filter = ['all', ['==', ['to-number', ['get', 'level']], floor.level]];
@@ -1120,6 +1254,11 @@ var Map = /** @class */ (function () {
                 map.setFilter('direction-icon-layer', filter);
                 this.state.style.getLayer('direction-icon-layer').filter = filter;
             }
+            if (this.defaultOptions.animatedRoute && map.getLayer('route-point')) {
+                var filter = ['all', ['==', ['to-number', ['get', 'level']], floor.level]];
+                map.setFilter('route-point', filter);
+                this.state.style.getLayer('route-point').filter = filter;
+            }
         }
         this.state = __assign(__assign({}, this.state), { floor: floor, style: this.state.style });
         this.updateCluster();
@@ -1132,6 +1271,9 @@ var Map = /** @class */ (function () {
             if (finish && this.defaultOptions.initPolygons) {
                 this.handlePolygonSelection(finish);
             }
+            if (finish && this.defaultOptions.animatedRoute) {
+                this.cancelAnimation();
+            }
             this.routingSource.update(start, finish);
         }
         catch (e) {
@@ -1144,6 +1286,20 @@ var Map = /** @class */ (function () {
         if (this.defaultOptions.initPolygons) {
             this.handlePolygonSelection();
         }
+        if (this.defaultOptions.showLevelDirectionIcon) {
+            this.state.style.sources['direction-icon-source'].data = {
+                type: 'FeatureCollection',
+                features: [],
+            };
+        }
+        if (this.defaultOptions.animatedRoute) {
+            this.state.style.sources['route-point'].data = {
+                type: 'FeatureCollection',
+                features: [],
+            };
+            this.cancelAnimation();
+        }
+        this.map.setStyle(this.state.style);
         this.routingSource.cancel();
         this.onRouteCancelListener.next('route cancelled');
     };
@@ -1166,13 +1322,20 @@ var Map = /** @class */ (function () {
             }
             if (this.map) {
                 var routePoints = helpers_1.lineString(this.routingSource.levelPoints[this.state.floor.level].map(function (i) { return i.geometry.coordinates; }));
+                var lengthInMeters = turf.length(routePoints, { units: 'kilometers' }) * 1000;
                 var bbox = turf.bbox(routePoints);
-                // @ts-ignore
-                this.map.fitBounds(bbox, {
-                    padding: this.defaultOptions.fitBoundsPadding,
-                    bearing: this.map.getBearing(),
-                    pitch: this.map.getPitch(),
-                });
+                if (lengthInMeters >= this.defaultOptions.minFitBoundsDistance) {
+                    // @ts-ignore;
+                    this.map.fitBounds(bbox, {
+                        padding: this.defaultOptions.fitBoundsPadding,
+                        bearing: this.map.getBearing(),
+                        pitch: this.map.getPitch(),
+                    });
+                }
+                else {
+                    // @ts-ignore
+                    this.map.flyTo({ center: turf.center(routePoints).geometry.coordinates });
+                }
             }
         }
     };
@@ -1235,6 +1398,80 @@ var Map = /** @class */ (function () {
         };
         this.map.setStyle(this.state.style);
     };
+    Map.prototype.addAnimatedRouteFeatures = function () {
+        this.counter = 0;
+        this.arc = {};
+        var pointsArray = [];
+        for (var _i = 0, _a = this.routingSource.lines; _i < _a.length; _i++) {
+            var routePart = _a[_i];
+            // Calculate the distance in kilometers between route start/end point.
+            var lineDistance = turf.length(routePart);
+            this.arc[routePart.id] = [];
+            // Draw an arc between the `origin` & `destination` of the two points
+            for (var i = 0; i < lineDistance; i += lineDistance / this.steps) {
+                var segment = turf.along(turf.lineString(routePart.geometry.coordinates), i);
+                this.arc[routePart.id].push(segment.geometry.coordinates);
+            }
+            var point = turf.point(routePart.geometry.coordinates[0], __assign(__assign({}, routePart.properties), { routePartId: routePart.id }));
+            pointsArray.push(point);
+        }
+        this.state.style.sources['route-point'].data = turf.featureCollection(pointsArray);
+        this.map.setStyle(this.state.style);
+        this.animate();
+    };
+    Map.prototype.animate = function () {
+        var _this = this;
+        if (Object.keys(this.arc).length > 0) {
+            var pointsArray = [];
+            for (var _i = 0, _a = Object.entries(this.arc); _i < _a.length; _i++) {
+                var _b = _a[_i], routeKey = _b[0], routePositions = _b[1];
+                if (routePositions[this.counter]) {
+                    var point = turf.point(routePositions[this.counter], __assign(__assign({}, this.routingSource.route[routeKey].properties), { routePartId: routeKey }));
+                    pointsArray.push(point);
+                }
+            }
+            // Update the source with this new data
+            this.state.style.sources['route-point'].data = turf.featureCollection(pointsArray);
+            this.map.setStyle(this.state.style);
+            // Request the next frame of animation as long as the end has not been reached
+            if (this.counter < this.steps) {
+                var animationInstance = window.requestAnimationFrame(this.animate.bind(this));
+                this.animationInstances.push(animationInstance);
+            }
+            if (this.counter === this.steps) {
+                setTimeout(function () {
+                    // Reset the counter
+                    _this.counter = 0;
+                    // cancel animation
+                    // this.cancelAnimation();
+                    // Restart the animation
+                    _this.animate();
+                }, 2000);
+            }
+            this.counter++;
+        }
+    };
+    Map.prototype.cancelAnimation = function () {
+        for (var _i = 0, _a = this.animationInstances; _i < _a.length; _i++) {
+            var instance = _a[_i];
+            window.cancelAnimationFrame(instance);
+        }
+    };
+    Map.prototype.getClosestFeature = function (amenityId, fromFeature) {
+        var sameLevelfeatures = this.state.allFeatures.features.filter(function (i) {
+            return i.properties.amenity === amenityId &&
+                i.geometry.type === 'Point' &&
+                i.properties.level === fromFeature.properties.level;
+        });
+        var features = this.state.allFeatures.features.filter(function (i) { return i.properties.amenity === amenityId && i.geometry.type === 'Point'; });
+        var targetPoint = turf.point(fromFeature.geometry.coordinates);
+        if (sameLevelfeatures.length > 0 || features.length > 0) {
+            return turf.nearestPoint(targetPoint, turf.featureCollection(sameLevelfeatures.length > 0 ? sameLevelfeatures : features));
+        }
+        else {
+            return false;
+        }
+    };
     /**
      *  @memberof Map
      *  @name getMapboxInstance
@@ -1458,6 +1695,33 @@ var Map = /** @class */ (function () {
         this.routingSource.toggleAccessible(accessibleRoute);
         this.onRouteUpdate(this.defaultOptions.isKiosk ? this.startPoint : fromFeature, toFeature);
     };
+    /**
+     * This method will generate route to nearest amenity feature
+     *  @memberof Map
+     *  @name findRouteToNearestFeature
+     *  @param amenityId {string} amenity id of a nearest feature to look for
+     *  @param idFrom {string} start feature id, optional for kiosk
+     *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
+     *  @example
+     *  const map = new Proximiio.Map();
+     *  map.getMapReadyListener().subscribe(ready => {
+     *    console.log('map ready', ready);
+     *    map.findRouteToNearestFeature('amenityId');
+     *  });
+     */
+    Map.prototype.findRouteToNearestFeature = function (amenityId, idFrom, accessibleRoute) {
+        var fromFeature = this.defaultOptions.isKiosk
+            ? this.startPoint
+            : this.state.allFeatures.features.find(function (f) { return f.id === idFrom || f.properties.id === idFrom; });
+        var toFeature = this.getClosestFeature(amenityId, fromFeature);
+        if (toFeature) {
+            this.routingSource.toggleAccessible(accessibleRoute);
+            this.onRouteUpdate(this.defaultOptions.isKiosk ? this.startPoint : fromFeature, toFeature);
+        }
+        else {
+            throw new Error("Feature not found");
+        }
+    };
     /**
      * This method will cancel generated route
      *  @memberof Map