proximiio-js-library 1.11.39 → 1.11.41

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

@@ -164,6 +164,7 @@ export declare class Map {
     private clusterSource;
     private imageSourceManager;
     private onMapReadyListener;
+    private onMainSourceLoadedListener;
     private onMapFailedListener;
     private onPlaceSelectListener;
     private onFloorSelectListener;
@@ -193,6 +194,7 @@ export declare class Map {
     private selectedPolygon;
     private currentStep;
     private kioskPopup;
+    private mainSourceLoaded;
     constructor(options: Options);
     private initialize;
     private cancelObservers;
@@ -250,6 +252,7 @@ export declare class Map {
     private onPlaceSelect;
     private onFloorSelect;
     private onRouteUpdate;
+    private onRoutePreview;
     private onRouteCancel;
     private centerOnPoi;
     private centerOnRoute;
@@ -296,6 +299,17 @@ export declare class Map {
      *  });
      */
     getMapReadyListener(): CustomSubject<boolean>;
+    /**
+     *  @memberof Map
+     *  @name getMainSourceLoadedListener
+     *  @returns returns main source fully loaded listener
+     *  @example
+     *  const map = new Proximiio.Map();
+     *  map.getMainSourceLoadedListener().subscribe(loaded => {
+     *    console.log('map loaded', loaded);
+     *  });
+     */
+    getMainSourceLoadedListener(): CustomSubject<boolean>;
     /**
      *  @memberof Map
      *  @name getMapFailedListener
@@ -408,6 +422,7 @@ export declare class Map {
      *  @param idFrom {string} start feature id, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -415,7 +430,7 @@ export declare class Map {
      *    map.findRouteByIds('finishId, 'startId');
      *  });
      */
-    findRouteByIds(idTo: string, idFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel): void;
+    findRouteByIds(idTo: string, idFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel, addToMap?: boolean): void;
     /**
      * This method will generate route based on selected features by their titles
      *  @memberof Map
@@ -424,6 +439,7 @@ export declare class Map {
      *  @param titleFrom {string} start feature title, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -431,7 +447,7 @@ export declare class Map {
      *    map.findRouteByTitle('myFeatureTitle', 'anotherFeatureTitle');
      *  });
      */
-    findRouteByTitle(titleTo: string, titleFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel): void;
+    findRouteByTitle(titleTo: string, titleFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel, addToMap?: boolean): void;
     /**
      * This method will generate route based on selected features by their titles
      *  @memberof Map
@@ -444,6 +460,7 @@ export declare class Map {
      *  @param levelFrom {number} start level, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -451,7 +468,7 @@ export declare class Map {
      *    map.findRouteByCoords(48.606703739771774, 17.833092384506614, 0, 48.60684545080579, 17.833450676669543, 0);
      *  });
      */
-    findRouteByCoords(latTo: number, lngTo: number, levelTo: number, latFrom?: number, lngFrom?: number, levelFrom?: number, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel): void;
+    findRouteByCoords(latTo: number, lngTo: number, levelTo: number, latFrom?: number, lngFrom?: number, levelFrom?: number, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel, addToMap?: boolean): void;
     /**
      * This method will generate route to nearest amenity feature
      *  @memberof Map
@@ -460,6 +477,7 @@ export declare class Map {
      *  @param idFrom {string} start feature id, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -467,7 +485,7 @@ export declare class Map {
      *    map.findRouteToNearestFeature('amenityId');
      *  });
      */
-    findRouteToNearestFeature(amenityId: string, idFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel): void;
+    findRouteToNearestFeature(amenityId: string, idFrom?: string, accessibleRoute?: boolean, wayfindingConfig?: WayfindingConfigModel, addToMap?: boolean): void;
     /**
      * This method will cancel generated route
      *  @memberof Map

package/lib/components/map/main.js

@@ -71,6 +71,7 @@ export class Map {
         this.clusterSource = new ClusterSource();
         this.imageSourceManager = new ImageSourceManager();
         this.onMapReadyListener = new CustomSubject();
+        this.onMainSourceLoadedListener = new CustomSubject();
         this.onMapFailedListener = new CustomSubject();
         this.onPlaceSelectListener = new CustomSubject();
         this.onFloorSelectListener = new CustomSubject();
@@ -203,6 +204,7 @@ export class Map {
         this.hiddenAmenities = [];
         this.amenityCategories = {};
         this.currentStep = 0;
+        this.mainSourceLoaded = false;
         this.step = 0;
         this.animateRoute = () => {
             var _a;
@@ -406,12 +408,7 @@ export class Map {
             });
         }
         // @ts-ignore
-        if (maplibregl.getRTLTextPluginStatus() !== 'loaded' &&
-            maplibregl.getRTLTextPluginStatus() !== 'unavailable' &&
-            maplibregl.getRTLTextPluginStatus() !== 'deferred') {
-            // @ts-ignore
-            maplibregl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js', null, true);
-        }
+        maplibregl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js', null, true);
         this.map = new maplibregl.Map(Object.assign(Object.assign({}, this.defaultOptions.mapboxOptions), { container: this.defaultOptions.selector ? this.defaultOptions.selector : 'map' }));
         this.map.on('load', (e) => {
             this.onMapReady(e);
@@ -657,6 +654,14 @@ export class Map {
                     });
                 }
                 this.onMapReadyListener.next(true);
+                setTimeout(() => {
+                    map.on('sourcedata', (ev) => {
+                        if (ev.sourceId === 'main' && ev.isSourceLoaded && !this.mainSourceLoaded) {
+                            this.mainSourceLoaded = true;
+                            this.onMainSourceLoadedListener.next(true);
+                        }
+                    });
+                }, 500);
                 if (this.defaultOptions.useGpsLocation) {
                     this.initGeoLocation();
                 }
@@ -1067,7 +1072,10 @@ export class Map {
         if (this.map) {
             if (this.defaultOptions.routeAnimation.type === 'point' || this.defaultOptions.routeAnimation.type === 'puck') {
                 const routingLineLayer = this.state.style.getLayer('proximiio-routing-line-remaining');
+                const routingLineSymbolLayer = this.state.style.getLayer('proximiio-routing-line-symbols');
                 if (routingLineLayer && this.defaultOptions.polygonsOptions.drawRouteUnderPolygons) {
+                    this.state.style.removeLayer('proximiio-routing-line-symbols');
+                    this.state.style.addLayer(routingLineSymbolLayer, 'proximiio-paths');
                     this.state.style.removeLayer('proximiio-routing-line-remaining');
                     this.state.style.addLayer(routingLineLayer, 'proximiio-paths');
                 }
@@ -2108,6 +2116,7 @@ export class Map {
                         details: this.defaultOptions.routeWithDetails ? this.routingSource.details : null,
                         start: this.startPoint,
                         end: this.endPoint,
+                        preview: false,
                     });
                     if (this.defaultOptions.sendAnalytics) {
                         const logger = new WayfindingLogger({
@@ -2141,6 +2150,34 @@ export class Map {
                 }
                 return;
             }
+            if (event === 'preview-finished') {
+                if (this.routingSource.route) {
+                    this.currentStep = 0;
+                    const textNavigation = {
+                        steps: this.routingSource.steps,
+                        destination: this.endPoint,
+                        start: this.startPoint,
+                    };
+                    this.state = Object.assign(Object.assign({}, this.state), { loadingRoute: false, textNavigation });
+                    if (this.defaultOptions.forceFloorLevel !== null && this.defaultOptions.forceFloorLevel !== undefined) {
+                        this.routingSource.data.features = this.routingSource.data.features.map((f) => {
+                            if (f.properties.level !== this.defaultOptions.forceFloorLevel) {
+                                f.properties.level = this.defaultOptions.forceFloorLevel;
+                            }
+                            return f;
+                        });
+                    }
+                    this.onRouteFoundListener.next({
+                        route: this.routingSource.route,
+                        TBTNav: this.defaultOptions.enableTBTNavigation ? textNavigation : null,
+                        details: this.defaultOptions.routeWithDetails ? this.routingSource.details : null,
+                        start: this.startPoint,
+                        end: this.endPoint,
+                        preview: true,
+                    });
+                }
+                return;
+            }
             if (event === 'route-undefined') {
                 console.log('route not found');
                 this.state = Object.assign(Object.assign({}, this.state), { loadingRoute: false });
@@ -2401,6 +2438,11 @@ export class Map {
         }
         this.state = Object.assign(Object.assign({}, this.state), { style: this.state.style });
     }
+    onRoutePreview(start, finish) {
+        this.startPoint = start;
+        this.endPoint = finish;
+        this.routingSource.update(start, finish, true);
+    }
     onRouteCancel() {
         this.state = Object.assign(Object.assign({}, this.state), { textNavigation: null });
         if (this.defaultOptions.initPolygons) {
@@ -2522,7 +2564,12 @@ export class Map {
         }
     }
     onRestartRouteAnimation(delay) {
+        var _a;
         if (this.defaultOptions.routeAnimation.type === 'point' || this.defaultOptions.routeAnimation.type === 'puck') {
+            const route = this.routingSource.route[`path-part-${this.currentStep}`] &&
+                ((_a = this.routingSource.route[`path-part-${this.currentStep}`].properties) === null || _a === void 0 ? void 0 : _a.level) === this.state.floor.level
+                ? this.routingSource.route[`path-part-${this.currentStep}`]
+                : lineString(this.routingSource.levelPoints[this.state.floor.level].map((i) => i.geometry.coordinates), { level: this.state.floor.level });
             clearInterval(this.animationInterval);
             // @ts-ignore
             this.map.getSource('pointAlong').setData({
@@ -2534,6 +2581,12 @@ export class Map {
                 type: 'FeatureCollection',
                 features: [],
             });
+            setTimeout(() => {
+                this.map.jumpTo({
+                    center: route.geometry.coordinates[0],
+                });
+            }, 100);
+            this.map.setStyle(this.state.style);
         }
         setTimeout(() => {
             this.animateRoute();
@@ -2543,6 +2596,7 @@ export class Map {
         if (this.defaultOptions.isKiosk && this.defaultOptions.kioskSettings.showLabel && this.kioskPopup) {
             this.kioskPopup.setHTML(translations[this.defaultOptions.language].YOU_ARE_HERE);
         }
+        this.state.style.setSource('main', this.geojsonSource);
     }
     getClosestFeature(amenityId, fromFeature) {
         let sameLevelfeatures = this.state.allFeatures.features.filter((i) => i.properties.amenity === amenityId &&
@@ -2604,6 +2658,19 @@ export class Map {
     getMapReadyListener() {
         return this.onMapReadyListener;
     }
+    /**
+     *  @memberof Map
+     *  @name getMainSourceLoadedListener
+     *  @returns returns main source fully loaded listener
+     *  @example
+     *  const map = new Proximiio.Map();
+     *  map.getMainSourceLoadedListener().subscribe(loaded => {
+     *    console.log('map loaded', loaded);
+     *  });
+     */
+    getMainSourceLoadedListener() {
+        return this.onMainSourceLoadedListener;
+    }
     /**
      *  @memberof Map
      *  @name getMapFailedListener
@@ -2762,6 +2829,7 @@ export class Map {
      *  @param idFrom {string} start feature id, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -2769,7 +2837,7 @@ export class Map {
      *    map.findRouteByIds('finishId, 'startId');
      *  });
      */
-    findRouteByIds(idTo, idFrom, accessibleRoute, wayfindingConfig) {
+    findRouteByIds(idTo, idFrom, accessibleRoute, wayfindingConfig, addToMap) {
         const fromFeature = idFrom
             ? this.state.allFeatures.features.find((f) => f.id === idFrom || f.properties.id === idFrom)
             : this.startPoint;
@@ -2778,7 +2846,12 @@ export class Map {
         if (wayfindingConfig) {
             this.routingSource.setConfig(wayfindingConfig);
         }
-        this.onRouteUpdate(fromFeature, toFeature);
+        if (addToMap !== false) {
+            this.onRouteUpdate(fromFeature, toFeature);
+        }
+        else {
+            this.onRoutePreview(fromFeature, toFeature);
+        }
     }
     /**
      * This method will generate route based on selected features by their titles
@@ -2788,6 +2861,7 @@ export class Map {
      *  @param titleFrom {string} start feature title, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -2795,7 +2869,7 @@ export class Map {
      *    map.findRouteByTitle('myFeatureTitle', 'anotherFeatureTitle');
      *  });
      */
-    findRouteByTitle(titleTo, titleFrom, accessibleRoute, wayfindingConfig) {
+    findRouteByTitle(titleTo, titleFrom, accessibleRoute, wayfindingConfig, addToMap) {
         const fromFeature = titleFrom
             ? this.state.allFeatures.features.find((f) => f.properties.title === titleFrom)
             : this.startPoint;
@@ -2804,7 +2878,12 @@ export class Map {
         if (wayfindingConfig) {
             this.routingSource.setConfig(wayfindingConfig);
         }
-        this.onRouteUpdate(fromFeature, toFeature);
+        if (addToMap !== false) {
+            this.onRouteUpdate(fromFeature, toFeature);
+        }
+        else {
+            this.onRoutePreview(fromFeature, toFeature);
+        }
     }
     /**
      * This method will generate route based on selected features by their titles
@@ -2818,6 +2897,7 @@ export class Map {
      *  @param levelFrom {number} start level, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -2825,7 +2905,7 @@ export class Map {
      *    map.findRouteByCoords(48.606703739771774, 17.833092384506614, 0, 48.60684545080579, 17.833450676669543, 0);
      *  });
      */
-    findRouteByCoords(latTo, lngTo, levelTo, latFrom, lngFrom, levelFrom, accessibleRoute, wayfindingConfig) {
+    findRouteByCoords(latTo, lngTo, levelTo, latFrom, lngFrom, levelFrom, accessibleRoute, wayfindingConfig, addToMap) {
         const fromFeature = latFrom && lngFrom && levelFrom
             ? feature({ type: 'Point', coordinates: [lngFrom, latFrom] }, { level: levelFrom })
             : this.startPoint;
@@ -2834,7 +2914,12 @@ export class Map {
         if (wayfindingConfig) {
             this.routingSource.setConfig(wayfindingConfig);
         }
-        this.onRouteUpdate(fromFeature, toFeature);
+        if (addToMap !== false) {
+            this.onRouteUpdate(fromFeature, toFeature);
+        }
+        else {
+            this.onRoutePreview(fromFeature, toFeature);
+        }
     }
     /**
      * This method will generate route to nearest amenity feature
@@ -2844,6 +2929,7 @@ export class Map {
      *  @param idFrom {string} start feature id, optional for kiosk
      *  @param accessibleRoute {boolean} if true generated routed will be accessible without stairs, etc., optional
      *  @param wayfindingConfig {WayfindingConfigModel} wayfinding configuration, optional
+     *  @param addToMap {boolean} default true, if set to false route will not be added to map
      *  @example
      *  const map = new Proximiio.Map();
      *  map.getMapReadyListener().subscribe(ready => {
@@ -2851,7 +2937,7 @@ export class Map {
      *    map.findRouteToNearestFeature('amenityId');
      *  });
      */
-    findRouteToNearestFeature(amenityId, idFrom, accessibleRoute, wayfindingConfig) {
+    findRouteToNearestFeature(amenityId, idFrom, accessibleRoute, wayfindingConfig, addToMap) {
         const fromFeature = idFrom
             ? this.state.allFeatures.features.find((f) => f.id === idFrom || f.properties.id === idFrom)
             : this.startPoint;
@@ -2861,7 +2947,12 @@ export class Map {
             if (wayfindingConfig) {
                 this.routingSource.setConfig(wayfindingConfig);
             }
-            this.onRouteUpdate(fromFeature, toFeature);
+            if (addToMap !== false) {
+                this.onRouteUpdate(fromFeature, toFeature);
+            }
+            else {
+                this.onRoutePreview(fromFeature, toFeature);
+            }
         }
         else {
             throw new Error(`Feature not found`);

package/lib/components/map/sources/geojson_source.js

@@ -1,6 +1,5 @@
 import DataSource from './data_source';
 import { FeatureCollection } from '../../../models/feature';
-import { convertToRTL } from '../../../common';
 export default class GeoJSONSource extends DataSource {
     constructor(features) {
         super('main');
@@ -34,9 +33,6 @@ export default class GeoJSONSource extends DataSource {
                 ? feature.properties.title_i18n[language]
                 : feature.properties.title;
         }
-        if (language === 'ar') {
-            feature.properties.title = convertToRTL(feature.properties.title);
-        }
     }
     query(query, level = 0) {
         return this.data.features.filter((f) => f.properties.title && f.properties.title.toLowerCase().match(query.toLowerCase()));

package/lib/components/map/sources/routing_source.d.ts

@@ -31,7 +31,7 @@ export default class RoutingSource extends DataSource {
     constructor();
     toggleAccessible(value: any): void;
     setConfig(config: WayfindingConfigModel): void;
-    update(start?: Feature, finish?: Feature): Promise<void>;
+    update(start?: Feature, finish?: Feature, preview?: boolean): Promise<void>;
     cancel(): void;
 }
 export {};

package/lib/components/map/sources/routing_source.js

@@ -24,7 +24,7 @@ export default class RoutingSource extends DataSource {
     setConfig(config) {
         this.routing.setConfig(config);
     }
-    update(start, finish) {
+    update(start, finish, preview) {
         return __awaiter(this, void 0, void 0, function* () {
             this.start = start;
             this.finish = finish;
@@ -64,10 +64,12 @@ export default class RoutingSource extends DataSource {
                 //   line.properties.amenity = 'chevron_right'
                 //   return line
                 // })
-                this.data = new FeatureCollection({
-                    features: [this.start, this.finish].concat(this.lines || []).filter((i) => i),
-                });
-                this.notify('loading-finished');
+                this.data = preview
+                    ? new FeatureCollection({})
+                    : new FeatureCollection({
+                        features: [this.start, this.finish].concat(this.lines || []).filter((i) => i),
+                    });
+                this.notify(preview ? 'preview-finished' : 'loading-finished');
                 this.notify('feature-updated');
             }
         });