mobility-toolbox-js 3.0.0-beta.2 → 3.0.0-beta.21

package/ol/layers/Layer.d.ts

@@ -0,0 +1,101 @@
+import OLLayer from 'ol/layer/Layer';
+import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
+declare const Layer_base: {
+    new (...args: any[]): {
+        olEventsKeys: import("ol/events").EventsKey[];
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
+        attachToMap(map: import("ol").Map): void;
+        detachFromMap(): void;
+        flat(): any[];
+        onChildrenChange(oldValue: OLLayer[]): void;
+        setMapInternal: ((map: import("ol").Map) => void) & ((map: import("ol").default | null) => void);
+        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: number;
+        readonly key: string;
+        readonly map: import("ol").Map;
+        readonly name: string;
+        olLayer: OLLayer;
+        parent: OLLayer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        getSource: () => import("ol/source").Source | null;
+        getRenderSource: () => import("ol/source").Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<Array<import("ol/Feature").FeatureLike>>;
+        getData: (pixel: import("ol/pixel").Pixel) => Uint8ClampedArray | Uint8Array | Float32Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => Array<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: () => import("ol").default | null;
+        setMap: (map: import("ol").default | null) => void;
+        setSource: (source: import("ol/source").Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => import("ol/layer/Base").BackgroundColor | false;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: import("ol/layer/Layer").default<import("ol/source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer/Layer").default>;
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => Array<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: () => Array<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;
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispatchEvent: (event: import("ol/events/Event").default | string) => boolean | undefined;
+        getListeners: (type: string) => Array<import("ol/events").Listener> | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispose: () => void;
+    };
+} & typeof OLLayer;
+/**
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated Use an OpenLayers Layer instead.
+ */
+declare class Layer extends Layer_base {
+    constructor(options: MobilityLayerOptions);
+    clone(newOptions: MobilityLayerOptions): Layer;
+}
+export default Layer;

package/ol/layers/Layer.js

@@ -0,0 +1,25 @@
+import debounce from 'lodash.debounce';
+import OLLayer from 'ol/layer/Layer';
+import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+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);
+}
+/**
+ * An OpenLayers layer here only for backward compatibility v2.
+ * @deprecated Use an OpenLayers Layer instead.
+ */
+class Layer extends MobilityLayerMixin(OLLayer) {
+    constructor(options) {
+        super(options);
+        deprecated('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

@@ -0,0 +1,160 @@
+import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
+import OlMap from 'ol/Map';
+import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
+import type { MapLibreLayerOptions, MapLibreOptions } from '@geoblocks/ol-maplibre-layer/lib/types/MapLibreLayer';
+export type MaplibreLayerOptions = {
+    apiKey?: string;
+    apiKeyName?: string;
+    mapLibreOptions?: MapLibreOptions;
+    style?: maplibregl.StyleSpecification | null | string;
+    url?: string;
+} & MapLibreLayerOptions & MobilityLayerOptions;
+declare const MaplibreLayer_base: {
+    new (...args: any[]): {
+        olEventsKeys: import("ol/events").EventsKey[];
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
+        attachToMap(map: OlMap): void;
+        detachFromMap(): void;
+        flat(): any[];
+        onChildrenChange(oldValue: import("ol/layer").Layer[]): void;
+        setMapInternal: ((map: OlMap) => void) & ((map: import("ol/Map").default | null) => void);
+        children: import("ol/layer").Layer<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: number;
+        readonly key: string;
+        readonly map: OlMap;
+        readonly name: string;
+        olLayer: import("ol/layer").Layer;
+        parent: import("ol/layer").Layer<import("ol/source").Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        getSource: () => import("ol/source").Source | null;
+        getRenderSource: () => import("ol/source").Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<Array<import("ol/Feature").FeatureLike>>;
+        getData: (pixel: import("ol/pixel").Pixel) => Uint8ClampedArray | Uint8Array | Float32Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => Array<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: () => import("ol/Map").default | null;
+        setMap: (map: import("ol/Map").default | null) => void;
+        setSource: (source: import("ol/source").Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => import("ol/layer/Base").BackgroundColor | false;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: import("ol/layer").default<import("ol/source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer").default>;
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => Array<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: () => Array<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;
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispatchEvent: (event: import("ol/events/Event").default | string) => boolean | undefined;
+        getListeners: (type: string) => Array<import("ol/events").Listener> | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispose: () => void;
+    };
+} & typeof MapLibreLayer;
+/**
+ * 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';
+ *
+ * const layer = new MaplibreLayer({
+ *   apiKey: 'yourApiKey',
+ *   // apiKeyName: 'key',
+ *   // mapLibreOptions: {
+ *   //   interactive: false,
+ *   //   trackResize: false,
+ *   //   attributionControl: false,
+ *   // }
+ *   // queryRenderedFeaturesOptions: {
+ *   //   layers: ['waters_lakes'], // map.getFeaturesAtPixel will only return lakes.
+ *   // },
+ *   // style: 'travic_v2',
+ *   // url: 'https://maps.geops.io',
+ * });
+ *
+ * @classproperty {maplibregl.Map} mapLibreMap - The Maplibre map object. Readonly.
+ * @classproperty {string} style - geOps Maps api style.
+ * @extends {ol/layer/Layer~Layer}
+ * @public
+ */
+declare class MaplibreLayer extends MaplibreLayer_base {
+    /**
+     * 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.mapLibreOptions={ 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.
+     */
+    constructor(options: MaplibreLayerOptions);
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: OlMap): void;
+    /**
+     * Create a copy of the MaplibreLayer.
+     * @param {MaplibreLayerOptions} newOptions Options to override
+     * @return {MaplibreLayer} A MaplibreLayer layer
+     */
+    clone(newOptions: MaplibreLayerOptions): MaplibreLayer;
+    getStyle(): string;
+    updateMaplibreMap(): void;
+    get maplibreMap(): maplibregl.Map | undefined;
+    get mbMap(): maplibregl.Map | undefined;
+    get style(): string;
+    set style(newValue: string);
+    get url(): string;
+    set url(newValue: string);
+}
+export default MaplibreLayer;

package/ol/layers/MaplibreLayer.js

@@ -1,8 +1,22 @@
-import { Map } from 'maplibre-gl';
-import MapGlLayer from './MapGlLayer';
-import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
+import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
+import debounce from 'lodash.debounce';
+import { getUrlWithParams } from '../../common/utils';
+import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+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 +24,7 @@ import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
  * const layer = new MaplibreLayer({
  *   apiKey: 'yourApiKey',
  *   // apiKeyName: 'key',
- *   // mapOptions: {
+ *   // mapLibreOptions: {
  *   //   interactive: false,
  *   //   trackResize: false,
  *   //   attributionControl: false,
@@ -22,43 +36,53 @@ 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 {maplibregl.Map} mapLibreMap - The Maplibre map object. Readonly.
  * @classproperty {string} style - geOps Maps api style.
  * @extends {ol/layer/Layer~Layer}
  * @public
  */
-export default class MaplibreLayer extends MapGlLayer {
-    /** @private */
-    get maplibreMap() {
-        return this.mbMap;
-    }
+class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
     /**
      * 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 {string} [options.apiKeyName="key"] The geOps Maps API 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 style.
+     * @param {string} [options.url="https://maps.geops.io"] The geOps Maps API url.
      */
     constructor(options) {
-        super(Object.assign({}, options));
-    }
-    /**
-     * @private
-     */
-    createRenderer() {
-        return new MaplibreLayerRenderer(this);
+        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 &&
+            newOptions.apiKey &&
+            newOptions.style &&
+            typeof newOptions.style === 'string') {
+            newOptions.mapLibreOptions.style = buildStyleUrl(newOptions.url, newOptions.style, newOptions.apiKey, newOptions.apiKeyName);
+        }
+        super(newOptions);
     }
     /**
-     * @private
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
      */
-    // eslint-disable-next-line class-methods-use-this
-    createMap(options) {
-        return new Map(options);
+    attachToMap(map) {
+        super.attachToMap(map);
+        const updateMaplibreMapDebounced = debounce(this.updateMaplibreMap.bind(this), 150);
+        this.olEventsKeys.push(this.on('propertychange', (evt) => {
+            if (/(url|style)/.test(evt.key)) {
+                updateMaplibreMapDebounced();
+            }
+        }));
     }
+    // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
+    //   return this.get('queryRenderedFeaturesOptions');
+    // }
+    // set queryRenderedFeaturesOptions(
+    //   newValue: maplibregl.QueryRenderedFeaturesOptions,
+    // ) {
+    //   this.set('queryRenderedFeaturesOptions', newValue);
+    // }
     /**
      * Create a copy of the MaplibreLayer.
      * @param {MaplibreLayerOptions} newOptions Options to override
@@ -67,4 +91,50 @@ export default class MaplibreLayer extends MapGlLayer {
     clone(newOptions) {
         return new MaplibreLayer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
     }
+    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 buildStyleUrl(this.url, this.style, this.get('apiKey'), this.get('apiKeyName'));
+    }
+    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);
+        }
+    }
+    get maplibreMap() {
+        deprecated('MaplibreLayer.maplibreMap is deprecated. Use layer.mapLibreMap.');
+        return this.mapLibreMap;
+    }
+    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);
+    }
 }
+export default MaplibreLayer;