mobility-toolbox-js 3.0.0-beta.9 → 3.0.0

package/ol/controls/StopFinderControl.d.ts

@@ -1,11 +1,11 @@
 import { Feature } from 'geojson';
 import Control, { Options } from 'ol/control/Control';
 import StopFinderControlCommon from '../../common/controls/StopFinderControlCommon';
-export type StopFinderControlOptions = Options & StopFinderControlCommon & {
+export type StopFinderControlOptions = {
     className?: string;
-};
+} & Options & StopFinderControlCommon;
 /**
- * Search stations.
+ * This OpenLayers control allows to search stations from the [geOps Stops API](https://developer.geops.io/apis/stops/).
  *
  * @example
  * import { Map } from 'ol';
@@ -23,15 +23,34 @@ export type StopFinderControlOptions = Options & StopFinderControlCommon & {
  *
  *
  * @see <a href="/example/ol-search">Openlayers search example</a>
+ *
+ * @extends {ol/control/Control~Control}
+ *
  * @public
  */
 declare class StopFinderControl extends Control {
     controller: StopFinderControlCommon;
-    constructor(options: StopFinderControlOptions);
     /**
-     * @private
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {HTMLElement} options.element HTML element where to attach input and suggestions.
+     * @param {string} options.apiKey Access key for [geOps APIs](https://developer.geops.io/).
+     * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [geOps Stops API documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
+     * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
+     * @param {string} [options.url='https://api.geops.io/stops/v1/'] [geOps Stops API](https://developer.geops.io/apis/stops/) url.
+     * @public
      */
+    constructor(options: StopFinderControlOptions);
     onSuggestionClick(suggestion: Feature): void;
+    /**
+     * Search for stations using a query.
+     *
+     * @param {string} q Query used to search stops.
+     * @param {AbortController} abortController  Abort controller used to abort requests.
+     * @returns {Promise<Array<GeoJSONFeature>>}
+     * @public
+     */
     search(q: string, abortController: AbortController): Promise<void>;
 }
 export default StopFinderControl;

package/ol/controls/StopFinderControl.js

@@ -1,9 +1,9 @@
-import { fromLonLat } from 'ol/proj';
 import Control from 'ol/control/Control';
+import { fromLonLat } from 'ol/proj';
 import StopFinderControlCommon from '../../common/controls/StopFinderControlCommon';
 import createDefaultStopFinderElement from '../../common/utils/createDefaultStopFinderElt';
 /**
- * Search stations.
+ * This OpenLayers control allows to search stations from the [geOps Stops API](https://developer.geops.io/apis/stops/).
  *
  * @example
  * import { Map } from 'ol';
@@ -21,9 +21,23 @@ import createDefaultStopFinderElement from '../../common/utils/createDefaultStop
  *
  *
  * @see <a href="/example/ol-search">Openlayers search example</a>
+ *
+ * @extends {ol/control/Control~Control}
+ *
  * @public
  */
 class StopFinderControl extends Control {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {HTMLElement} options.element HTML element where to attach input and suggestions.
+     * @param {string} options.apiKey Access key for [geOps APIs](https://developer.geops.io/).
+     * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [geOps Stops API documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
+     * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
+     * @param {string} [options.url='https://api.geops.io/stops/v1/'] [geOps Stops API](https://developer.geops.io/apis/stops/) url.
+     * @public
+     */
     constructor(options) {
         const element = createDefaultStopFinderElement();
         element.className = (options === null || options === void 0 ? void 0 : options.className) || 'mbt-stop-finder';
@@ -31,14 +45,19 @@ class StopFinderControl extends Control {
         super(opt);
         this.controller = new StopFinderControlCommon(Object.assign({ onSuggestionClick: this.onSuggestionClick.bind(this) }, opt));
     }
-    /**
-     * @private
-     */
     onSuggestionClick(suggestion) {
         var _a;
         const coord = fromLonLat(suggestion.geometry.coordinates);
         (_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getView().setCenter(coord);
     }
+    /**
+     * Search for stations using a query.
+     *
+     * @param {string} q Query used to search stops.
+     * @param {AbortController} abortController  Abort controller used to abort requests.
+     * @returns {Promise<Array<GeoJSONFeature>>}
+     * @public
+     */
     search(q, abortController) {
         return this.controller.search(q, abortController);
     }

package/ol/layers/Layer.d.ts

@@ -0,0 +1,26 @@
+import { Map } from 'ol';
+import OLLayer from 'ol/layer/Layer';
+import LayerRenderer from 'ol/renderer/Layer';
+import type { Options } from 'ol/layer/Layer';
+export type MobilityLayerOptions = {
+    children?: any[];
+    copyrights?: string[];
+    disabled?: boolean;
+    group?: string;
+    hitTolerance?: number;
+    key?: string;
+    map?: Map;
+    name?: string;
+    properties?: Record<string, any>;
+    visible?: boolean;
+} & Options & Record<string, any>;
+/**
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated Use an OpenLayers Layer instead.
+ */
+declare class Layer extends OLLayer {
+    constructor(options: MobilityLayerOptions);
+    clone(newOptions: MobilityLayerOptions): Layer;
+    createRenderer(): LayerRenderer<OLLayer>;
+}
+export default Layer;

package/ol/layers/Layer.js

@@ -0,0 +1,39 @@
+import debounce from 'lodash.debounce';
+import OLLayer from 'ol/layer/Layer';
+import LayerRenderer from 'ol/renderer/Layer';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+let deprecated = () => { };
+if (typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('deprecated')) {
+    deprecated = debounce((message) => {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+    }, 1000);
+}
+class EmptyLayerRenderer extends LayerRenderer {
+    prepareFrame() {
+        return true;
+    }
+    renderFrame() {
+        return null;
+    }
+}
+/**
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated Use an OpenLayers Layer instead.
+ */
+class Layer extends OLLayer {
+    constructor(options) {
+        super(options);
+        defineDeprecatedProperties(this, options);
+        deprecated('Layer is deprecated. Use an OpenLayers Layer instead.');
+    }
+    clone(newOptions) {
+        return new Layer(Object.assign(Object.assign({}, (this.get('options') || {})), (newOptions || {})));
+    }
+    // ol does not like when it returns null.
+    createRenderer() {
+        return new EmptyLayerRenderer(this);
+    }
+}
+export default Layer;

package/ol/layers/MaplibreLayer.d.ts

@@ -1,11 +1,19 @@
-import { Map, MapOptions } from 'maplibre-gl';
-import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
-import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
-export type MaplibreLayerOptions = MapGlLayerOptions & {
-    mapOptions?: MapOptions;
-};
+import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer/lib';
+import { EventsKey } from 'ol/events';
+import Map from 'ol/Map';
+import { MobilityLayerOptions } from './Layer';
+import type { MapLibreLayerOptions, MapLibreOptions } from '@geoblocks/ol-maplibre-layer/lib/MapLibreLayer';
+import type { QueryRenderedFeaturesOptions } from 'maplibre-gl';
+export type MaplibreLayerOptions = {
+    apiKey?: string;
+    apiKeyName?: string;
+    mapLibreOptions?: MapLibreOptions;
+    queryRenderedFeaturesOptions?: QueryRenderedFeaturesOptions | undefined;
+    style?: maplibregl.StyleSpecification | null | string;
+    url?: string;
+} & MapLibreLayerOptions & MobilityLayerOptions;
 /**
- * This layer is meant to facilitate the use of the geOps Maps api in an OpenLayers map using Maplibre.
+ * An OpenLayers layer able to display data from the [geOps Maps API](https://developer.geops.io/apis/maps).
  *
  * @example
  * import { MaplibreLayer } from 'mobility-toolbox-js/ol';
@@ -13,7 +21,7 @@ export type MaplibreLayerOptions = MapGlLayerOptions & {
  * const layer = new MaplibreLayer({
  *   apiKey: 'yourApiKey',
  *   // apiKeyName: 'key',
- *   // mapOptions: {
+ *   // mapLibreOptions: {
  *   //   interactive: false,
  *   //   trackResize: false,
  *   //   attributionControl: false,
@@ -25,39 +33,59 @@ export type MaplibreLayerOptions = MapGlLayerOptions & {
  *   // url: 'https://maps.geops.io',
  * });
  *
- * @classproperty {maplibregl.Map} maplibreMap - The Maplibre map object. Readonly.
- * @classproperty {maplibregl.QueryRenderedFeaturesOptions} queryRenderedFeaturesOptions - Options used when we query features using map.getFeaturesAtPixel().
- * @classproperty {string} style - geOps Maps api style.
- * @extends {ol/layer/Layer~Layer}
+ * @classproperty {maplibregl.Map} mapLibreMap - The Maplibre map object. Readonly.
+ * @classproperty {string} style - The [geOps Maps API](https://developer.geops.io/apis/maps) style.
+ *
+ *
+ * @see <a href="/example/ol-maplibre-layer">OpenLayers Maplibre layer example</a>
+ *
+ * @extends {geoblocks/ol-maplibre-layer/MapLibreLayer}
  * @public
  */
-export default class MaplibreLayer extends MapGlLayer {
-    options?: MaplibreLayerOptions;
-    /** @private */
+declare class MaplibreLayer extends MapLibreLayer {
+    olEventsKeys: EventsKey[];
+    set apiKey(newValue: string);
+    get apiKey(): string;
+    set apiKeyName(newValue: string);
+    get apiKeyName(): string;
+    /**
+     * @deprecated Use layer.mapLibreMap.
+     */
     get maplibreMap(): maplibregl.Map | undefined;
+    /**
+     * @deprecated Use layer.mapLibreMap.
+     */
+    get mbMap(): maplibregl.Map | undefined;
+    get style(): string;
+    set style(newValue: string);
+    get url(): string;
+    set url(newValue: string);
     /**
      * Constructor.
      *
-     * @param {MaplibreLayerOptions} options
-     * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.apiKeyName="key"] The geOps Maps api key name.
-     * @param {maplibregl.MapOptions} [options.mapOptions={ interactive: false, trackResize: false, attributionControl: false }] Maplibre map options.
-     * @param {string} [options.style="travic_v2"] The geOps Maps api style.
-     * @param {string} [options.url="https://maps.geops.io"] The geOps Maps api url.
+     * @param {Object} options
+     * @param {string} options.apiKey Accesss key for [geOps APIs](https://developer.geops.io/).
+     * @param {string} [options.apiKeyName="key"] The [geOps Maps API](https://developer.geops.io/apis/maps) key name.
+     * @param {maplibregl.MapOptions} [options.mapLibreOptions={ interactive: false, trackResize: false, attributionControl: false }] MapLibre map options.
+     * @param {string} [options.style="travic_v2"] The [geOps Maps API](https://developer.geops.io/apis/maps) style.
+     * @param {string} [options.url="https://maps.geops.io"] The [geOps Maps API](https://developer.geops.io/apis/maps) url.
      */
     constructor(options: MaplibreLayerOptions);
     /**
-     * @private
+     * Initialize the layer and listen to feature clicks.
      */
-    createRenderer(): MaplibreLayerRenderer;
-    /**
-     * @private
-     */
-    createMap(options: MapOptions): Map;
+    attachToMap(): void;
     /**
      * Create a copy of the MaplibreLayer.
-     * @param {MaplibreLayerOptions} newOptions Options to override
+     *
+     * @param {Object} newOptions Options to override. See constructor.
      * @return {MaplibreLayer} A MaplibreLayer layer
+     * @public
      */
     clone(newOptions: MaplibreLayerOptions): MaplibreLayer;
+    detachFromMap(): void;
+    getStyle(): any;
+    setMapInternal(map: Map): void;
+    updateMaplibreMap(): void;
 }
+export default MaplibreLayer;

package/ol/layers/MaplibreLayer.js

@@ -1,8 +1,23 @@
-import { Map } from 'maplibre-gl';
-import MapGlLayer from './MapGlLayer';
-import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
+import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer/lib';
+import debounce from 'lodash.debounce';
+import { unByKey } from 'ol/Observable';
+import { getUrlWithParams } from '../../common/utils';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+const buildStyleUrl = (url, style, apiKey, apiKeyName) => {
+    return getUrlWithParams(`${url}/styles/${style}/style.json`, {
+        [apiKeyName]: apiKey,
+    }).toString();
+};
+let deprecated = () => { };
+if (typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('deprecated')) {
+    deprecated = debounce((message) => {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+    }, 1000);
+}
 /**
- * This layer is meant to facilitate the use of the geOps Maps api in an OpenLayers map using Maplibre.
+ * An OpenLayers layer able to display data from the [geOps Maps API](https://developer.geops.io/apis/maps).
  *
  * @example
  * import { MaplibreLayer } from 'mobility-toolbox-js/ol';
@@ -10,7 +25,7 @@ import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
  * const layer = new MaplibreLayer({
  *   apiKey: 'yourApiKey',
  *   // apiKeyName: 'key',
- *   // mapOptions: {
+ *   // mapLibreOptions: {
  *   //   interactive: false,
  *   //   trackResize: false,
  *   //   attributionControl: false,
@@ -22,49 +37,157 @@ import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
  *   // url: 'https://maps.geops.io',
  * });
  *
- * @classproperty {maplibregl.Map} maplibreMap - The Maplibre map object. Readonly.
- * @classproperty {maplibregl.QueryRenderedFeaturesOptions} queryRenderedFeaturesOptions - Options used when we query features using map.getFeaturesAtPixel().
- * @classproperty {string} style - geOps Maps api style.
- * @extends {ol/layer/Layer~Layer}
+ * @classproperty {maplibregl.Map} mapLibreMap - The Maplibre map object. Readonly.
+ * @classproperty {string} style - The [geOps Maps API](https://developer.geops.io/apis/maps) style.
+ *
+ *
+ * @see <a href="/example/ol-maplibre-layer">OpenLayers Maplibre layer example</a>
+ *
+ * @extends {geoblocks/ol-maplibre-layer/MapLibreLayer}
  * @public
  */
-export default class MaplibreLayer extends MapGlLayer {
-    /** @private */
+class MaplibreLayer extends MapLibreLayer {
+    set apiKey(newValue) {
+        this.set('apiKey', newValue);
+    }
+    get apiKey() {
+        return this.get('apiKey');
+    }
+    set apiKeyName(newValue) {
+        this.set('apiKeyName', newValue);
+    }
+    get apiKeyName() {
+        return this.get('apiKeyName');
+    }
+    /**
+     * @deprecated Use layer.mapLibreMap.
+     */
     get maplibreMap() {
-        return this.mbMap;
+        deprecated('MaplibreLayer.maplibreMap is deprecated. Use layer.mapLibreMap.');
+        return this.mapLibreMap;
     }
+    // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
+    //   return this.get('queryRenderedFeaturesOptions');
+    // }
+    // set queryRenderedFeaturesOptions(
+    //   newValue: maplibregl.QueryRenderedFeaturesOptions,
+    // ) {
+    //   this.set('queryRenderedFeaturesOptions', newValue);
+    // }
     /**
-     * Constructor.
-     *
-     * @param {MaplibreLayerOptions} options
-     * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.apiKeyName="key"] The geOps Maps api key name.
-     * @param {maplibregl.MapOptions} [options.mapOptions={ interactive: false, trackResize: false, attributionControl: false }] Maplibre map options.
-     * @param {string} [options.style="travic_v2"] The geOps Maps api style.
-     * @param {string} [options.url="https://maps.geops.io"] The geOps Maps api url.
+     * @deprecated Use layer.mapLibreMap.
      */
-    constructor(options) {
-        super(Object.assign({}, options));
+    get mbMap() {
+        deprecated('MaplibreLayer.mbMap is deprecated. Use layer.maplibreMap.');
+        return this.maplibreMap;
+    }
+    get style() {
+        return this.get('style');
+    }
+    set style(newValue) {
+        this.set('style', newValue);
+    }
+    get url() {
+        return this.get('url');
+    }
+    set url(newValue) {
+        this.set('url', newValue);
     }
     /**
-     * @private
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {string} options.apiKey Accesss key for [geOps APIs](https://developer.geops.io/).
+     * @param {string} [options.apiKeyName="key"] The [geOps Maps API](https://developer.geops.io/apis/maps) key name.
+     * @param {maplibregl.MapOptions} [options.mapLibreOptions={ interactive: false, trackResize: false, attributionControl: false }] MapLibre map options.
+     * @param {string} [options.style="travic_v2"] The [geOps Maps API](https://developer.geops.io/apis/maps) style.
+     * @param {string} [options.url="https://maps.geops.io"] The [geOps Maps API](https://developer.geops.io/apis/maps) url.
      */
-    createRenderer() {
-        return new MaplibreLayerRenderer(this);
+    constructor(options) {
+        var _a;
+        const newOptions = Object.assign(Object.assign({ apiKeyName: 'key', style: 'travic_v2', url: 'https://maps.geops.io' }, (options || {})), { mapLibreOptions: Object.assign({}, (options.mapLibreOptions || {})) });
+        if (!newOptions.mapLibreOptions.style &&
+            ((_a = newOptions.url) === null || _a === void 0 ? void 0 : _a.includes('style.json'))) {
+            newOptions.mapLibreOptions.style = newOptions.url;
+        }
+        else if (!newOptions.mapLibreOptions.style &&
+            newOptions.apiKey &&
+            newOptions.style &&
+            typeof newOptions.style === 'string') {
+            newOptions.mapLibreOptions.style = buildStyleUrl(newOptions.url, newOptions.style, newOptions.apiKey, newOptions.apiKeyName);
+        }
+        super(newOptions);
+        this.olEventsKeys = [];
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
+        // We save the options to be able to clone the layer.
+        // and to see if the style is defined by the maplibreOptions given by the user.
+        this.set('options', options);
     }
     /**
-     * @private
+     * Initialize the layer and listen to feature clicks.
      */
-    // eslint-disable-next-line class-methods-use-this
-    createMap(options) {
-        return new Map(options);
+    attachToMap() {
+        const updateMaplibreMapDebounced = debounce(this.updateMaplibreMap.bind(this), 150);
+        updateMaplibreMapDebounced();
+        this.olEventsKeys.push(this.on('propertychange', (evt) => {
+            if (/(url|style|apiKey|apiKeyName)/.test(evt.key)) {
+                updateMaplibreMapDebounced();
+            }
+        }));
     }
     /**
      * Create a copy of the MaplibreLayer.
-     * @param {MaplibreLayerOptions} newOptions Options to override
+     *
+     * @param {Object} newOptions Options to override. See constructor.
      * @return {MaplibreLayer} A MaplibreLayer layer
+     * @public
      */
     clone(newOptions) {
-        return new MaplibreLayer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
+        return new MaplibreLayer(Object.assign(Object.assign({}, (this.get('options') || {})), (newOptions || {})));
+    }
+    detachFromMap() {
+        unByKey(this.olEventsKeys);
+    }
+    getStyle() {
+        var _a, _b;
+        // If the style is a complete style object, use it directly.
+        if (this.style &&
+            typeof this.style === 'object' &&
+            this.style.name &&
+            this.style.version) {
+            return this.style;
+        }
+        // If the url set is already a complete style url, use it directly.
+        if (this.url.includes('style.json')) {
+            return this.url;
+        }
+        // If the user has defined the style by the maplibreOptions, we use it directly.
+        if ((_b = (_a = this.get('options')) === null || _a === void 0 ? void 0 : _a.mapLibreOptions) === null || _b === void 0 ? void 0 : _b.style) {
+            return this.get('options').mapLibreOptions.style;
+        }
+        /// Otherwise build the complete style url.
+        return buildStyleUrl(this.url, this.style, this.apiKey, this.apiKeyName);
+    }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap();
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
+    }
+    updateMaplibreMap() {
+        var _a;
+        try {
+            (_a = this.mapLibreMap) === null || _a === void 0 ? void 0 : _a.setStyle(this.getStyle(), { diff: false });
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('Error while updating MaplibreMap', e);
+        }
     }
 }
+export default MaplibreLayer;