mobility-toolbox-js 2.0.0-beta.6 → 2.0.0-beta.60

package/{src/ol → ol}/controls/StopFinderControl.js

@@ -1,7 +1,5 @@
 import { fromLonLat } from 'ol/proj';
-import Control from '../../common/controls/Control';
-import mixin from '../../common/mixins/SearchMixin';
-
+import StopFinderControlCommon from '../../common/controls/StopFinderControlCommon';
 /**
  * Search stations.
  *
@@ -17,22 +15,18 @@ import mixin from '../../common/mixins/SearchMixin';
  *   apiKey: [yourApiKey]
  * });
  *
- * control.map = map;
+ * control.attachToMap(map);
  *
  *
  * @see <a href="/example/ol-search">Openlayers search example</a>
- *
- * @extends {Control}
- * @implements {SearchInterface}
  */
-class StopFinderControl extends mixin(Control) {
-  /**
-   * @private
-   */
-  onSuggestionClick({ geometry }) {
-    const coord = fromLonLat(geometry.coordinates);
-    this.map.getView().setCenter(coord);
-  }
+class StopFinderControl extends StopFinderControlCommon {
+    /**
+     * @private
+     */
+    onSuggestionClick(suggestion) {
+        const coord = fromLonLat(suggestion.geometry.coordinates);
+        this.map.getView().setCenter(coord);
+    }
 }
-
 export default StopFinderControl;

package/ol/controls/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CopyrightControl } from "./CopyrightControl";
+export { default as RoutingControl } from "./RoutingControl";
+export { default as StopFinderControl } from "./StopFinderControl";
+//# sourceMappingURL=index.d.ts.map

package/ol/controls/index.d.ts.map

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

package/ol/controls/index.js

@@ -0,0 +1,3 @@
+export { default as CopyrightControl } from './CopyrightControl';
+export { default as RoutingControl } from './RoutingControl';
+export { default as StopFinderControl } from './StopFinderControl';

package/ol/index.d.ts

@@ -0,0 +1,6 @@
+export * from "../api";
+export * from "../common";
+export * from "./controls";
+export * from "./layers";
+export * from "./styles";
+//# sourceMappingURL=index.d.ts.map

package/ol/index.d.ts.map

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

package/ol/index.js

@@ -0,0 +1,5 @@
+export * from '../api';
+export * from '../common';
+export * from './controls';
+export * from './layers';
+export * from './styles';

package/ol/layers/Layer.d.ts

@@ -0,0 +1,86 @@
+import { Map } from 'ol';
+import { EventsKey } from 'ol/events';
+import LayerGroup from 'ol/layer/Group';
+import OlLayer from 'ol/layer/Layer';
+import LayerCommon from '../../common/layers/LayerCommon';
+import type { LayerCommonOptions } from '../../common/layers/LayerCommon';
+import type { UserInteractionCallback } from '../../types';
+export declare type OlLayerOptions = LayerCommonOptions & {
+    olLayer?: OlLayer;
+};
+declare const Layer_base: typeof LayerCommon;
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {LayerCommon}
+ */
+declare class Layer extends Layer_base {
+    olLayer?: OlLayer | LayerGroup;
+    olListenersKeys: EventsKey[];
+    options: OlLayerOptions;
+    visible: boolean;
+    copyrights: string[];
+    map?: Map;
+    singleClickListenerKey: EventsKey;
+    pointerMoveListenerKey: EventsKey;
+    userInteractions?: boolean;
+    userClickInteractions?: boolean;
+    userHoverInteractions?: boolean;
+    userClickCallbacks?: UserInteractionCallback[];
+    userHoverCallbacks?: UserInteractionCallback[];
+    onUserClickCallback: () => void;
+    onUserMoveCallback: () => void;
+    /**
+     * Constructor.
+     *
+     * @param {LayerCommonOptions} options
+     * @param {ol/layer/Layer~Layer} options.olLayer The layer (required).
+     * @param {string} [options.name=uuid()] Layer name. Default use a generated uuid.
+     * @param {string} [options.key=uuid().toLowerCase()] Layer key, will use options.name.toLowerCase() if not specified.
+     * @param {string} [options.copyright=undefined] Copyright-Statement.
+     * @param {Array<Layer>} [options.children=[]] Sublayers.
+     * @param {Object} [options.properties={}] Application-specific layer properties.
+     * @param {boolean} [options.visible=true] If true this layer is the currently visible layer on the map.
+     */
+    constructor(options: OlLayerOptions);
+    /**
+     * Define layer's properties.
+     *
+     * @ignore
+     */
+    defineProperties(options: OlLayerOptions): void;
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: Map): void;
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap(): void;
+    activateUserInteractions(): void;
+    deactivateUserInteractions(): void;
+    /**
+     * Toggle listeners needed when a layer is avisible or not.
+     * @private
+     */
+    toggleVisibleListeners(): void;
+    /**
+     * Create a copy of the Layer.
+     * @param {Object} newOptions Options to override
+     * @return {Layer} A Layer
+     */
+    clone(newOptions: OlLayerOptions): Layer;
+}
+export default Layer;
+//# sourceMappingURL=Layer.d.ts.map

package/ol/layers/Layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/Layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,UAAU,MAAM,gBAAgB,CAAC;AACxC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAErC,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAE1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,oBAAY,cAAc,GAAG,kBAAkB,GAAG;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;;AAEF;;;;;;;;;;;;;;GAcG;AACH,cAAM,KAAM,SAAQ,UAAkC;IACpD,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE/B,eAAe,EAAG,SAAS,EAAE,CAAC;IAI9B,OAAO,EAAG,cAAc,CAAC;IAEzB,OAAO,EAAG,OAAO,CAAC;IAElB,UAAU,EAAG,MAAM,EAAE,CAAC;IAEtB,GAAG,CAAC,EAAE,GAAG,CAAC;IAEV,sBAAsB,EAAG,SAAS,CAAC;IAEnC,sBAAsB,EAAG,SAAS,CAAC;IAInC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,kBAAkB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE/C,kBAAkB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE/C,mBAAmB,EAAG,MAAM,IAAI,CAAC;IAEjC,kBAAkB,EAAG,MAAM,IAAI,CAAC;IAEhC;;;;;;;;;;;OAWG;gBACS,OAAO,EAAE,cAAc;IAQnC;;;;OAIG;IACH,gBAAgB,CAAC,OAAO,EAAE,cAAc;IAUxC;;;OAGG;IACH,WAAW,CAAC,GAAG,EAAE,GAAG;IA4DpB;;OAEG;IACH,aAAa;IAcb,wBAAwB;IA2BxB,0BAA0B;IAI1B;;;OAGG;IACH,sBAAsB;IAQtB;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,cAAc;CAGjC;AACD,eAAe,KAAK,CAAC"}

package/ol/layers/Layer.js

@@ -0,0 +1,159 @@
+import { unByKey } from 'ol/Observable';
+import LayerCommon from '../../common/layers/LayerCommon';
+import userInteractionsMixin from '../../common/mixins/UserInteractionsLayerMixin';
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {LayerCommon}
+ */
+class Layer extends userInteractionsMixin(LayerCommon) {
+    /**
+     * Constructor.
+     *
+     * @param {LayerCommonOptions} options
+     * @param {ol/layer/Layer~Layer} options.olLayer The layer (required).
+     * @param {string} [options.name=uuid()] Layer name. Default use a generated uuid.
+     * @param {string} [options.key=uuid().toLowerCase()] Layer key, will use options.name.toLowerCase() if not specified.
+     * @param {string} [options.copyright=undefined] Copyright-Statement.
+     * @param {Array<Layer>} [options.children=[]] Sublayers.
+     * @param {Object} [options.properties={}] Application-specific layer properties.
+     * @param {boolean} [options.visible=true] If true this layer is the currently visible layer on the map.
+     */
+    constructor(options) {
+        super(options);
+        if (this.olLayer) {
+            this.olLayer.setVisible(this.visible);
+        }
+    }
+    /**
+     * Define layer's properties.
+     *
+     * @ignore
+     */
+    defineProperties(options) {
+        super.defineProperties(options);
+        Object.defineProperties(this, {
+            olLayer: { value: options.olLayer, writable: true },
+            olListenersKeys: {
+                value: [],
+            },
+        });
+    }
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        var _a, _b, _c, _d;
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        if (this.olLayer &&
+            !((_c = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) === null || _c === void 0 ? void 0 : _c.includes(this.olLayer))) {
+            this.map.addLayer(this.olLayer);
+        }
+        this.olListenersKeys.push(
+        // @ts-ignore
+        this.on('change:visible', () => {
+            if (this.olLayer) {
+                this.olLayer.setVisible(this.visible);
+            }
+        }));
+        this.olListenersKeys.push(this.map.getLayers().on('remove', (evt) => {
+            if (evt.element === this.olLayer) {
+                this.detachFromMap();
+            }
+        }));
+        this.toggleVisibleListeners();
+        this.olListenersKeys.push(
+        // @ts-ignore
+        this.on('change:visible', this.toggleVisibleListeners));
+        // We set the copyright to the source used by the layer.
+        if (this.copyrights && this.olLayer) {
+            const attributions = this.copyrights || [];
+            if (this.olLayer.getLayers) {
+                this.olLayer
+                    .getLayers()
+                    .getArray()
+                    .forEach((layer) => {
+                    var _a;
+                    // @ts-ignore
+                    if (layer.getSource) {
+                        // @ts-ignore
+                        (_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(attributions);
+                    }
+                });
+                // @ts-ignore
+            }
+            else if (this.olLayer.getSource) {
+                // @ts-ignore
+                (_d = this.olLayer.getSource()) === null || _d === void 0 ? void 0 : _d.setAttributions(attributions);
+            }
+        }
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap() {
+        var _a, _b, _c;
+        this.deactivateUserInteractions();
+        unByKey(this.olListenersKeys);
+        if (this.olLayer &&
+            ((_c = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) === null || _c === void 0 ? void 0 : _c.includes(this.olLayer))) {
+            this.map.removeLayer(this.olLayer);
+        }
+        super.detachFromMap();
+    }
+    activateUserInteractions() {
+        var _a, _b;
+        this.deactivateUserInteractions();
+        if (this.map &&
+            this.userInteractions &&
+            this.userClickInteractions &&
+            ((_a = this.userClickCallbacks) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.singleClickListenerKey = this.map.on('singleclick', this.onUserClickCallback);
+            this.olListenersKeys.push(this.singleClickListenerKey);
+        }
+        if (this.map &&
+            this.userInteractions &&
+            this.userHoverInteractions &&
+            ((_b = this.userHoverCallbacks) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.pointerMoveListenerKey = this.map.on('pointermove', this.onUserMoveCallback);
+        }
+    }
+    deactivateUserInteractions() {
+        unByKey([this.pointerMoveListenerKey, this.singleClickListenerKey]);
+    }
+    /**
+     * Toggle listeners needed when a layer is avisible or not.
+     * @private
+     */
+    toggleVisibleListeners() {
+        if (this.visible) {
+            this.activateUserInteractions();
+        }
+        else {
+            this.deactivateUserInteractions();
+        }
+    }
+    /**
+     * Create a copy of the Layer.
+     * @param {Object} newOptions Options to override
+     * @return {Layer} A Layer
+     */
+    clone(newOptions) {
+        return new Layer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default Layer;

package/ol/layers/MapGlLayer.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="mapbox-gl" />
+import { RenderFunction } from 'ol/layer/Layer';
+import GeoJSON from 'ol/format/GeoJSON';
+import OlMap from 'ol/Map';
+import { Coordinate } from 'ol/coordinate';
+import { AnyMapboxMap, AnyMapboxMapClass, LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { OlLayerOptions } from './Layer';
+export declare type MapGlLayerOptions = OlLayerOptions & {
+    url?: string;
+    apiKey?: string;
+    apiKeyName?: string;
+    mapOptions?: any;
+    tabIndex?: number;
+};
+/**
+ * Common class for Mapbox and Maplibre and potential other fork from Mapbox.
+ * It's used to share code between Mapbox and Maplibre layers without importing both libs.
+ */
+declare class MapGlLayer extends Layer {
+    mbMap?: AnyMapboxMap;
+    styleUrl?: string;
+    apiKey?: string;
+    apiKeyName: string;
+    format: GeoJSON;
+    loaded: boolean;
+    options: MapGlLayerOptions;
+    constructor(options: MapGlLayerOptions);
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: OlMap): void;
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap(): void;
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap(): void;
+    /**
+     * Update attributions of the source.
+     * @private
+     */
+    updateAttribution(evt: maplibregl.MapLibreEvent | mapboxgl.MapboxEvent): void;
+    /**
+     * Request feature information for a given coordinate.
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+     * @param {Object} options A [mapboxgl.Map#queryrenderedfeatures](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) options parameter.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate. The original Mapbox feature is available as a property named 'mapboxFeature'.
+     */
+    getFeatureInfoAtCoordinate(coordinate: Coordinate, options: any): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * Return the render function function for the ol layer.
+     *
+     */
+    getOlLayerRender(): RenderFunction;
+    /**
+     * Return the Class to instanciate for the mapbox map.
+     *
+     * @return {mapboxgl.Map|maplibregl.Map} map
+     */
+    getMapboxMapClass(): AnyMapboxMapClass;
+}
+export default MapGlLayer;
+//# sourceMappingURL=MapGlLayer.d.ts.map

package/ol/layers/MapGlLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapGlLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapGlLayer.ts"],"names":[],"mappings":";AAEA,OAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEhD,oBAAY,iBAAiB,GAAG,cAAc,GAAG;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,cAAM,UAAW,SAAQ,KAAK;IAC5B,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,UAAU,EAAG,MAAM,CAAC;IAEpB,MAAM,EAAG,OAAO,CAAC;IAEjB,MAAM,EAAG,OAAO,CAAC;IAEjB,OAAO,EAAG,iBAAiB,CAAC;gBAEhB,OAAO,EAAE,iBAAiB;IAmCtC;;;OAGG;IACH,WAAW,CAAC,GAAG,EAAE,KAAK;IAkBtB;;OAEG;IACH,aAAa;IAab;;;OAGG;IACH,SAAS;IAuET;;;OAGG;IACH,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,aAAa,GAAG,QAAQ,CAAC,WAAW;IAStE;;;;;OAKG;IACH,0BAA0B,CACxB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,GAAG,GACX,OAAO,CAAC,2BAA2B,CAAC;IAqDvC;;;OAGG;IAEH,gBAAgB,IAAI,cAAc;IAOlC;;;;OAIG;IAEH,iBAAiB,IAAI,iBAAiB;CAMvC;AAED,eAAe,UAAU,CAAC"}

package/ol/layers/MapGlLayer.js

@@ -0,0 +1,218 @@
+/* eslint-disable max-classes-per-file */
+import { toLonLat } from 'ol/proj';
+import OlLayer from 'ol/layer/Layer';
+import Source from 'ol/source/Source';
+import GeoJSON from 'ol/format/GeoJSON';
+import BaseEvent from 'ol/events/Event';
+import { getUrlWithParams, getMapboxMapCopyrights } from '../../common/utils';
+import Layer from './Layer';
+/**
+ * Common class for Mapbox and Maplibre and potential other fork from Mapbox.
+ * It's used to share code between Mapbox and Maplibre layers without importing both libs.
+ */
+class MapGlLayer extends Layer {
+    constructor(options) {
+        super(options);
+        this.olLayer = new OlLayer({
+            source: new Source({}),
+            render: this.getOlLayerRender(),
+        });
+        /**
+         * Url of the mapbox style.
+         * @type {string}
+         * @private
+         */
+        this.styleUrl = options.url;
+        /**
+         * Api key for the url of the mapbox style.
+         * If set to false, the apiKey is not required.
+         * @type {string}
+         * @private
+         */
+        this.apiKey = options.apiKey;
+        /**
+         * Name of the apiKey to set in the url request.
+         * Default is 'key'.
+         * @type {string}
+         * @private
+         */
+        this.apiKeyName = options.apiKeyName || 'key';
+        /** @ignore */
+        this.updateAttribution = this.updateAttribution.bind(this);
+    }
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        /**
+         * The feature format.
+         * @type {ol/format/GeoJSON}
+         */
+        this.format = new GeoJSON({
+            featureProjection: this.map.getView().getProjection(),
+        });
+        this.loadMbMap();
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap() {
+        if (this.mbMap) {
+            this.mbMap.off('idle', this.updateAttribution);
+            // Some asynchrone repaints are triggered even if the mbMap has been removed,
+            // to avoid display of errors we set an empty function.
+            this.mbMap.triggerRepaint = () => { };
+            this.mbMap.remove();
+            this.mbMap = undefined;
+        }
+        this.loaded = false;
+        super.detachFromMap();
+    }
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap() {
+        var _a, _b, _c;
+        this.olListenersKeys.push(
+        // @ts-ignore
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('change:target', () => {
+            this.loadMbMap();
+        }));
+        if (!((_b = this.map) === null || _b === void 0 ? void 0 : _b.getTargetElement())) {
+            return;
+        }
+        if (!this.visible) {
+            // On next change of visibility we load the map
+            this.olListenersKeys.push(
+            // @ts-ignore
+            this.once('change:visible', () => {
+                this.loadMbMap();
+            }));
+            return;
+        }
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.width = '100%';
+        container.style.height = '100%';
+        if (!this.styleUrl) {
+            // eslint-disable-next-line no-console
+            console.error(`No styleUrl defined for mapbox layer: ${this.styleUrl}`);
+            return;
+        }
+        if (!this.apiKey && !((_c = this.styleUrl) === null || _c === void 0 ? void 0 : _c.includes(this.apiKeyName))) {
+            // eslint-disable-next-line no-console
+            console.error(`No apiKey defined for mapbox layer with style url to ${this.styleUrl}`);
+        }
+        const Map = this.getMapboxMapClass();
+        /**
+         * A mapbox map
+         * @type {mapboxgl.Map}
+         */
+        this.mbMap = new Map(Object.assign({ style: getUrlWithParams(this.styleUrl, {
+                [this.apiKeyName]: this.apiKey,
+            }).toString(), container, interactive: false, trackResize: false, attributionControl: false }, (this.options.mapOptions || {})));
+        this.mbMap.once('load', () => {
+            /**
+             * Is the map loaded.
+             * @type {boolean}
+             */
+            this.loaded = true;
+            this.dispatchEvent(new BaseEvent('load'));
+        });
+        this.mbMap.on('idle', this.updateAttribution);
+    }
+    /**
+     * Update attributions of the source.
+     * @private
+     */
+    updateAttribution(evt) {
+        var _a, _b, _c;
+        const newAttributions = getMapboxMapCopyrights(evt.target) || [];
+        if (((_a = this.copyrights) === null || _a === void 0 ? void 0 : _a.toString()) !== newAttributions.toString()) {
+            this.copyrights = newAttributions;
+            // @ts-ignore
+            (_c = (_b = this.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.setAttributions(newAttributions);
+        }
+    }
+    /**
+     * Request feature information for a given coordinate.
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+     * @param {Object} options A [mapboxgl.Map#queryrenderedfeatures](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) options parameter.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate. The original Mapbox feature is available as a property named 'mapboxFeature'.
+     */
+    getFeatureInfoAtCoordinate(coordinate, options) {
+        // Ignore the getFeatureInfo until the mapbox map is loaded
+        if (!options ||
+            !this.format ||
+            !this.mbMap ||
+            !this.mbMap.isStyleLoaded()) {
+            return Promise.resolve({ coordinate, features: [], layer: this });
+        }
+        const pixel = coordinate &&
+            this.mbMap.project(toLonLat(coordinate));
+        let pixels;
+        if (this.hitTolerance) {
+            const { x, y } = pixel;
+            pixels = [
+                {
+                    x: x - this.hitTolerance,
+                    y: y - this.hitTolerance,
+                },
+                {
+                    x: x + this.hitTolerance,
+                    y: y + this.hitTolerance,
+                },
+            ];
+        }
+        // At this point we get GeoJSON Mapbox feature, we transform it to an OpenLayers
+        // feature to be consistent with other layers.
+        const features = this.mbMap
+            // @ts-ignore
+            .queryRenderedFeatures(pixels || pixel, options)
+            .map((feature) => {
+            const olFeature = this.format.readFeature(feature);
+            if (olFeature) {
+                // We save the original mapbox feature to avoid losing informations
+                // potentially needed for other functionnality like highlighting
+                // (id, layer id, source, sourceLayer ...)
+                olFeature.set('mapboxFeature', feature);
+            }
+            return olFeature;
+        });
+        return Promise.resolve({
+            layer: this,
+            features,
+            coordinate,
+        });
+    }
+    /**
+     * Return the render function function for the ol layer.
+     *
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getOlLayerRender() {
+        // eslint-disable-next-line no-console
+        console.error('This function must be implemented in subclasses');
+        const div = document.createElement('div');
+        return () => div;
+    }
+    /**
+     * Return the Class to instanciate for the mapbox map.
+     *
+     * @return {mapboxgl.Map|maplibregl.Map} map
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        // eslint-disable-next-line no-console
+        console.error('This function must be implemented in subclasses');
+        // @ts-ignore
+        return null;
+    }
+}
+export default MapGlLayer;

package/ol/layers/MapboxLayer.d.ts

@@ -0,0 +1,50 @@
+import { Map } from 'mapbox-gl';
+import { Coordinate } from 'ol/coordinate';
+import type OlMap from 'ol/Map';
+import { Size } from 'ol/size';
+import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+export default class MapboxLayer extends MapGlLayer {
+    renderState?: {
+        center?: Coordinate;
+        zoom?: number;
+        visible?: boolean;
+        opacity?: number;
+        resolution?: number;
+        rotation?: number;
+        size?: Size;
+    };
+    tabIndex?: number;
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: OlMap): void;
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap(): void;
+    getOlLayerRender(): import("ol/layer/Layer").RenderFunction;
+    getMapboxMapClass(): typeof Map;
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions: MapGlLayerOptions): MapboxLayer;
+}
+//# sourceMappingURL=MapboxLayer.d.ts.map

package/ol/layers/MapboxLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapboxLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxLayer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,UAAU,EAAE,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;IAEF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,GAAG,EAAE,KAAK;IAsBtB;;;OAGG;IACH,SAAS;IAqDT,gBAAgB;IAKhB,iBAAiB;IAIjB;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,iBAAiB;CAGpC"}