mobility-toolbox-js 3.0.0-beta.10 → 3.0.0-beta.12

package/ol/controls/RoutingControl.d.ts

@@ -31,7 +31,7 @@ export type AbotControllersByGraph = {
     [key: string]: AbortController;
 };
 /**
- * Display a route of a specified mean of transport.
+ * This OpenLayers control allows the user to add and modifiy via points to a map and request a route from the [geOps Routing API](https://developer.geops.io/apis/routing/).
  *
  * @example
  * import { Map } from 'ol';

package/ol/controls/RoutingControl.js

@@ -47,7 +47,7 @@ const getFlatCoordinatesFromSegments = (segmentArray) => {
     return coords;
 };
 /**
- * Display a route of a specified mean of transport.
+ * This OpenLayers control allows the user to add and modifiy via points to a map and request a route from the [geOps Routing API](https://developer.geops.io/apis/routing/).
  *
  * @example
  * import { Map } from 'ol';

package/ol/controls/StopFinderControl.d.ts

@@ -5,7 +5,7 @@ export type StopFinderControlOptions = Options & StopFinderControlCommon & {
     className?: string;
 };
 /**
- * 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';

package/ol/controls/StopFinderControl.js

@@ -3,7 +3,7 @@ import Control from 'ol/control/Control';
 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';

package/ol/layers/{MapGlLayer.d.ts → Layer.d.ts}

@@ -1,36 +1,24 @@
-import Source from 'ol/source/Source';
-import OlMap from 'ol/Map';
-import BaseEvent from 'ol/events/Event';
-import Layer from 'ol/layer/Layer';
-import { AnyMapGlMap } from '../../types';
+import OLLayer from 'ol/layer/Layer';
 import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
-export type MapGlLayerOptions = MobilityLayerOptions & {
-    apiKey?: string;
-    apiKeyName?: string;
-    style?: string | maplibregl.StyleSpecification;
-    url?: string;
-    mapOptions?: maplibregl.MapOptions;
-    queryRenderedFeaturesOptions?: maplibregl.QueryRenderedFeaturesOptions;
-};
-declare const MapGlLayer_base: {
+declare const Layer_base: {
     new (...args: any[]): {
         options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions | undefined;
         olListenersKeys: import("ol/events").EventsKey[];
-        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        children: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>[];
         get copyrights(): string;
         set copyrights(newCopyrights: string | string[]);
         disabled: boolean;
         readonly group: string;
         readonly hitTolerance: boolean;
         readonly key: string;
-        readonly map: OlMap;
+        readonly map: import("ol").Map;
         readonly name: string;
-        olLayer: Layer<Source, import("ol/renderer/Layer").default<any>>;
-        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        olLayer: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>;
+        parent: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>;
         visible: boolean;
-        setMapInternal: ((map: OlMap) => void) & ((map: OlMap | null) => void);
-        onChildrenChange(oldValue: Layer<Source, import("ol/renderer/Layer").default<any>>[]): void;
-        attachToMap(map: OlMap): void;
+        setMapInternal: ((map: import("ol").Map) => void) & ((map: import("ol").Map | null) => void);
+        onChildrenChange(oldValue: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>[]): void;
+        attachToMap(map: import("ol").Map): void;
         detachFromMap(): void;
         flat(): any[];
         addEventListener: (type: string, listener: import("ol/events").Listener) => void;
@@ -39,8 +27,8 @@ declare const MapGlLayer_base: {
         render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
         once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
         un: import("ol/layer/Layer").LayerOnSignature<void>;
-        getSource: () => Source | null;
-        getRenderSource: () => Source | null;
+        getSource: () => import("ol/source").Source | null;
+        getRenderSource: () => import("ol/source").Source | null;
         getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<import("ol/Feature").FeatureLike[]>;
         getData: (pixel: import("ol/pixel").Pixel) => Float32Array | Uint8ClampedArray | Uint8Array | DataView | null;
         isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
@@ -49,15 +37,15 @@ declare const MapGlLayer_base: {
         getDeclutter: () => string;
         renderDeclutter: (frameState: import("ol/Map").FrameState, layerState: import("ol/layer/Layer").State) => void;
         renderDeferred: (frameState: import("ol/Map").FrameState) => void;
-        getMapInternal: () => OlMap | null;
-        setMap: (map: OlMap | null) => void;
-        setSource: (source: Source | null) => void;
+        getMapInternal: () => import("ol").Map | null;
+        setMap: (map: import("ol").Map | null) => void;
+        setSource: (source: import("ol/source").Source | null) => void;
         getRenderer: () => import("ol/renderer/Layer").default<any> | null;
         hasRenderer: () => boolean;
         getBackground: () => false | import("ol/layer/Base").BackgroundColor;
         getClassName: () => string;
         getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
-        getLayersArray: (array?: Layer<Source, import("ol/renderer/Layer").default<any>>[] | undefined) => Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        getLayersArray: (array?: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>[] | undefined) => OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>[];
         getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => import("ol/layer/Layer").State[];
         getExtent: () => import("ol/extent").Extent | undefined;
         getMaxResolution: () => number;
@@ -96,49 +84,18 @@ declare const MapGlLayer_base: {
         unset: (key: string, silent?: boolean | undefined) => void;
         changed: () => void;
         getRevision: () => number;
-        dispatchEvent: (event: string | BaseEvent) => boolean | undefined;
+        dispatchEvent: (event: string | import("ol/events/Event").default) => boolean | undefined;
         getListeners: (type: string) => import("ol/events").Listener[] | undefined;
         hasListener: (type?: string | undefined) => boolean;
         dispose: () => void;
     };
-} & typeof Layer;
+} & typeof OLLayer;
 /**
- * Common class for Maplibre and Maplibre and potential other fork from Maplibre.
- * It's used to share code between Maplibre and Maplibre layers without importing both libs.
- * @private
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated
  */
-declare class MapGlLayer extends MapGlLayer_base {
-    loaded: boolean;
-    mbMap?: AnyMapGlMap;
-    get apiKey(): string;
-    set apiKey(newValue: string);
-    get apiKeyName(): string;
-    set apiKeyName(newValue: string);
-    get style(): string;
-    set style(newValue: string);
-    get url(): string;
-    set url(newValue: string);
-    get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions;
-    set queryRenderedFeaturesOptions(newValue: maplibregl.QueryRenderedFeaturesOptions);
-    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 Maplibre map.
-     * @private
-     */
-    loadMbMap(): void;
-    getStyle(): string;
-    createMap(options: {
-        [id: string]: any;
-    }): AnyMapGlMap;
-    updateMbMap(): void;
+declare class Layer extends Layer_base {
+    constructor(options: MobilityLayerOptions);
+    clone(newOptions: MobilityLayerOptions): Layer;
 }
-export default MapGlLayer;
+export default Layer;

package/ol/layers/Layer.js

@@ -0,0 +1,17 @@
+import OLLayer from 'ol/layer/Layer';
+import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+/**
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated
+ */
+class Layer extends MobilityLayerMixin(OLLayer) {
+    constructor(options) {
+        super(options);
+        // eslint-disable-next-line no-console
+        console.warn('Layer is deprecated. Use an OpenLayers Layer instead.');
+    }
+    clone(newOptions) {
+        return new Layer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
+    }
+}
+export default Layer;

package/ol/layers/MaplibreLayer.d.ts

@@ -1,11 +1,110 @@
+import Source from 'ol/source/Source';
+import OlMap from 'ol/Map';
+import BaseEvent from 'ol/events/Event';
+import Layer from 'ol/layer/Layer';
 import { Map, MapOptions } from 'maplibre-gl';
-import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
+import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
 import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
-export type MaplibreLayerOptions = MapGlLayerOptions & {
-    mapOptions?: MapOptions;
+export type MaplibreLayerOptions = MobilityLayerOptions & {
+    apiKey?: string;
+    apiKeyName?: string;
+    style?: string | maplibregl.StyleSpecification;
+    url?: string;
+    mapOptions?: maplibregl.MapOptions;
+    queryRenderedFeaturesOptions?: maplibregl.QueryRenderedFeaturesOptions;
 };
+declare const MaplibreLayer_base: {
+    new (...args: any[]): {
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions | undefined;
+        olListenersKeys: import("ol/events").EventsKey[];
+        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        get copyrights(): string;
+        set copyrights(newCopyrights: string | string[]);
+        disabled: boolean;
+        readonly group: string;
+        readonly hitTolerance: boolean;
+        readonly key: string;
+        readonly map: OlMap;
+        readonly name: string;
+        olLayer: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        setMapInternal: ((map: OlMap) => void) & ((map: OlMap | null) => void);
+        onChildrenChange(oldValue: Layer<Source, import("ol/renderer/Layer").default<any>>[]): void;
+        attachToMap(map: OlMap): void;
+        detachFromMap(): void;
+        flat(): any[];
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        getSource: () => Source | null;
+        getRenderSource: () => Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<import("ol/Feature").FeatureLike[]>;
+        getData: (pixel: import("ol/pixel").Pixel) => Float32Array | Uint8ClampedArray | Uint8Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => string[];
+        unrender: () => void;
+        getDeclutter: () => string;
+        renderDeclutter: (frameState: import("ol/Map").FrameState, layerState: import("ol/layer/Layer").State) => void;
+        renderDeferred: (frameState: import("ol/Map").FrameState) => void;
+        getMapInternal: () => OlMap | null;
+        setMap: (map: OlMap | null) => void;
+        setSource: (source: Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => false | import("ol/layer/Base").BackgroundColor;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: Layer<Source, import("ol/renderer/Layer").default<any>>[] | undefined) => Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => import("ol/layer/Layer").State[];
+        getExtent: () => import("ol/extent").Extent | undefined;
+        getMaxResolution: () => number;
+        getMinResolution: () => number;
+        getMinZoom: () => number;
+        getMaxZoom: () => number;
+        getOpacity: () => number;
+        getSourceState: () => import("ol/source/Source").State;
+        getVisible: () => boolean;
+        getZIndex: () => number | undefined;
+        setBackground: (background?: import("ol/layer/Base").BackgroundColor | undefined) => void;
+        setExtent: (extent: import("ol/extent").Extent | undefined) => void;
+        setMaxResolution: (maxResolution: number) => void;
+        setMinResolution: (minResolution: number) => void;
+        setMaxZoom: (maxZoom: number) => void;
+        setMinZoom: (minZoom: number) => void;
+        setOpacity: (opacity: number) => void;
+        setVisible: (visible: boolean) => void;
+        setZIndex: (zindex: number) => void;
+        get: (key: string) => any;
+        getKeys: () => string[];
+        getProperties: () => {
+            [x: string]: any;
+        };
+        getPropertiesInternal: () => {
+            [x: string]: any;
+        } | null;
+        hasProperties: () => boolean;
+        notify: (key: string, oldValue: any) => void;
+        addChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        removeChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        set: (key: string, value: any, silent?: boolean | undefined) => void;
+        setProperties: (values: {
+            [x: string]: any;
+        }, silent?: boolean | undefined) => void;
+        unset: (key: string, silent?: boolean | undefined) => void;
+        changed: () => void;
+        getRevision: () => number;
+        dispatchEvent: (event: string | BaseEvent) => boolean | undefined;
+        getListeners: (type: string) => import("ol/events").Listener[] | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        dispose: () => void;
+    };
+} & typeof Layer;
 /**
- * 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';
@@ -31,29 +130,49 @@ export type MaplibreLayerOptions = MapGlLayerOptions & {
  * @extends {ol/layer/Layer~Layer}
  * @public
  */
-export default class MaplibreLayer extends MapGlLayer {
-    options?: MaplibreLayerOptions;
-    /** @private */
-    get maplibreMap(): maplibregl.Map | undefined;
+declare class MaplibreLayer extends MaplibreLayer_base {
+    loaded: boolean;
+    maplibreMap?: Map;
+    get apiKey(): string;
+    set apiKey(newValue: string);
+    get apiKeyName(): string;
+    set apiKeyName(newValue: string);
+    get mbMap(): maplibregl.Map | undefined;
+    get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions;
+    set queryRenderedFeaturesOptions(newValue: maplibregl.QueryRenderedFeaturesOptions);
+    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 {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 {string} [options.style="travic_v2"] The geOps Maps API style.
+     * @param {string} [options.url="https://maps.geops.io"] The geOps Maps API url.
      */
     constructor(options: MaplibreLayerOptions);
     /**
-     * @private
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
      */
-    createRenderer(): MaplibreLayerRenderer;
+    attachToMap(map: OlMap): void;
     /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap(): void;
+    /**
+     * Create the Maplibre map.
      * @private
      */
+    loadMbMap(): void;
+    getStyle(): string;
     createMap(options: MapOptions): Map;
+    createRenderer(): MaplibreLayerRenderer;
+    updateMaplibreMap(): void;
     /**
      * Create a copy of the MaplibreLayer.
      * @param {MaplibreLayerOptions} newOptions Options to override
@@ -61,3 +180,4 @@ export default class MaplibreLayer extends MapGlLayer {
      */
     clone(newOptions: MaplibreLayerOptions): MaplibreLayer;
 }
+export default MaplibreLayer;

package/ol/layers/MaplibreLayer.js

@@ -1,8 +1,13 @@
+import Source from 'ol/source/Source';
+import BaseEvent from 'ol/events/Event';
+import Layer from 'ol/layer/Layer';
+import debounce from 'lodash.debounce';
 import { Map } from 'maplibre-gl';
-import MapGlLayer from './MapGlLayer';
+import { getUrlWithParams, getMapGlCopyrights } from '../../common/utils';
+import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
 /**
- * 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';
@@ -28,37 +33,154 @@ import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
  * @extends {ol/layer/Layer~Layer}
  * @public
  */
-export default class MaplibreLayer extends MapGlLayer {
-    /** @private */
-    get maplibreMap() {
-        return this.mbMap;
+class MaplibreLayer extends MobilityLayerMixin(Layer) {
+    get apiKey() {
+        return this.get('apiKey');
+    }
+    set apiKey(newValue) {
+        this.set('apiKey', newValue);
+    }
+    get apiKeyName() {
+        return this.get('apiKeyName');
+    }
+    set apiKeyName(newValue) {
+        this.set('apiKeyName', newValue);
+    }
+    get mbMap() {
+        console.warn('Deprecated. Use layer.maplibreMap.');
+        return this.maplibreMap;
+    }
+    get queryRenderedFeaturesOptions() {
+        return this.get('queryRenderedFeaturesOptions');
+    }
+    set queryRenderedFeaturesOptions(newValue) {
+        this.set('queryRenderedFeaturesOptions', newValue);
+    }
+    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);
     }
     /**
      * 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 {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 {string} [options.style="travic_v2"] The geOps Maps API style.
+     * @param {string} [options.url="https://maps.geops.io"] The geOps Maps API url.
      */
     constructor(options) {
-        super(Object.assign({}, options));
+        super(Object.assign(Object.assign({ source: new Source({
+                attributions: () => {
+                    return ((this.maplibreMap && getMapGlCopyrights(this.maplibreMap)) || []);
+                },
+            }), apiKeyName: 'key', style: 'travic_v2', url: 'https://maps.geops.io' }, (options || {})), { 
+            // @ts-expect-error mapOptions must be saved by the mixin in this.options
+            mapOptions: Object.assign({ interactive: false, trackResize: false, attributionControl: false }, ((options === null || options === void 0 ? void 0 : options.mapOptions) || {})), queryRenderedFeaturesOptions: Object.assign({}, ((options === null || options === void 0 ? void 0 : options.queryRenderedFeaturesOptions) || {})) }));
     }
     /**
-     * @private
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
      */
-    createRenderer() {
-        return new MaplibreLayerRenderer(this);
+    attachToMap(map) {
+        super.attachToMap(map);
+        this.loadMbMap();
+        const updateMaplibreMapDebounced = debounce(this.updateMaplibreMap.bind(this), 150);
+        this.olListenersKeys.push(this.on('propertychange', (evt) => {
+            if (/(apiKey|apiKeyName|url|style)/.test(evt.key)) {
+                updateMaplibreMapDebounced();
+            }
+        }));
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap() {
+        if (this.maplibreMap) {
+            // Some asynchrone repaints are triggered even if the mbMap has been removed,
+            // to avoid display of errors we set an empty function.
+            this.maplibreMap.triggerRepaint = () => { };
+            this.maplibreMap.remove();
+            this.maplibreMap = undefined;
+        }
+        this.loaded = false;
+        super.detachFromMap();
     }
     /**
+     * Create the Maplibre map.
      * @private
      */
+    loadMbMap() {
+        var _a, _b, _c;
+        this.loaded = false;
+        this.olListenersKeys.push(
+        // @ts-ignore
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('change:target', this.loadMbMap.bind(this)));
+        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.bind(this)));
+            return;
+        }
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.width = '100%';
+        container.style.height = '100%';
+        /**
+         * A Maplibre map
+         * @type {maplibregl.Map}
+         */
+        this.maplibreMap = this.createMap(Object.assign({ style: this.getStyle(), container }, (((_c = this.options) === null || _c === void 0 ? void 0 : _c.mapOptions) || {})));
+        this.maplibreMap.on('sourcedata', () => {
+            var _a;
+            (_a = this.getSource()) === null || _a === void 0 ? void 0 : _a.refresh(); // Refresh attribution
+        });
+        this.maplibreMap.once('load', () => {
+            this.loaded = true;
+            this.dispatchEvent(new BaseEvent('load'));
+        });
+    }
+    getStyle() {
+        // 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;
+        }
+        /// Otherwise build the complete style url.
+        return getUrlWithParams(`${this.url}/styles/${this.style}/style.json`, {
+            [this.apiKeyName]: this.apiKey,
+        }).toString();
+    }
     // eslint-disable-next-line class-methods-use-this
     createMap(options) {
         return new Map(options);
     }
+    createRenderer() {
+        return new MaplibreLayerRenderer(this);
+    }
+    updateMaplibreMap() {
+        var _a;
+        (_a = this.maplibreMap) === null || _a === void 0 ? void 0 : _a.setStyle(this.getStyle(), { diff: false });
+    }
     /**
      * Create a copy of the MaplibreLayer.
      * @param {MaplibreLayerOptions} newOptions Options to override
@@ -68,3 +190,4 @@ export default class MaplibreLayer extends MapGlLayer {
         return new MaplibreLayer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
     }
 }
+export default MaplibreLayer;

package/ol/layers/MaplibreStyleLayer.d.ts

@@ -2,6 +2,7 @@ import { Feature, Map } from 'ol';
 import { Coordinate } from 'ol/coordinate';
 import { ObjectEvent } from 'ol/Object';
 import { Layer } from 'ol/layer';
+import { FeatureState } from 'maplibre-gl';
 import { Source } from 'ol/source';
 import { LayerGetFeatureInfoResponse } from '../../types';
 import { FilterFunction } from '../../common/typedefs';
@@ -194,6 +195,13 @@ declare class MaplibreStyleLayer extends MaplibreStyleLayer_base {
      * @private
      */
     onLoad(): void;
+    /**
+     * Set the feature state of the features.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {{[key:string]:boolean}} state The feature state
+     * @public
+     */
+    setFeatureState(features: Feature[], state: FeatureState): void;
     /**
      * Request feature information for a given coordinate.
      * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
@@ -221,8 +229,6 @@ declare class MaplibreStyleLayer extends MaplibreStyleLayer_base {
     highlight(features?: Feature[]): void;
     /**
      * Apply visibility to style layers that fits the styleLayersFilter function.
-     *
-     * @private
      */
     applyLayoutVisibility(evt?: ObjectEvent): void;
     /**