mobility-toolbox-js 3.0.0-beta.15 → 3.0.0-beta.17

package/ol/layers/MaplibreLayer.d.ts

@@ -1,12 +1,13 @@
 import OlMap from 'ol/Map';
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
-import type { MapLibreLayerOptions } from '@geoblocks/ol-maplibre-layer/lib/types/MapLibreLayer';
+import type { MapLibreLayerOptions, MapLibreOptions } from '@geoblocks/ol-maplibre-layer/lib/types/MapLibreLayer';
 import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
 export type MaplibreLayerOptions = MobilityLayerOptions & MapLibreLayerOptions & {
     apiKey?: string;
     apiKeyName?: string;
     style?: string | maplibregl.StyleSpecification;
     url?: string;
+    mapLibreOptions?: MapLibreOptions;
 };
 declare const MaplibreLayer_base: {
     new (...args: any[]): {
@@ -17,6 +18,16 @@ declare const MaplibreLayer_base: {
         set copyrights(newCopyrights: string | string[]);
         disabled: boolean;
         readonly group: 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.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.
+         */
         readonly hitTolerance: number;
         readonly key: string;
         readonly map: OlMap;

package/ol/layers/MaplibreLayer.js

@@ -2,6 +2,11 @@ import debounce from 'lodash.debounce';
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
 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();
+};
 /**
  * An OpenLayers layer able to display data from the [geOps Maps API](https://developer.geops.io/apis/maps).
  *
@@ -31,12 +36,12 @@ import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
     get mbMap() {
         // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layer.maplibreMap.');
+        console.warn('MaplibreLayer.mbMap is deprecated. Use layer.maplibreMap.');
         return this.maplibreMap;
     }
     get maplibreMap() {
         // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layer.mapLibreMap.');
+        console.warn('MaplibreLayer.maplibreMap is deprecated. Use layer.mapLibreMap.');
         return this.mapLibreMap;
     }
     // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
@@ -70,7 +75,11 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
      * @param {string} [options.url="https://maps.geops.io"] The geOps Maps API url.
      */
     constructor(options) {
-        super(Object.assign(Object.assign({ apiKeyName: 'key', style: 'travic_v2', url: 'https://maps.geops.io' }, (options || {})), { mapLibreOptions: Object.assign({}, (options.mapLibreOptions || {})) }));
+        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.mapLibreOptions.style = buildStyleUrl(newOptions.url, newOptions.style, newOptions.apiKey, newOptions.apiKeyName);
+        }
+        super(newOptions);
     }
     /**
      * Initialize the layer and listen to feature clicks.
@@ -99,20 +108,11 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
             return this.url;
         }
         /// Otherwise build the complete style url.
-        return getUrlWithParams(`${this.url}/styles/${this.style}/style.json`, {
-            [this.get('apiKeyName')]: this.get('apiKey'),
-        }).toString();
+        return buildStyleUrl(this.url, this.style, this.get('apiKey'), this.get('apiKeyName'));
     }
-    // eslint-disable-next-line class-methods-use-this
-    // createMap(options: MapOptions): Map {
-    //   return new Map(options);
-    // }
-    // createRenderer(): MaplibreLayerRenderer {
-    //   return new MaplibreLayerRenderer(this);
-    // }
     updateMaplibreMap() {
         var _a;
-        (_a = this.maplibreMap) === null || _a === void 0 ? void 0 : _a.setStyle(this.getStyle(), { diff: false });
+        (_a = this.mapLibreMap) === null || _a === void 0 ? void 0 : _a.setStyle(this.getStyle(), { diff: false });
     }
     /**
      * Create a copy of the MaplibreLayer.

package/ol/layers/MaplibreStyleLayer.js

@@ -147,7 +147,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             return;
         }
         if (!this.map.getTargetElement()) {
-            // If ther e is no target element the maplibreMap is not yet created, we
+            // If ther e is no target element the mapLibreMap is not yet created, we
             // relaunch the initialisation when it's the case.
             this.olEventsKeys.push(this.map.on('change:target', () => {
                 this.attachToMap(map);
@@ -155,17 +155,17 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             return;
         }
         // Apply the initial visibility if possible otherwise we wait for the load event of the layer
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
-            // maplibreMap.loaded() and maplibreMap.isStyleLoaded() are reliable only on the first call of init.
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            // mapLibreMap.loaded() and mapLibreMap.isStyleLoaded() are reliable only on the first call of init.
             // On the next call (when a topic change for example), these functions returns false because
             // the style is being modified.
             // That's why we rely on a property instead for the next calls.
-            if (maplibreMap.loaded()) {
+            if (mapLibreMap.loaded()) {
                 this.onLoad();
             }
             else {
-                maplibreMap.once('load', this.onLoad);
+                mapLibreMap.once('load', this.onLoad);
             }
         }
         // Apply the visibiltity when layer's visibility change.
@@ -188,8 +188,8 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     detachFromMap() {
         var _a;
-        if ((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) {
-            this.maplibreLayer.maplibreMap.off('load', this.onLoad);
+        if ((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) {
+            this.maplibreLayer.mapLibreMap.off('load', this.onLoad);
             this.removeLayers();
             this.removeSources();
         }
@@ -198,14 +198,14 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     addSources() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
             Object.entries(this.sources).forEach(([id, source]) => {
-                if (!maplibreMap.getSource(id)) {
-                    maplibreMap.addSource(id, source);
+                if (!mapLibreMap.getSource(id)) {
+                    mapLibreMap.addSource(id, source);
                 }
             });
         }
@@ -213,14 +213,14 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     removeSources() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
             Object.keys(this.sources).forEach((id) => {
-                if (maplibreMap.getSource(id)) {
-                    maplibreMap.removeSource(id);
+                if (mapLibreMap.getSource(id)) {
+                    mapLibreMap.removeSource(id);
                 }
             });
         }
@@ -228,18 +228,18 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     addLayers() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.layers)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
             this.layers.forEach((layer) => {
                 // @ts-expect-error source is optional but exists in TS definition
                 const { id, source } = layer;
-                if ((!source || (source && maplibreMap.getSource(source))) &&
+                if ((!source || (source && mapLibreMap.getSource(source))) &&
                     id &&
-                    !maplibreMap.getLayer(id)) {
-                    maplibreMap.addLayer(layer, this.beforeId);
+                    !mapLibreMap.getLayer(id)) {
+                    mapLibreMap.addLayer(layer, this.beforeId);
                 }
             });
             this.applyLayoutVisibility();
@@ -248,15 +248,15 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     removeLayers() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.layers)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
             this.layers.forEach((styleLayer) => {
                 const { id } = styleLayer;
-                if (id && maplibreMap.getLayer(id)) {
-                    maplibreMap.removeLayer(id);
+                if (id && mapLibreMap.getLayer(id)) {
+                    mapLibreMap.removeLayer(id);
                 }
             });
         }
@@ -267,17 +267,18 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     onLoad() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap)) {
             return;
         }
         this.addSources();
         this.addLayers();
-        const { maplibreMap } = this.maplibreLayer;
-        const style = maplibreMap.getStyle();
+        const { mapLibreMap } = this.maplibreLayer;
+        const style = mapLibreMap.getStyle();
         if ((style === null || style === void 0 ? void 0 : style.layers) && this.layersFilter) {
             const styles = style.layers.filter(this.layersFilter);
-            this.disabled = !styles.length;
+            this.set('disabled', !styles.length);
         }
+        this.applyLayoutVisibility();
     }
     /**
      * Set the feature state of the features.
@@ -287,10 +288,10 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     setFeatureState(features, state) {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !features.length) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !features.length) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
+        const { mapLibreMap } = this.maplibreLayer;
         features.forEach((feature) => {
             const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
             if ((!source && !sourceLayer) || !feature.getId()) {
@@ -300,7 +301,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
                 }
                 return;
             }
-            maplibreMap.setFeatureState({
+            mapLibreMap.setFeatureState({
                 id: feature.getId(),
                 source,
                 sourceLayer,
@@ -316,23 +317,23 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         var _a;
         // eslint-disable-next-line no-console
         console.warn(`Deprecated. getFeatureInfoAtCoordinate([layer], coordinate) from ol package instead.`);
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap)) {
             return Promise.resolve({ coordinate, features: [], layer: this });
         }
-        const { maplibreMap } = this.maplibreLayer;
+        const { mapLibreMap } = this.maplibreLayer;
         // Ignore the getFeatureInfo until the Maplibre map is loaded
-        if (!maplibreMap.isStyleLoaded()) {
+        if (!mapLibreMap.isStyleLoaded()) {
             return Promise.resolve({ coordinate, features: [], layer: this });
         }
         // We query features only on style layers used by this layer.
         let layers = this.layers || [];
         if (this.layersFilter) {
-            layers = maplibreMap.getStyle().layers.filter(this.layersFilter);
+            layers = mapLibreMap.getStyle().layers.filter(this.layersFilter);
         }
         if (this.queryRenderedLayersFilter) {
             // @ts-ignore
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            layers = maplibreMap
+            layers = mapLibreMap
                 .getStyle()
                 .layers.filter(this.queryRenderedLayersFilter);
         }
@@ -365,14 +366,14 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     //  * @param {maplibregl.filter} filter Determines which features should be rendered in a style layer.
     //  */
     // setFilter(filter: { [key: string]: any }) {
-    //   if (!this.maplibreLayer?.maplibreMap) {
+    //   if (!this.maplibreLayer?.mapLibreMap) {
     //     return;
     //   }
-    //   const { maplibreMap } = this.maplibreLayer;
+    //   const { mapLibreMap } = this.maplibreLayer;
     //   this.styleLayers.forEach(({ id }) => {
-    //     if (id && filter && maplibreMap.getLayer(id)) {
+    //     if (id && filter && mapLibreMap.getLayer(id)) {
     //       // @ts-ignore
-    //       maplibreMap.setFilter(id, filter);
+    //       mapLibreMap.setFilter(id, filter);
     //     }
     //   });
     // }
@@ -424,21 +425,21 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     applyLayoutVisibility(evt) {
         var _a, _b;
-        if (!((_b = (_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) === null || _b === void 0 ? void 0 : _b.getStyle()) || !this.layersFilter) {
+        if (!((_b = (_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) === null || _b === void 0 ? void 0 : _b.getStyle()) || !this.layersFilter) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
-        const style = maplibreMap.getStyle();
+        const { mapLibreMap } = this.maplibreLayer;
+        const style = mapLibreMap.getStyle();
         const visibilityValue = this.getVisible() ? 'visible' : 'none';
         const layers = style.layers || [];
         for (let i = 0; i < layers.length; i += 1) {
             const layer = layers[i];
             if (this.layersFilter(layer)) {
                 const { id } = layer;
-                if (maplibreMap.getLayer(id)) {
-                    maplibreMap.setLayoutProperty(id, 'visibility', visibilityValue);
+                if (mapLibreMap.getLayer(id)) {
+                    mapLibreMap.setLayoutProperty(id, 'visibility', visibilityValue);
                     if (this.getMinZoom() || this.getMaxZoom()) {
-                        maplibreMap.setLayerZoomRange(id, this.getMinZoom() ? this.getMinZoom() - 1 : 0, // Maplibre zoom = ol zoom - 1
+                        mapLibreMap.setLayerZoomRange(id, this.getMinZoom() ? this.getMinZoom() - 1 : 0, // Maplibre zoom = ol zoom - 1
                         this.getMaxZoom() ? this.getMaxZoom() - 1 : 24);
                     }
                 }

package/ol/mixins/PropertiesLayerMixin.js

@@ -112,7 +112,7 @@ function PropertiesLayerMixin(Base) {
                 }
             }));
             this.options = options;
-            this.children = options.children || []; // Trigger the on children change event
+            this.set('children', options.children || []); // Trigger the on children change event
         }
         // @ts-expect-error - this is a mixin
         setMapInternal(map) {
@@ -130,7 +130,7 @@ function PropertiesLayerMixin(Base) {
             (oldValue || []).forEach((child) => {
                 child.set('parent', undefined);
             });
-            (this.children || []).forEach((child) => {
+            (this.get('children') || []).forEach((child) => {
                 child.set('parent', this);
             });
         }

package/package.json

@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.17",
   "homepage": "https://mobility-toolbox-js.geops.io/",
   "exports": {
     ".": "./index.js",