proximiio-js-library 1.7.2 → 1.8.0

package/README.md

@@ -125,15 +125,27 @@ const map = new Proximiio.Map({
     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
+        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
     },
+    handleUrlParams: false, // optional, default: false, if enabled you can define place, start and destination features for routing in url params and library will handle those, you can change param names via urlParams option listed below
+    urlParams: {
+      startFeature: string, // optional, default: 'startFeature', library will search for the start feature by it's id or title defined within provided param
+      destinationFeature: string, // optional, default: 'destinationFeature', library will search for the destination feature by it's id or title defined within provided param
+      defaultPlace: string, // optional, default: 'defaultPlace', library will search for the place by it's id or title defined within provided param
+    }
+    useGpsLocation: false, // optional, default: false, if enabled your location will be detected with geolocation API and used as a starting point for routing
 });
 ```
+#### Initiating with url params
+Library can handle some params from url in case you will enable `handleUrlParams` in map constructor. There's nothing else special required, just provide them in browser url like this as default:
+
+`http://your-server/?startFeature=featureIdOrTitle&destinationFeature=featureIdOrTitle&defaultPlace=placeIdOrTitle`
+
 #### Required Data for 3D Polygons
 As first there must be a MultiPolygon feature created which will be a polygon itself, it's also nice to have a label-line property in properties set. Label-line is just imaginary line alongside which poi title will be drawn. At last, you have to connect poi to polygon via adding its id to poi metadata like polygon_id property.
 

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

@@ -57,6 +57,13 @@ interface Options {
         beforeLayer?: string;
         attribution?: string;
     };
+    handleUrlParams?: boolean;
+    urlParams?: {
+        startFeauture?: string;
+        destinationFeature?: string;
+        defaultPlace?: string;
+    };
+    useGpsLocation?: boolean;
 }
 interface PaddingOptions {
     bottom: number;
@@ -105,6 +112,7 @@ export declare class Map {
     private onMapReady;
     private initKiosk;
     private onSetKiosk;
+    private initGeoLocation;
     private initDirectionIcon;
     private initAnimatedRoute;
     private initRasterTiles;

package/lib/components/map/main.js

@@ -134,6 +134,13 @@ var Map = /** @class */ (function () {
             showRasterFloorplans: false,
             animatedRoute: false,
             useRasterTiles: false,
+            handleUrlParams: false,
+            urlParams: {
+                startFeauture: 'startFeature',
+                destinationFeature: 'destinationFeature',
+                defaultPlace: 'defaultPlace',
+            },
+            useGpsLocation: false,
         };
         this.showStartPoint = false;
         this.amenityIds = [];
@@ -155,8 +162,13 @@ var Map = /** @class */ (function () {
         if (options.isKiosk && options.mapboxOptions && options.kioskSettings && !options.mapboxOptions.center) {
             options.mapboxOptions.center = options.kioskSettings.coordinates;
         }
+        var urlParams = __assign(__assign({}, this.defaultOptions.urlParams), options.urlParams);
         this.defaultOptions = __assign(__assign({}, this.defaultOptions), options);
+        this.defaultOptions.urlParams = urlParams;
         this.state = exports.globalState;
+        if (this.defaultOptions.isKiosk && this.defaultOptions.useGpsLocation) {
+            throw new Error("It's not possible to use both isKiosk and useGpsLocation options as enabled!");
+        }
         this.onSourceChange = this.onSourceChange.bind(this);
         this.onSyntheticChange = this.onSyntheticChange.bind(this);
         this.onStyleChange = this.onStyleChange.bind(this);
@@ -195,23 +207,36 @@ var Map = /** @class */ (function () {
     Map.prototype.fetch = function () {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var _d, places, style, styles, features, amenities, user, defaultPlace, place, center;
+            var placeParam, urlParams, _d, places, style, styles, features, amenities, user, defaultPlace, place, center;
             var _this = this;
             return __generator(this, function (_e) {
                 switch (_e.label) {
-                    case 0: return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons)];
+                    case 0:
+                        placeParam = null;
+                        if (this.defaultOptions.handleUrlParams) {
+                            urlParams = new URLSearchParams(window.location.search);
+                            placeParam = urlParams.get(this.defaultOptions.urlParams.defaultPlace);
+                        }
+                        return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons)];
                     case 1:
                         _d = _e.sent(), places = _d.places, style = _d.style, styles = _d.styles, features = _d.features, amenities = _d.amenities;
                         return [4 /*yield*/, auth_1.default.getCurrentUser()];
                     case 2:
                         user = _e.sent();
-                        defaultPlace = places.find(function (p) { return p.id === _this.defaultOptions.defaultPlaceId; });
+                        defaultPlace = placeParam
+                            ? places.find(function (p) { return p.id === placeParam || p.name === placeParam; })
+                            : places.find(function (p) { return p.id === _this.defaultOptions.defaultPlaceId; });
                         place = places.length > 0 ? (defaultPlace ? defaultPlace : places[0]) : new place_1.PlaceModel({});
-                        center = ((_a = this.defaultOptions.mapboxOptions) === null || _a === void 0 ? void 0 : _a.center)
-                            ? this.defaultOptions.mapboxOptions.center
-                            : this.defaultOptions.isKiosk
-                                ? (_b = this.defaultOptions.kioskSettings) === null || _b === void 0 ? void 0 : _b.coordinates
-                                : [place.location.lng, place.location.lat];
+                        center = [place.location.lng, place.location.lat];
+                        if ((_a = this.defaultOptions.mapboxOptions) === null || _a === void 0 ? void 0 : _a.center) {
+                            center = this.defaultOptions.mapboxOptions.center;
+                        }
+                        if (this.defaultOptions.isKiosk) {
+                            center = (_b = this.defaultOptions.kioskSettings) === null || _b === void 0 ? void 0 : _b.coordinates;
+                        }
+                        if (placeParam) {
+                            center = [place.location.lng, place.location.lat];
+                        }
                         style.center = center;
                         this.defaultOptions.mapboxOptions.center = style.center;
                         if (this.defaultOptions.zoomLevel) {
@@ -246,7 +271,7 @@ var Map = /** @class */ (function () {
     Map.prototype.onMapReady = function (e) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
-            var map, routingLayer, usePrefixed, shopsLayer, routingSymbolsLayer, decodedChevron, decodedPersonIcon, decodedFloorchangeUpImage, decodedFloorchangeDownImage;
+            var map, routingLayer, usePrefixed, shopsLayer, routingSymbolsLayer, decodedChevron, decodedPersonIcon, decodedFloorchangeUpImage, decodedFloorchangeDownImage, urlParams, startParam_1, destinationParam_1, startFeature, destinationFeature;
             var _this = this;
             return __generator(this, function (_c) {
                 switch (_c.label) {
@@ -311,6 +336,9 @@ var Map = /** @class */ (function () {
                         if (this.defaultOptions.isKiosk) {
                             this.initKiosk();
                         }
+                        if (this.defaultOptions.useGpsLocation) {
+                            this.initGeoLocation();
+                        }
                         if (this.defaultOptions.considerVisibilityParam) {
                             this.handlePoiVisibility();
                         }
@@ -323,6 +351,26 @@ var Map = /** @class */ (function () {
                         if (this.defaultOptions.useRasterTiles) {
                             this.initRasterTiles();
                         }
+                        if (this.defaultOptions.handleUrlParams) {
+                            urlParams = new URLSearchParams(window.location.search);
+                            startParam_1 = urlParams.get(this.defaultOptions.urlParams.startFeauture);
+                            destinationParam_1 = urlParams.get(this.defaultOptions.urlParams.destinationFeature);
+                            startFeature = startParam_1
+                                ? this.state.allFeatures.features.find(function (f) {
+                                    return f.properties.title &&
+                                        (f.id === startParam_1 || f.properties.id === startParam_1 || f.properties.title === startParam_1);
+                                })
+                                : this.startPoint;
+                            destinationFeature = this.state.allFeatures.features.find(function (f) {
+                                return f.properties.title &&
+                                    (f.id === destinationParam_1 ||
+                                        f.properties.id === destinationParam_1 ||
+                                        f.properties.title === destinationParam_1);
+                            });
+                            if (startFeature && destinationFeature) {
+                                this.onRouteUpdate(startFeature, destinationFeature);
+                            }
+                        }
                         this.initPersonsMap();
                         this.map.on('click', 'proximiio-pois-icons', function (ev) {
                             _this.onShopClick(ev);
@@ -381,6 +429,27 @@ var Map = /** @class */ (function () {
             this.centerOnPoi(this.startPoint);
         }
     };
+    Map.prototype.initGeoLocation = function () {
+        var _this = this;
+        if (this.map && this.defaultOptions.useGpsLocation) {
+            var geolocate_1 = new mapboxgl.GeolocateControl({
+                positionOptions: {
+                    enableHighAccuracy: true,
+                },
+                showAccuracyCircle: false,
+                trackUserLocation: true,
+            });
+            this.map.addControl(geolocate_1);
+            setTimeout(function () {
+                geolocate_1.trigger();
+            });
+            geolocate_1.on('geolocate', function (data) {
+                _this.startPoint = turf.point([data.coords.longitude, data.coords.latitude], {
+                    level: _this.state.floor.level,
+                });
+            });
+        }
+    };
     Map.prototype.initDirectionIcon = function () {
         if (this.map) {
             this.state.style.addSource('direction-icon-source', {
@@ -1339,6 +1408,9 @@ var Map = /** @class */ (function () {
                 map.setFilter('my-location-layer', filter);
                 this.state.style.getLayer('my-location-layer').filter = filter;
             }
+            if (this.defaultOptions.useGpsLocation && this.startPoint) {
+                this.startPoint.properties = __assign(__assign({}, this.startPoint.properties), { level: floor.level });
+            }
             if (map.getLayer('persons-layer')) {
                 var filter = ['all', ['==', ['to-number', ['get', 'level']], floor.level]];
                 map.setFilter('persons-layer', filter);
@@ -1735,7 +1807,7 @@ var Map = /** @class */ (function () {
      *  });
      */
     Map.prototype.findRouteByIds = function (idTo, idFrom, accessibleRoute) {
-        var fromFeature = this.defaultOptions.isKiosk
+        var fromFeature = this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
             ? this.startPoint
             : this.state.allFeatures.features.find(function (f) { return f.id === idFrom || f.properties.id === idFrom; });
         var toFeature = this.state.allFeatures.features.find(function (f) { return f.id === idTo || f.properties.id === idTo; });
@@ -1757,12 +1829,14 @@ var Map = /** @class */ (function () {
      *  });
      */
     Map.prototype.findRouteByTitle = function (titleTo, titleFrom, accessibleRoute) {
-        var fromFeature = this.defaultOptions.isKiosk
+        var fromFeature = this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
             ? this.startPoint
             : this.state.allFeatures.features.find(function (f) { return f.properties.title === titleFrom; });
         var toFeature = this.state.allFeatures.features.find(function (f) { return f.properties.title === titleTo; });
         this.routingSource.toggleAccessible(accessibleRoute);
-        this.onRouteUpdate(this.defaultOptions.isKiosk ? this.startPoint : fromFeature, toFeature);
+        this.onRouteUpdate(this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
+            ? this.startPoint
+            : fromFeature, toFeature);
     };
     /**
      * This method will generate route based on selected features by their titles
@@ -1783,12 +1857,14 @@ var Map = /** @class */ (function () {
      *  });
      */
     Map.prototype.findRouteByCoords = function (latTo, lngTo, levelTo, latFrom, lngFrom, levelFrom, accessibleRoute) {
-        var fromFeature = this.defaultOptions.isKiosk
+        var fromFeature = this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
             ? this.startPoint
             : turf.feature({ type: 'Point', coordinates: [lngFrom, latFrom] }, { level: levelFrom });
         var toFeature = turf.feature({ type: 'Point', coordinates: [lngTo, latTo] }, { level: levelTo });
         this.routingSource.toggleAccessible(accessibleRoute);
-        this.onRouteUpdate(this.defaultOptions.isKiosk ? this.startPoint : fromFeature, toFeature);
+        this.onRouteUpdate(this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
+            ? this.startPoint
+            : fromFeature, toFeature);
     };
     /**
      * This method will generate route to nearest amenity feature
@@ -1805,13 +1881,15 @@ var Map = /** @class */ (function () {
      *  });
      */
     Map.prototype.findRouteToNearestFeature = function (amenityId, idFrom, accessibleRoute) {
-        var fromFeature = this.defaultOptions.isKiosk
+        var fromFeature = this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
             ? 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);
+            this.onRouteUpdate(this.startPoint && (this.defaultOptions.isKiosk || this.defaultOptions.useGpsLocation)
+                ? this.startPoint
+                : fromFeature, toFeature);
         }
         else {
             throw new Error("Feature not found");