mobility-toolbox-js 2.0.0-beta.8 → 2.0.0-beta.81

package/common/controls/StopFinderControlCommon.js

@@ -0,0 +1,144 @@
+import { StopsAPI } from '../../api';
+import ControlCommon from './ControlCommon';
+/**
+ * A class representing a stop finder control to display on map.
+ * This class only draw the html elements.
+ * The geographic logic must be implemented by subclasses.
+ */
+class StopFinderControlCommon extends ControlCommon {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options Map options
+     * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
+     * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
+     * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
+     * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
+     */
+    constructor(options) {
+        super(options);
+        const { apiParams, apiKey, url, placeholder } = options || {};
+        this.apiParams = Object.assign({ limit: 20 }, (apiParams || {}));
+        this.placeholder = placeholder || 'Search for a stop...';
+        const apiOptions = { apiKey };
+        if (url) {
+            apiOptions.url = url;
+        }
+        this.api = new StopsAPI(apiOptions);
+        this.abortController = new AbortController();
+    }
+    deactivate() { }
+    render(featureCollection) {
+        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
+        if (!this.suggestionsElt) {
+            return;
+        }
+        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
+        this.suggestionsElt.innerHTML = '';
+        suggestions.forEach((suggestion) => {
+            var _a, _b;
+            const suggElt = document.createElement('div');
+            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
+            suggElt.onclick = () => {
+                // @ts-ignore
+                this.onSuggestionClick(suggestion);
+            };
+            Object.assign(suggElt.style, {
+                padding: '5px 12px',
+            });
+            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
+        });
+    }
+    createDefaultElement() {
+        /**
+         * Define a default element.
+         */
+        this.element = document.createElement('div');
+        this.element.id = 'mbt-search';
+        Object.assign(this.element.style, {
+            position: 'absolute',
+            top: 0,
+            left: '50px',
+            margin: '10px',
+            display: 'flex',
+            flexDirection: 'column',
+            width: '320px',
+        });
+        // Create input element
+        this.inputElt = document.createElement('input');
+        this.inputElt.type = 'text';
+        this.inputElt.placeholder = this.placeholder;
+        this.inputElt.autocomplete = 'off';
+        this.inputElt.onkeyup = (evt) => {
+            var _a;
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.abortController = new AbortController();
+            // @ts-ignore
+            this.search(evt.target.value, this.abortController);
+        };
+        Object.assign(this.inputElt.style, {
+            padding: '10px 30px 10px 10px',
+        });
+        this.element.appendChild(this.inputElt);
+        // Create suggestions list element
+        this.suggestionsElt = document.createElement('div');
+        Object.assign(this.suggestionsElt.style, {
+            backgroundColor: 'white',
+            overflowY: 'auto',
+            cursor: 'pointer',
+        });
+        this.element.appendChild(this.suggestionsElt);
+        this.clearElt = document.createElement('div');
+        Object.assign(this.clearElt.style, {
+            display: 'none',
+            position: 'absolute',
+            right: '0',
+            padding: '0 10px',
+            fontSize: '200%',
+            cursor: 'pointer',
+        });
+        this.clearElt.innerHTML = '×';
+        this.clearElt.onclick = () => this.clear();
+        this.element.appendChild(this.clearElt);
+    }
+    /**
+     * Launch a search.
+     *
+     * @param {String} query The query to search for.
+     * @param {AbortController} abortController Abort controller used to cancel the request.
+     * @return {Promise<Array<GeoJSONFeature>>} An array of GeoJSON features with coordinates in [EPSG:4326](http://epsg.io/4326).
+     */
+    search(q, abortController) {
+        if (q !== undefined || q !== null) {
+            this.apiParams.q = q;
+        }
+        if (this.clearElt) {
+            this.clearElt.style.display = 'block';
+        }
+        return this.api
+            .search(this.apiParams, abortController && { signal: abortController.signal })
+            .then((data) => {
+            this.render(data);
+        })
+            .catch(() => {
+            this.render();
+        });
+    }
+    /**
+     * To be defined in inherited class
+     */
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    onSuggestionClick(suggestion) { }
+    /**
+     * Clear the search field and close the control.
+     */
+    clear() {
+        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
+            return;
+        }
+        this.inputElt.value = '';
+        this.suggestionsElt.innerHTML = '';
+        this.clearElt.style.display = 'none';
+    }
+}
+export default StopFinderControlCommon;

package/common/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./utils";
+export * from "./styles";
+//# sourceMappingURL=index.d.ts.map

package/common/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.js"],"names":[],"mappings":""}

package/common/index.js

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './styles';

package/common/layers/LayerCommon.d.ts

@@ -0,0 +1,94 @@
+import BaseObject from 'ol/Object';
+import type { AnyMap, LayerGetFeatureInfoOptions, LayerGetFeatureInfoResponse } from '../../types';
+export type LayerCommonOptions = {
+    key?: string;
+    name?: string;
+    group?: string;
+    copyrights?: string[];
+    children?: Layer[];
+    visible?: Boolean;
+    disabled?: Boolean;
+    hitTolerance?: Number;
+    properties?: {
+        [x: string]: any;
+    };
+    map?: AnyMap;
+};
+/**
+ * A class representing a layer to display on map.
+ *
+ * @example
+ * const layer = new Layer({
+ *   name: 'My Layer',
+ * });
+ *
+ * @classproperty {string} key - Identifier of the layer. Must be unique.
+ * @classproperty {string} name - Name of the layer
+ * @classproperty {string[]} copyrights - Array of copyrights.
+ * @classproperty {Layer[]} children - List of children layers.
+ * @classproperty {boolean} visible - Define if the layer is currently display on the map.
+ * @classproperty {boolean} disabled - Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
+ * @classproperty {number} hitTolerance - Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
+ * @classproperty {Object} properties - Custom properties.
+ * @classproperty {ol/Map~Map|mapboxgl.Map} map - The map where the layer is displayed.
+ */
+export default class Layer extends BaseObject {
+    key?: string;
+    name?: string;
+    group?: string;
+    copyrights?: string[];
+    children?: Layer[];
+    visible?: boolean;
+    disabled?: boolean;
+    hitTolerance?: number;
+    properties?: {
+        [x: string]: any;
+    };
+    map?: AnyMap;
+    parent?: Layer;
+    options: LayerCommonOptions;
+    /**
+     * Constructor
+     *
+     * @param {Object} options
+     * @param {string} [options.key=uuid()] Identifier of the layer. Muste be unique. Default use a generated uuid.
+     * @param {string} [options.name] Name of the layer.
+     * @param {string[]} [options.copyrights] Array of copyrights.
+     * @param {Array<Layer>} [options.children=[]] Sublayers, all child layers will have a parent property associated to this layer.
+     * @param {boolean} [options.visible=true]  Define if the layer is currently display on the map.
+     * @param {boolean} [options.disabled=false] Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
+     * @param {number} [options.hitTolerance=5] Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
+     * @param {Object} [options.properties={}] Application-specific layer properties.
+     */
+    constructor(options?: LayerCommonOptions);
+    /**
+     * Define layer's properties that needs custom get and set.
+     *
+     * @ignore
+     */
+    defineProperties(options?: LayerCommonOptions): void;
+    /**
+     * Initialize the layer with the map passed in parameters.
+     *
+     * @param {ol/Map~Map|mapboxgl.Map} map A map.
+     */
+    attachToMap(map: AnyMap): void;
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap(): void;
+    /**
+     * Request feature information for a given coordinate.
+     * This function must be implemented by inheriting layers.
+     *
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate.
+     * @param {Object} options Some options. See child classes to see which are supported.
+     * @return {Promise<FeatureInfo>} An empty response.
+     */
+    getFeatureInfoAtCoordinate(coordinate: number[], options?: LayerGetFeatureInfoOptions): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * Return the an array containing all the descendants of the layer in a flat array. Including the current layer.
+     */
+    flat(): any[];
+}
+//# sourceMappingURL=LayerCommon.d.ts.map

package/common/layers/LayerCommon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerCommon.d.ts","sourceRoot":"","sources":["../../../src/common/layers/LayerCommon.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,WAAW,CAAC;AAInC,OAAO,KAAK,EACV,MAAM,EACN,0BAA0B,EAC1B,2BAA2B,EAC5B,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,UAAU,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;IAEvC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE,KAAK,CAAC;IAEf,OAAO,EAAE,kBAAkB,CAAM;IAEjC;;;;;;;;;;;;OAYG;gBACS,OAAO,GAAE,kBAAuB;IAoC5C;;;;OAIG;IACH,gBAAgB,CAAC,OAAO,GAAE,kBAAuB;IA2IjD;;;;OAIG;IACH,WAAW,CAAC,GAAG,EAAE,MAAM;IAYvB;;OAEG;IAEH,aAAa;IAKb;;;;;;;OAOG;IAEH,0BAA0B,CACxB,UAAU,EAAE,MAAM,EAAE,EAEpB,OAAO,CAAC,EAAE,0BAA0B,GACnC,OAAO,CAAC,2BAA2B,CAAC;IAgBvC;;OAEG;IACH,IAAI;CAGL"}

package/common/layers/LayerCommon.js

@@ -0,0 +1,244 @@
+import BaseObject from 'ol/Object';
+import { v4 as uuid } from 'uuid';
+import BaseEvent from 'ol/events/Event';
+import getLayersAsFlatArray from '../utils/getLayersAsFlatArray';
+/**
+ * A class representing a layer to display on map.
+ *
+ * @example
+ * const layer = new Layer({
+ *   name: 'My Layer',
+ * });
+ *
+ * @classproperty {string} key - Identifier of the layer. Must be unique.
+ * @classproperty {string} name - Name of the layer
+ * @classproperty {string[]} copyrights - Array of copyrights.
+ * @classproperty {Layer[]} children - List of children layers.
+ * @classproperty {boolean} visible - Define if the layer is currently display on the map.
+ * @classproperty {boolean} disabled - Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
+ * @classproperty {number} hitTolerance - Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
+ * @classproperty {Object} properties - Custom properties.
+ * @classproperty {ol/Map~Map|mapboxgl.Map} map - The map where the layer is displayed.
+ */
+export default class Layer extends BaseObject {
+    /**
+     * Constructor
+     *
+     * @param {Object} options
+     * @param {string} [options.key=uuid()] Identifier of the layer. Muste be unique. Default use a generated uuid.
+     * @param {string} [options.name] Name of the layer.
+     * @param {string[]} [options.copyrights] Array of copyrights.
+     * @param {Array<Layer>} [options.children=[]] Sublayers, all child layers will have a parent property associated to this layer.
+     * @param {boolean} [options.visible=true]  Define if the layer is currently display on the map.
+     * @param {boolean} [options.disabled=false] Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
+     * @param {number} [options.hitTolerance=5] Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
+     * @param {Object} [options.properties={}] Application-specific layer properties.
+     */
+    constructor(options = {}) {
+        super();
+        this.properties = {};
+        this.options = {};
+        this.defineProperties(options);
+        if (options.properties) {
+            this.setProperties(options.properties);
+        }
+        this.options = options;
+        this.visible = options.visible === undefined ? true : !!options.visible;
+        this.group = options.group;
+        this.copyrights = options.copyrights;
+        this.children = options.children;
+        // Listen for group visiblity change
+        // if a layer from a group is newly visible we hide the others.
+        /* @ts-ignore */
+        this.on(`change:visible:group`, (evt) => {
+            // We hide layer of the same group
+            if (this.group === evt.target.group &&
+                this !== evt.target &&
+                this.visible) {
+                this.visible = false;
+                // Propagate event to parent
+            }
+            else if (this.children) {
+                this.children.forEach((child) => child.dispatchEvent(evt));
+            }
+        });
+    }
+    /**
+     * Define layer's properties that needs custom get and set.
+     *
+     * @ignore
+     */
+    defineProperties(options = {}) {
+        const { name, key, properties, hitTolerance } = Object.assign({}, options);
+        const uid = uuid();
+        Object.defineProperties(this, {
+            /* Layer's information properties */
+            name: {
+                value: name,
+            },
+            key: {
+                value: key || name || uid,
+            },
+            group: {
+                get: () => this.get('group'),
+                set: (newGroup) => {
+                    this.set('group', newGroup);
+                },
+            },
+            copyrights: {
+                get: () => this.get('copyrights'),
+                set: (newCopyrights) => {
+                    const arrValue = newCopyrights && !Array.isArray(newCopyrights)
+                        ? [newCopyrights]
+                        : newCopyrights;
+                    this.set('copyrights', arrValue || []);
+                },
+            },
+            // options is used for clone function.
+            options: {
+                value: options,
+            },
+            map: {
+                writable: true,
+            },
+            /* Layer's state properties */
+            visible: {
+                get: () => this.get('visible'),
+                set: (newVisible) => {
+                    if (newVisible === this.visible) {
+                        return;
+                    }
+                    this.set('visible', newVisible);
+                    if (this.visible) {
+                        // We make the parent visible
+                        if (this.parent) {
+                            this.parent.visible = true;
+                        }
+                        // If children doesn't contain any visible layers, we display all children.
+                        if (this.children &&
+                            !this.children.some((child) => child.visible)) {
+                            this.children.forEach((child) => {
+                                // eslint-disable-next-line no-param-reassign
+                                child.visible = true;
+                            });
+                        }
+                        // Warn the same group that a new layer is visible
+                        if (this.parent && this.group) {
+                            // We search for the higher parent then it will dispatch to all the tree.
+                            let higherParent = this.parent;
+                            while (higherParent.parent) {
+                                higherParent = higherParent.parent;
+                            }
+                            const evt = new BaseEvent(`change:visible:group`);
+                            evt.target = this;
+                            higherParent.dispatchEvent(evt);
+                        }
+                    }
+                    else if (!this.visible) {
+                        // We hide all the children
+                        if (this.children) {
+                            this.children.forEach((child) => {
+                                // eslint-disable-next-line no-param-reassign
+                                child.visible = false;
+                            });
+                        }
+                        // If the parent has no more visible child we also hide it.
+                        if (this.parent &&
+                            this.parent.visible &&
+                            this.parent.children &&
+                            !this.parent.children.find((child) => child.visible)) {
+                            this.parent.visible = false;
+                        }
+                    }
+                },
+            },
+            disabled: {
+                get: () => this.get('disabled'),
+                set: (newValue) => {
+                    this.set('disabled', newValue);
+                },
+            },
+            /* Layer's hierarchy properties */
+            parent: {
+                value: null,
+                writable: true,
+            },
+            children: {
+                get: () => this.get('children') || [],
+                set: (newValue) => {
+                    (this.children || []).forEach((child) => {
+                        // eslint-disable-next-line no-param-reassign
+                        child.parent = undefined;
+                    });
+                    if (Array.isArray(newValue)) {
+                        newValue.forEach((child) => {
+                            // eslint-disable-next-line no-param-reassign
+                            child.parent = this;
+                        });
+                    }
+                    this.set('children', newValue || []);
+                },
+            },
+            /* Layer's query properties */
+            hitTolerance: {
+                value: hitTolerance || 5,
+                writable: true,
+            },
+            /* Custom app specific properties */
+            properties: {
+                value: Object.assign({}, (properties || {})),
+            },
+        });
+    }
+    /**
+     * Initialize the layer with the map passed in parameters.
+     *
+     * @param {ol/Map~Map|mapboxgl.Map} map A map.
+     */
+    attachToMap(map) {
+        this.detachFromMap();
+        /** @ignore */
+        this.map = map;
+        if (this.children) {
+            this.children.forEach((child) => {
+                child.attachToMap(map);
+            });
+        }
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    // eslint-disable-next-line class-methods-use-this
+    detachFromMap() {
+        /** @ignore */
+        this.map = undefined;
+    }
+    /**
+     * Request feature information for a given coordinate.
+     * This function must be implemented by inheriting layers.
+     *
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate.
+     * @param {Object} options Some options. See child classes to see which are supported.
+     * @return {Promise<FeatureInfo>} An empty response.
+     */
+    // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+    getFeatureInfoAtCoordinate(coordinate, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    options) {
+        // eslint-disable-next-line no-console
+        console.error('getFeatureInfoAtCoordinate must be implemented by inheriting layers', this.key);
+        // This layer returns no feature info.
+        // The function is implemented by inheriting layers.
+        return Promise.resolve({
+            layer: this,
+            features: [],
+            coordinate,
+        });
+    }
+    /**
+     * Return the an array containing all the descendants of the layer in a flat array. Including the current layer.
+     */
+    flat() {
+        return getLayersAsFlatArray(this);
+    }
+}