proximiio-js-library 1.11.13 → 1.11.15

package/README.md

@@ -164,7 +164,10 @@ const map = new Proximiio.Map({
       coordinates: [number, number],
 
       // Floor level of a kiosk starting point
-      level: number
+      level: number,
+
+      // Show/hide 'You are here' label under the kiosk point, default: false
+      showLabel: false
    },
 
    // Optional, default: false, if enabled and yours GeoJSON includes required data
@@ -296,6 +299,12 @@ const map = new Proximiio.Map({
       // Optional, default: 120, higher fps = smoother animation
       fps: 60,
 
+      // Optional, you can define icon via url to be displayed on the route instead of circular point
+      pointIconUrl: 'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
+
+      // Optional, default: '1', scales the original size of the icon by the provided factor
+      pointIconSize: '1',
+
       // Optional, default: '#1d8a9f', color of the point animated along the route
       pointColor: '#1d8a9f',
 

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

@@ -7,6 +7,7 @@ export declare const translations: {
         UP: string;
         DOWN: string;
         TO_FLOOR: string;
+        YOU_ARE_HERE: string;
     };
     fi: {
         ELEVATOR: string;
@@ -16,6 +17,7 @@ export declare const translations: {
         UP: string;
         DOWN: string;
         TO_FLOOR: string;
+        YOU_ARE_HERE: string;
     };
     ar: {
         ELEVATOR: string;
@@ -25,6 +27,7 @@ export declare const translations: {
         UP: string;
         DOWN: string;
         TO_FLOOR: string;
+        YOU_ARE_HERE: string;
     };
     it: {
         ELEVATOR: string;
@@ -34,5 +37,6 @@ export declare const translations: {
         UP: string;
         DOWN: string;
         TO_FLOOR: string;
+        YOU_ARE_HERE: string;
     };
 };

package/lib/components/map/i18n.js

@@ -7,6 +7,7 @@ export const translations = {
         UP: 'up',
         DOWN: 'down',
         TO_FLOOR: 'to floor',
+        YOU_ARE_HERE: 'You are here',
     },
     fi: {
         ELEVATOR: 'Hissi',
@@ -16,6 +17,7 @@ export const translations = {
         UP: 'ylös',
         DOWN: 'alas',
         TO_FLOOR: 'kerrokseen',
+        YOU_ARE_HERE: 'Olet täällä',
     },
     ar: {
         ELEVATOR: 'المصعد',
@@ -25,6 +27,7 @@ export const translations = {
         UP: 'صعوداً',
         DOWN: 'هبوطاً',
         TO_FLOOR: 'إلى الطابق',
+        YOU_ARE_HERE: 'أنت هنا',
     },
     it: {
         ELEVATOR: 'Ascensore',
@@ -34,5 +37,6 @@ export const translations = {
         UP: 'su',
         DOWN: 'giù',
         TO_FLOOR: 'al piano',
+        YOU_ARE_HERE: 'Tu sei qui',
     },
 };

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

@@ -67,6 +67,7 @@ export interface Options {
     kioskSettings?: {
         coordinates: [number, number];
         level: number;
+        showLabel?: boolean;
     };
     initPolygons?: boolean;
     polygonsOptions?: PolygonOptions;
@@ -87,6 +88,8 @@ export interface Options {
         duration?: number;
         durationMultiplier?: number;
         fps?: number;
+        pointIconUrl?: string;
+        pointIconSize?: number;
         pointColor?: string;
         pointRadius?: number;
         lineColor?: string;
@@ -237,6 +240,7 @@ export declare class Map {
     private step;
     private animateRoute;
     private updateData;
+    private translateLayers;
     getClosestFeature(amenityId: string, fromFeature?: Feature): false | Feature;
     getFloorName(floor: FloorModel): string;
     /**

package/lib/components/map/main.js

@@ -157,6 +157,7 @@ export class Map {
                 followRoute: true,
                 durationMultiplier: 30,
                 fps: 120,
+                pointIconSize: 1,
                 pointColor: '#1d8a9f',
                 pointRadius: 8,
                 lineColor: '#6945ed',
@@ -563,6 +564,16 @@ export class Map {
                     if (this.defaultOptions.animatedRoute) {
                         console.log(`animatedRoute property is deprecated, please use routeAnimation.enabled instead!`);
                     }
+                    if (this.defaultOptions.routeAnimation.pointIconUrl) {
+                        map.loadImage(this.defaultOptions.routeAnimation.pointIconUrl, (error, image) => {
+                            if (error) {
+                                console.error(error);
+                            }
+                            if (image) {
+                                map.addImage('pointIcon', image);
+                            }
+                        });
+                    }
                     this.initAnimatedRoute();
                 }
                 if (this.defaultOptions.hiddenAmenities) {
@@ -642,7 +653,7 @@ export class Map {
                         features: [this.startPoint],
                     },
                 });
-                this.state.style.addLayer({
+                let kioskLayer = {
                     id: 'my-location-layer',
                     type: 'symbol',
                     source: 'my-location',
@@ -650,7 +661,14 @@ export class Map {
                         'icon-image': 'pulsing-dot',
                     },
                     filter: ['all', ['==', ['to-number', ['get', 'level']], this.state.floor.level]],
-                });
+                };
+                if (this.defaultOptions.kioskSettings.showLabel) {
+                    kioskLayer = Object.assign(Object.assign({}, kioskLayer), { layout: Object.assign(Object.assign({}, kioskLayer.layout), { 'text-field': translations[this.defaultOptions.language].YOU_ARE_HERE, 'text-font': ['Amiri Bold'], 'text-offset': [0, 0.6], 'text-anchor': 'top', 'text-allow-overlap': true, 'text-size': 18 }), paint: {
+                            'text-halo-width': 1,
+                            'text-halo-color': '#ffffff',
+                        } });
+                }
+                this.state.style.addLayer(kioskLayer);
                 this.centerOnPoi(this.startPoint);
             }
         }
@@ -914,17 +932,33 @@ export class Map {
                         features: [],
                     },
                 });
-                this.state.style.addLayer({
-                    id: 'pointAlong',
-                    type: 'circle',
-                    source: 'pointAlong',
-                    minzoom: 17,
-                    maxzoom: 24,
-                    paint: {
-                        'circle-color': this.defaultOptions.routeAnimation.pointColor,
-                        'circle-radius': this.defaultOptions.routeAnimation.pointRadius,
-                    },
-                }, 'lineAlong');
+                if (this.defaultOptions.routeAnimation.pointIconUrl) {
+                    this.state.style.addLayer({
+                        id: 'pointAlong',
+                        type: 'symbol',
+                        source: 'pointAlong',
+                        minzoom: 17,
+                        maxzoom: 24,
+                        layout: {
+                            'icon-image': 'pointIcon',
+                            'icon-size': this.defaultOptions.routeAnimation.pointIconSize,
+                            'icon-allow-overlap': true,
+                        },
+                    }, 'lineAlong');
+                }
+                else {
+                    this.state.style.addLayer({
+                        id: 'pointAlong',
+                        type: 'circle',
+                        source: 'pointAlong',
+                        minzoom: 17,
+                        maxzoom: 24,
+                        paint: {
+                            'circle-color': this.defaultOptions.routeAnimation.pointColor,
+                            'circle-radius': this.defaultOptions.routeAnimation.pointRadius,
+                        },
+                    }, 'lineAlong');
+                }
             }
             if (this.defaultOptions.routeAnimation.type === 'dash') {
                 if (this.state.style.getLayer('proximiio-routing-line-remaining')) {
@@ -2173,6 +2207,13 @@ export class Map {
                 : this.state.floor.level;
         }
     }
+    translateLayers() {
+        if (this.defaultOptions.isKiosk &&
+            this.defaultOptions.kioskSettings.showLabel &&
+            this.map.getLayer('my-location-layer')) {
+            this.map.setLayoutProperty('my-location-layer', 'text-field', translations[this.defaultOptions.language].YOU_ARE_HERE);
+        }
+    }
     getClosestFeature(amenityId, fromFeature) {
         let sameLevelfeatures = this.state.allFeatures.features.filter((i) => i.properties.amenity === amenityId &&
             i.geometry.type === 'Point' &&
@@ -2248,6 +2289,7 @@ export class Map {
     setLanguage(language) {
         this.defaultOptions.language = language;
         this.onFeaturesChange();
+        this.translateLayers();
     }
     /**
      * This method will set an active place, load floors etc. Have to be called after map is ready, see getMapReadyListener.