mobility-toolbox-js 3.0.0-beta.14 → 3.0.0-beta.16

package/mbt.js

@@ -423,7 +423,7 @@
       var now = function() {
         return root.Date.now();
       };
-      function debounce4(func, wait, options) {
+      function debounce5(func, wait, options) {
         var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
           throw new TypeError(FUNC_ERROR_TEXT);
@@ -531,7 +531,7 @@
         var isBinary = reIsBinary.test(value);
         return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
       }
-      module.exports = debounce4;
+      module.exports = debounce5;
     }
   });
 
@@ -17725,7 +17725,7 @@ uniform ${i3} ${s3} u_${a3};
       var now = function() {
         return root.Date.now();
       };
-      function debounce4(func, wait, options) {
+      function debounce5(func, wait, options) {
         var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
           throw new TypeError(FUNC_ERROR_TEXT);
@@ -17814,7 +17814,7 @@ uniform ${i3} ${s3} u_${a3};
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
-        return debounce4(func, wait, {
+        return debounce5(func, wait, {
           "leading": leading,
           "maxWait": wait,
           "trailing": trailing
@@ -17868,6 +17868,7 @@ uniform ${i3} ${s3} u_${a3};
     StopFinderControl: () => StopFinderControl_default,
     StopsAPI: () => StopsAPI_default,
     VECTOR_TILE_FEATURE_PROPERTY: () => VECTOR_TILE_FEATURE_PROPERTY,
+    VectorLayer: () => VectorLayer_default2,
     compareDepartures: () => compareDepartures_default,
     createCanvas: () => createCanvas_default,
     createRealtimeFilters: () => createRealtimeFilters_default,
@@ -44250,24 +44251,232 @@ uniform ${i3} ${s3} u_${a3};
   var StopFinderControl_default = StopFinderControl;
 
   // src/ol/layers/MaplibreLayer.ts
-  var import_lodash = __toESM(require_lodash());
-  var import_maplibre_gl = __toESM(require_maplibre_gl());
+  var import_lodash2 = __toESM(require_lodash());
+
+  // node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js
+  var import_maplibre_gl = __toESM(require_maplibre_gl(), 1);
+
+  // node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayerRenderer.js
+  var VECTOR_TILE_FEATURE_PROPERTY2 = "vectorTileFeature";
+  var formats = {
+    "EPSG:3857": new GeoJSON_default({
+      featureProjection: "EPSG:3857"
+    })
+  };
+  var MapLibreLayerRenderer = class extends Layer_default2 {
+    getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
+      const pixels = this.getMapLibrePixels(coordinate, hitTolerance);
+      if (!pixels) {
+        return [];
+      }
+      const queryRenderedFeaturesOptions = this.getLayer().get("queryRenderedFeaturesOptions") || {};
+      const features = this.getLayer().mapLibreMap?.queryRenderedFeatures(pixels, queryRenderedFeaturesOptions).map((feature2) => {
+        return this.toOlFeature(feature2);
+      });
+      return features || [];
+    }
+    prepareFrame() {
+      return true;
+    }
+    renderFrame(frameState) {
+      const layer = this.getLayer();
+      const { mapLibreMap } = layer;
+      const map = layer.getMapInternal();
+      if (!layer || !map || !mapLibreMap) {
+        return null;
+      }
+      const mapLibreCanvas = mapLibreMap.getCanvas();
+      const { viewState } = frameState;
+      mapLibreMap.jumpTo({
+        center: toLonLat(viewState.center),
+        zoom: viewState.zoom - 1,
+        bearing: toDegrees(-viewState.rotation)
+      });
+      const opacity = layer.getOpacity().toString();
+      if (mapLibreCanvas && opacity !== mapLibreCanvas.style.opacity) {
+        mapLibreCanvas.style.opacity = opacity;
+      }
+      if (!mapLibreCanvas.isConnected) {
+        map.render();
+      } else if (!sameSize(mapLibreCanvas, frameState)) {
+        mapLibreMap.resize();
+      }
+      mapLibreMap.redraw();
+      return mapLibreMap.getContainer();
+    }
+    getFeatures(pixel) {
+      const coordinate = this.getLayer().getMapInternal()?.getCoordinateFromPixel(pixel);
+      return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
+    }
+    forEachFeatureAtCoordinate(coordinate, _frameState, hitTolerance, callback) {
+      const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
+      features.forEach((feature2) => {
+        const geometry = feature2.getGeometry();
+        if (geometry instanceof SimpleGeometry_default) {
+          callback(feature2, this.layer_, geometry);
+        }
+      });
+      return features?.[0];
+    }
+    getMapLibrePixels(coordinate, hitTolerance) {
+      if (!coordinate) {
+        return void 0;
+      }
+      const pixel = this.getLayer().mapLibreMap?.project(toLonLat(coordinate));
+      if (pixel?.x === void 0 || pixel?.y === void 0) {
+        return void 0;
+      }
+      let pixels = [
+        pixel.x,
+        pixel.y
+      ];
+      if (hitTolerance) {
+        const [x, y] = pixels;
+        pixels = [
+          [x - hitTolerance, y - hitTolerance],
+          [x + hitTolerance, y + hitTolerance]
+        ];
+      }
+      return pixels;
+    }
+    toOlFeature(feature2) {
+      const layer = this.getLayer();
+      const map = layer.getMapInternal();
+      const projection = map?.getView()?.getProjection()?.getCode() || "EPSG:3857";
+      if (!formats[projection]) {
+        formats[projection] = new GeoJSON_default({
+          featureProjection: projection
+        });
+      }
+      const olFeature = formats[projection].readFeature(feature2);
+      if (olFeature) {
+        olFeature.set(VECTOR_TILE_FEATURE_PROPERTY2, feature2, true);
+      }
+      return olFeature;
+    }
+  };
+  function sameSize(canvas2, frameState) {
+    return canvas2.width === Math.floor(frameState.size[0] * frameState.pixelRatio) && canvas2.height === Math.floor(frameState.size[1] * frameState.pixelRatio);
+  }
+
+  // node_modules/@geoblocks/ol-maplibre-layer/lib/getMapLibreAttributions.js
+  var getMapLibreAttributions = (map) => {
+    if (!map) {
+      return [];
+    }
+    const { style } = map;
+    if (!style) {
+      return [];
+    }
+    const { sourceCaches } = style;
+    let copyrights = [];
+    Object.values(sourceCaches).forEach((value) => {
+      if (value.used) {
+        const { attribution } = value.getSource();
+        if (attribution) {
+          copyrights = copyrights.concat(attribution.replace(/&copy;/g, "\xA9").split(/(<a.*?<\/a>)/));
+        }
+      }
+    });
+    return removeDuplicate2(copyrights);
+  };
+  var removeDuplicate2 = (array) => {
+    const arrWithoutEmptyValues = array.filter((val) => val !== void 0 && val !== null && val.trim && val.trim());
+    const lowerCasesValues = arrWithoutEmptyValues.map((str) => str.toLowerCase());
+    const uniqueLowerCaseValues = [...new Set(lowerCasesValues)];
+    return uniqueLowerCaseValues.map((uniqueStr) => arrWithoutEmptyValues.find((str) => str.toLowerCase() === uniqueStr));
+  };
+  var getMapLibreAttributions_default = getMapLibreAttributions;
+
+  // node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js
+  var MapLibreLayer = class extends Layer_default {
+    mapLibreMap;
+    loaded = false;
+    olListenersKeys = [];
+    constructor(options) {
+      super({
+        source: new Source_default({
+          attributions: () => {
+            return getMapLibreAttributions_default(this.mapLibreMap);
+          }
+        }),
+        ...options
+      });
+    }
+    disposeInternal() {
+      unByKey(this.olListenersKeys);
+      this.loaded = false;
+      if (this.mapLibreMap) {
+        this.mapLibreMap.triggerRepaint = () => {
+        };
+        this.mapLibreMap.remove();
+      }
+      super.disposeInternal();
+    }
+    setMapInternal(map) {
+      super.setMapInternal(map);
+      if (map) {
+        this.loadMapLibreMap();
+      } else {
+        this.dispose();
+      }
+    }
+    loadMapLibreMap() {
+      this.loaded = false;
+      const map = this.getMapInternal();
+      if (map) {
+        this.olListenersKeys.push(map.on("change:target", this.loadMapLibreMap.bind(this)));
+      }
+      if (!map?.getTargetElement()) {
+        return;
+      }
+      if (!this.getVisible()) {
+        this.olListenersKeys.push(this.once("change:visible", this.loadMapLibreMap.bind(this)));
+        return;
+      }
+      const container = document.createElement("div");
+      container.style.position = "absolute";
+      container.style.width = "100%";
+      container.style.height = "100%";
+      const mapLibreOptions = this.get("mapLibreOptions");
+      this.mapLibreMap = new import_maplibre_gl.Map(Object.assign({}, mapLibreOptions, {
+        container,
+        attributionControl: false,
+        interactive: false,
+        trackResize: false
+      }));
+      this.mapLibreMap.on("sourcedata", () => {
+        this.getSource()?.refresh();
+      });
+      this.mapLibreMap.once("load", () => {
+        this.loaded = true;
+        this.dispatchEvent(new Event_default("load"));
+      });
+    }
+    createRenderer() {
+      return new MapLibreLayerRenderer(this);
+    }
+  };
 
   // src/ol/mixins/PropertiesLayerMixin.ts
+  var import_lodash = __toESM(require_lodash());
+  var deprecated = (0, import_lodash.default)((message) => {
+    console.warn(message);
+  }, 1e3);
   function PropertiesLayerMixin(Base) {
     return class PropertiesLayer extends Base {
       constructor(...args) {
         const options = args[0];
         super(options);
         this.options = {};
-        this.olListenersKeys = [];
+        this.olEventsKeys = [];
         if (options.properties) {
-          console.warn(
+          deprecated(
             "Deprecated. Don't use properties options. Pass the values directly in options object."
           );
           this.setProperties(options.properties);
         }
-        this.olListenersKeys?.push(
+        this.olEventsKeys?.push(
           // Update parent property
           this.on("propertychange", (evt) => {
             if (evt.key === "children") {
@@ -44276,35 +44485,62 @@ uniform ${i3} ${s3} u_${a3};
           })
         );
         this.options = options;
-        this.children = options.children || [];
+        this.set("children", options.children || []);
       }
+      /** @deprecated */
       get children() {
+        deprecated(
+          "Layer.children is deprecated. Use the Layer.get('children') method instead."
+        );
         return this.get("children") || [];
       }
+      /** @deprecated */
       set children(newValue) {
+        deprecated(
+          "Layer.children is deprecated. Use the Layer.set('children', children) method instead."
+        );
         this.set("children", newValue || []);
       }
+      /** @deprecated */
       get copyrights() {
-        console.warn("Deprecated. Use the source object to get the attributions");
+        deprecated(
+          "Layer.copyrights is deprecated. Get the attributions from the source object"
+        );
         return this.get("copyrights");
       }
+      /** @deprecated */
       set copyrights(newCopyrights) {
-        console.warn("Deprecated. Use the source object to set the attributions");
+        deprecated(
+          "Layer.copyrights is deprecated. Set the attributions to the source object."
+        );
         const arrValue = newCopyrights && !Array.isArray(newCopyrights) ? [newCopyrights] : newCopyrights;
         this.set("copyrights", arrValue || []);
       }
+      /** @deprecated */
       get disabled() {
+        deprecated(
+          "Layer.disabled is deprecated. Use the Layer.get('disabled') method instead."
+        );
         return this.get("disabled");
       }
+      /** @deprecated */
       set disabled(newValue) {
+        deprecated(
+          "Layer.disabled is deprecated. Use the Layer.set('disabled', newValue) method instead."
+        );
         this.set("disabled", newValue);
       }
+      /** @deprecated */
       get group() {
+        deprecated(
+          "Layer.group is deprecated. Use the Layer.get('group') method instead."
+        );
         return this.get("group");
       }
+      /** @deprecated */
       get hitTolerance() {
-        console.warn(
-          "Deprecated. Pass the pixelTolerance when you request the features."
+        deprecated(
+          "Layer.hitTolerance is deprecated.Pass the hitTolerance when you request the features."
         );
         return this.get("hitTolerance") || 5;
       }
@@ -44314,31 +44550,53 @@ uniform ${i3} ${s3} u_${a3};
       get map() {
         return this.getMapInternal();
       }
+      /** @deprecated */
       get name() {
+        deprecated(
+          "Layer.name is deprecated. Use the Layer.get('name') method instead."
+        );
         return this.get("name");
       }
+      /** @deprecated */
       get olLayer() {
-        console.warn(
-          "Deprecated property: mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This getter is only a redirect to the current 'this' object."
+        deprecated(
+          "Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This getter is only a redirect to the current 'this' object."
         );
         return this;
       }
+      /** @deprecated */
       // eslint-disable-next-line class-methods-use-this
       set olLayer(newValue) {
-        console.log(
-          "Deprecated property: mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This setter has no effect."
+        deprecated(
+          "Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This setter has no effect."
         );
       }
+      /** @deprecated */
       get parent() {
+        deprecated(
+          "Layer.parent is deprecated. Use the Layer.get('parent') method instead."
+        );
         return this.get("parent");
       }
+      /** @deprecated */
       set parent(newValue) {
+        deprecated(
+          "Layer.parent is deprecated. Use the Layer.set('parent', parent) method instead."
+        );
         this.set("parent", newValue);
       }
+      /** @deprecated */
       get visible() {
+        deprecated(
+          "Layer.visible is deprecated. Use the Layer.getVisible() method instead."
+        );
         return this.getVisible();
       }
+      /** @deprecated */
       set visible(newValue) {
+        deprecated(
+          "Layer.visible is deprecated. Use the Layer.setVisible(newValue) method instead."
+        );
         this.setVisible(newValue);
       }
       // @ts-expect-error - this is a mixin
@@ -44355,7 +44613,7 @@ uniform ${i3} ${s3} u_${a3};
         (oldValue || []).forEach((child) => {
           child.set("parent", void 0);
         });
-        (this.children || []).forEach((child) => {
+        (this.get("children") || []).forEach((child) => {
           child.set("parent", this);
         });
       }
@@ -44383,8 +44641,12 @@ uniform ${i3} ${s3} u_${a3};
       }
       /**
        * Return the an array containing all the descendants of the layer in a flat array. Including the current layer.
+       * @deprecated
        */
       flat() {
+        deprecated(
+          "Layer.flat is deprecated. Use getLayersAsFlatArray utils method instead."
+        );
         return getLayersAsFlatArray_default(this);
       }
     };
@@ -44401,121 +44663,29 @@ uniform ${i3} ${s3} u_${a3};
   }
   var MobilityLayerMixin_default = MobilityLayerMixin;
 
-  // src/ol/renderers/MaplibreLayerRenderer.ts
-  var formats = {
-    "EPSG:3857": new GeoJSON_default({
-      featureProjection: "EPSG:3857"
-    })
-  };
-  var MaplibreLayerRenderer = class extends Layer_default2 {
-    getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
-      if (!coordinate) {
-        return [];
-      }
-      const layer = this.getLayer();
-      const map = layer.getMapInternal();
-      const { mbMap } = layer;
-      const projection = map?.getView()?.getProjection()?.getCode() || "EPSG:3857";
-      let features = [];
-      if (!formats[projection]) {
-        formats[projection] = new GeoJSON_default({
-          featureProjection: projection
-        });
-      }
-      if (mbMap?.isStyleLoaded()) {
-        const pixel = coordinate && mbMap.project(toLonLat(coordinate));
-        if (pixel?.x && pixel?.y) {
-          let pixels = [
-            pixel.x,
-            pixel.y
-          ];
-          if (hitTolerance) {
-            const [x, y] = pixels;
-            pixels = [
-              [x - hitTolerance, y - hitTolerance],
-              [x + hitTolerance, y + hitTolerance]
-            ];
-          }
-          features = mbMap.queryRenderedFeatures(
-            pixels,
-            layer.queryRenderedFeaturesOptions || {}
-          ).map((feature2) => {
-            const olFeature = formats[projection].readFeature(
-              feature2
-            );
-            if (olFeature) {
-              olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature2);
-            }
-            return olFeature;
-          });
-        }
-      }
-      return features;
-    }
-    // eslint-disable-next-line class-methods-use-this
-    prepareFrame() {
-      return true;
-    }
-    renderFrame(frameState) {
-      const layer = this.getLayer();
-      const { map, mbMap } = layer;
-      if (!layer || !map || !mbMap) {
-        return null;
-      }
-      const canvas2 = mbMap.getCanvas();
-      const { viewState } = frameState;
-      const opacity = layer.getOpacity() || 1;
-      canvas2.style.opacity = `${opacity}`;
-      mbMap.jumpTo({
-        center: toLonLat(viewState.center),
-        zoom: viewState.zoom - 1,
-        bearing: toDegrees(-viewState.rotation)
-      });
-      if (!canvas2.isConnected) {
-        map.render();
-      } else if (canvas2.width !== frameState.size[0] || canvas2.height !== frameState.size[1]) {
-        mbMap.resize();
-      }
-      mbMap.redraw();
-      return mbMap.getContainer();
-    }
-    getFeatures(pixel) {
-      const coordinate = this.getLayer()?.getMapInternal()?.getCoordinateFromPixel(pixel);
-      return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
-    }
-    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
-      const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-      features.forEach((feature2) => {
-        callback(feature2, this.layer_, feature2.getGeometry());
-      });
-      return features?.[0];
-    }
-  };
-
   // src/ol/layers/MaplibreLayer.ts
-  var MaplibreLayer = class _MaplibreLayer extends MobilityLayerMixin_default(Layer_default) {
-    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);
-    }
+  var buildStyleUrl = (url, style, apiKey, apiKeyName) => {
+    return getUrlWithParams_default(`${url}/styles/${style}/style.json`, {
+      [apiKeyName]: apiKey
+    }).toString();
+  };
+  var MaplibreLayer = class _MaplibreLayer extends MobilityLayerMixin_default(MapLibreLayer) {
     get mbMap() {
-      console.warn("Deprecated. Use layer.maplibreMap.");
+      console.warn(".mbMap deprecated. Use layer.maplibreMap.");
       return this.maplibreMap;
     }
-    get queryRenderedFeaturesOptions() {
-      return this.get("queryRenderedFeaturesOptions");
-    }
-    set queryRenderedFeaturesOptions(newValue) {
-      this.set("queryRenderedFeaturesOptions", newValue);
+    get maplibreMap() {
+      console.warn(".maplibreMap eprecated. Use layer.mapLibreMap.");
+      return this.mapLibreMap;
     }
+    // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
+    //   return this.get('queryRenderedFeaturesOptions');
+    // }
+    // set queryRenderedFeaturesOptions(
+    //   newValue: maplibregl.QueryRenderedFeaturesOptions,
+    // ) {
+    //   this.set('queryRenderedFeaturesOptions', newValue);
+    // }
     get style() {
       return this.get("style");
     }
@@ -44534,32 +44704,29 @@ uniform ${i3} ${s3} u_${a3};
      * @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 {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({
-        source: new Source_default({
-          attributions: () => {
-            return this.maplibreMap && getMapGlCopyrights_default(this.maplibreMap) || [];
-          }
-        }),
+      const newOptions = {
         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: {
-          interactive: false,
-          trackResize: false,
-          attributionControl: false,
-          ...options?.mapOptions || {}
-        },
-        queryRenderedFeaturesOptions: {
-          ...options?.queryRenderedFeaturesOptions || {}
+        mapLibreOptions: {
+          ...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.
@@ -44567,69 +44734,19 @@ uniform ${i3} ${s3} u_${a3};
      */
     attachToMap(map) {
       super.attachToMap(map);
-      this.loadMbMap();
-      const updateMaplibreMapDebounced = (0, import_lodash.default)(
+      this.updateMaplibreMap();
+      const updateMaplibreMapDebounced = (0, import_lodash2.default)(
         this.updateMaplibreMap.bind(this),
         150
       );
-      this.olListenersKeys.push(
+      this.olEventsKeys.push(
         this.on("propertychange", (evt) => {
-          if (/(apiKey|apiKeyName|url|style)/.test(evt.key)) {
+          if (/(url|style)/.test(evt.key)) {
             updateMaplibreMapDebounced();
           }
         })
       );
     }
-    /**
-     * Terminate what was initialized in init function. Remove layer, events...
-     */
-    detachFromMap() {
-      if (this.maplibreMap) {
-        this.maplibreMap.triggerRepaint = () => {
-        };
-        this.maplibreMap.remove();
-        this.maplibreMap = void 0;
-      }
-      this.loaded = false;
-      super.detachFromMap();
-    }
-    /**
-     * Create the Maplibre map.
-     * @private
-     */
-    loadMbMap() {
-      this.loaded = false;
-      this.olListenersKeys.push(
-        // @ts-ignore
-        this.map?.on("change:target", this.loadMbMap.bind(this))
-      );
-      if (!this.map?.getTargetElement()) {
-        return;
-      }
-      if (!this.visible) {
-        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%";
-      this.maplibreMap = this.createMap({
-        style: this.getStyle(),
-        container,
-        ...this.options?.mapOptions || {}
-      });
-      this.maplibreMap.on("sourcedata", () => {
-        this.getSource()?.refresh();
-      });
-      this.maplibreMap.once("load", () => {
-        this.loaded = true;
-        this.dispatchEvent(new Event_default("load"));
-      });
-    }
     getStyle() {
       if (this.style && typeof this.style === "object" && this.style.name && this.style.version) {
         return this.style;
@@ -44637,19 +44754,15 @@ uniform ${i3} ${s3} u_${a3};
       if (this.url.includes("style.json")) {
         return this.url;
       }
-      return getUrlWithParams_default(`${this.url}/styles/${this.style}/style.json`, {
-        [this.apiKeyName]: this.apiKey
-      }).toString();
-    }
-    // eslint-disable-next-line class-methods-use-this
-    createMap(options) {
-      return new import_maplibre_gl.Map(options);
-    }
-    createRenderer() {
-      return new MaplibreLayerRenderer(this);
+      return buildStyleUrl(
+        this.url,
+        this.style,
+        this.get("apiKey"),
+        this.get("apiKeyName")
+      );
     }
     updateMaplibreMap() {
-      this.maplibreMap?.setStyle(this.getStyle(), { diff: false });
+      this.mapLibreMap?.setStyle(this.getStyle(), { diff: false });
     }
     /**
      * Create a copy of the MaplibreLayer.
@@ -44757,7 +44870,9 @@ uniform ${i3} ${s3} u_${a3};
      * @param {FilterFunction} [options.layersFilter] Filter function to decide which style layer to apply visiblity on. If not provided, the 'layers' property is used.
      * @param {FilterFunction} [options.queryRenderedLayersFilter] Filter function to decide which style layer are available for query.
      */
-    constructor(options = {}) {
+    constructor(options = {
+      mapLibreOptions: { style: { version: 8, sources: {}, layers: [] } }
+    }) {
       if (options.mapboxLayer) {
         console.warn(
           "options.mapboxLayer is deprecated. Use options.maplibreLayer instead."
@@ -44860,7 +44975,7 @@ uniform ${i3} ${s3} u_${a3};
         return;
       }
       if (!this.map.getTargetElement()) {
-        this.olListenersKeys.push(
+        this.olEventsKeys.push(
           this.map.on("change:target", () => {
             this.attachToMap(map);
           })
@@ -44875,7 +44990,7 @@ uniform ${i3} ${s3} u_${a3};
           maplibreMap.once("load", this.onLoad);
         }
       }
-      this.olListenersKeys.push(
+      this.olEventsKeys.push(
         // @ts-expect-error 'load' is a custom event
         this.maplibreLayer.on("load", this.onLoad.bind(this)),
         this.on("change:visible", (evt) => {
@@ -45138,11 +45253,11 @@ uniform ${i3} ${s3} u_${a3};
   var MaplibreStyleLayer_default = MaplibreStyleLayer;
 
   // src/ol/layers/RealtimeLayer.ts
-  var import_lodash4 = __toESM(require_lodash());
+  var import_lodash5 = __toESM(require_lodash());
 
   // src/common/mixins/RealtimeLayerMixin.ts
-  var import_lodash2 = __toESM(require_lodash());
-  var import_lodash3 = __toESM(require_lodash2());
+  var import_lodash3 = __toESM(require_lodash());
+  var import_lodash4 = __toESM(require_lodash2());
   function RealtimeLayerMixin(Base) {
     return class Mixin extends Base {
       constructor(options) {
@@ -45221,12 +45336,12 @@ uniform ${i3} ${s3} u_${a3};
           return this.renderTimeIntervalByZoom[zoom];
         };
         this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
-        this.throttleRenderTrajectories = (0, import_lodash3.default)(
+        this.throttleRenderTrajectories = (0, import_lodash4.default)(
           this.renderTrajectoriesInternal,
           50,
           { leading: false, trailing: true }
         );
-        this.debounceRenderTrajectories = (0, import_lodash2.default)(
+        this.debounceRenderTrajectories = (0, import_lodash3.default)(
           this.renderTrajectoriesInternal,
           50,
           { leading: true, trailing: true, maxWait: 5e3 }
@@ -45636,13 +45751,13 @@ uniform ${i3} ${s3} u_${a3};
         const nextTick = Math.max(25, timeStep / (this.speed || 1));
         const nextThrottleTick = Math.min(nextTick, 500);
         if (this.useThrottle) {
-          this.throttleRenderTrajectories = (0, import_lodash3.default)(
+          this.throttleRenderTrajectories = (0, import_lodash4.default)(
             this.renderTrajectoriesInternal,
             nextThrottleTick,
             { leading: true, trailing: true }
           );
         } else if (this.useDebounce) {
-          this.debounceRenderTrajectories = (0, import_lodash2.default)(
+          this.debounceRenderTrajectories = (0, import_lodash3.default)(
             this.renderTrajectoriesInternal,
             nextThrottleTick,
             { leading: true, trailing: true, maxWait: 5e3 }
@@ -46205,8 +46320,8 @@ uniform ${i3} ${s3} u_${a3};
         zoom: void 0,
         rotation: 0
       };
-      this.onZoomEndDebounced = (0, import_lodash4.default)(this.onZoomEnd, 100);
-      this.onMoveEndDebounced = (0, import_lodash4.default)(this.onMoveEnd, 100);
+      this.onZoomEndDebounced = (0, import_lodash5.default)(this.onZoomEnd, 100);
+      this.onMoveEndDebounced = (0, import_lodash5.default)(this.onMoveEnd, 100);
     }
     /**
      * @private
@@ -46223,7 +46338,7 @@ uniform ${i3} ${s3} u_${a3};
         }
         const index = this.map.getLayers().getArray().indexOf(this);
         this.map.getLayers().insertAt(index, this.vectorLayer);
-        this.olListenersKeys.push(
+        this.olEventsKeys.push(
           ...this.map.on(
             ["moveend", "change:target"],
             // @ts-expect-error - bad ol definitions
@@ -46472,6 +46587,35 @@ uniform ${i3} ${s3} u_${a3};
   };
   var Layer_default4 = Layer2;
 
+  // src/ol/layers/VectorLayer.ts
+  var VectorLayer2 = class _VectorLayer extends Layer_default4 {
+    /**
+     * @deprecated
+     */
+    getFeatureInfoAtCoordinate(coordinate) {
+      let features = [];
+      if (this.map) {
+        const pixel = this.map.getPixelFromCoordinate(coordinate);
+        features = this.map.getFeaturesAtPixel(pixel, {
+          layerFilter: (l) => l === this.olLayer,
+          hitTolerance: this.hitTolerance || 5
+        });
+      }
+      return Promise.resolve({
+        features,
+        layer: this,
+        coordinate
+      });
+    }
+    /**
+     * @deprecated
+     */
+    clone(newOptions) {
+      return new _VectorLayer({ ...this.options, ...newOptions });
+    }
+  };
+  var VectorLayer_default2 = VectorLayer2;
+
   // src/ol/utils/getFeatureInfoAtCoordinate.ts
   var format3 = new GeoJSON_default();
   var getFeaturesFromWMS = (source, options, abortController) => {