mobility-toolbox-js 2.0.0-beta.47 → 2.0.0-beta.49

package/mapbox/{utils.js → utils/getSourceCoordinates.js}

@@ -1,34 +1,21 @@
-import { getWidth, getHeight } from 'ol/extent';
-import { fromLonLat } from 'ol/proj';
-/**
- * Get the current resolution of a Mapbox map.
- * @param {mapboxgl.Map} map A map object.
- * @private
- */
-export const getMercatorResolution = (map) => {
-    const bounds = map.getBounds().toArray();
-    const a = fromLonLat(bounds[0]);
-    const b = fromLonLat(bounds[1]);
-    const extent = [...a, ...b];
-    const { width, height } = map.getCanvas();
-    const xResolution = getWidth(extent) / width;
-    const yResolution = getHeight(extent) / height;
-    return Math.max(xResolution, yResolution);
-};
 /**
  * Get the canvas source coordinates of the current map's extent.
  * @param {mapboxgl.Map} map A map object.
  * @private
  */
-export const getSourceCoordinates = (map, pixelRatio) => {
+export const getSourceCoordinates = (map, pixelRatio = 1) => {
     // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
     const { width, height } = map.getCanvas();
+    // @ts-ignore
     const leftTop = map.unproject({ x: 0, y: 0 });
+    // @ts-ignore
     const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+    // @ts-ignore
     const rightBottom = map.unproject({
         x: width / pixelRatio,
         y: height / pixelRatio,
     });
+    // @ts-ignore
     const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
     return [
         [leftTop.lng, leftTop.lat],
@@ -37,7 +24,4 @@ export const getSourceCoordinates = (map, pixelRatio) => {
         [leftBottom.lng, leftBottom.lat],
     ];
 };
-export default {
-    getMercatorResolution,
-    getSourceCoordinates,
-};
+export default getSourceCoordinates;

package/mapbox/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { default as getSourceCoordinates } from "./getSourceCoordinates";
+export { default as getMercatorResolution } from "./getMercatorResolution";
+//# sourceMappingURL=index.d.ts.map

package/mapbox/utils/index.d.ts.map

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

package/mapbox/utils/index.js

@@ -0,0 +1,2 @@
+export { default as getSourceCoordinates } from './getSourceCoordinates';
+export { default as getMercatorResolution } from './getMercatorResolution';

package/mbt.js

@@ -35891,42 +35891,41 @@ uniform ${i3} ${o3} u_${a3};
     return (frameState) => {
       const { map, mbMap, renderState, olLayer } = mapoxLayer;
       if (!map || !mbMap) {
-        return null;
+        return document.createElement("div");
       }
       let changed = false;
       const canvas2 = mbMap.getCanvas();
       const { viewState } = frameState;
-      const visible = olLayer.getVisible();
-      if (renderState.visible !== visible) {
+      const visible = olLayer?.getVisible();
+      if (renderState && renderState?.visible !== visible) {
         canvas2.style.display = visible ? "block" : "none";
         renderState.visible = visible;
         canvas2.style.position = "absolute";
       }
-      const opacity = olLayer.getOpacity();
-      if (renderState.opacity !== opacity) {
+      const opacity = olLayer?.getOpacity();
+      if (canvas2 && renderState && renderState.opacity !== opacity) {
         canvas2.style.opacity = opacity;
         renderState.opacity = opacity;
       }
       const { rotation } = viewState;
-      if (renderState.rotation !== rotation) {
+      if (renderState && renderState.rotation !== rotation) {
         mbMap.rotateTo(-(rotation || 0) * 180 / Math.PI, {
           animate: false
         });
         changed = true;
         renderState.rotation = rotation;
       }
-      if (renderState.zoom !== viewState.zoom || renderState.center[0] !== viewState.center[0] || renderState.center[1] !== viewState.center[1]) {
+      if (renderState && renderState.center && (renderState.zoom !== viewState.zoom || renderState.center[0] !== viewState.center[0] || renderState.center[1] !== viewState.center[1])) {
         mbMap.jumpTo({
           center: toLonLat(viewState.center),
-          zoom: viewState.zoom - 1,
-          animate: false
+          zoom: viewState.zoom - 1
         });
         changed = true;
         renderState.zoom = viewState.zoom;
         renderState.center = viewState.center;
       }
       const size = map.getSize() || [0, 0];
-      if (renderState.size[0] !== size[0] || renderState.size[1] !== size[1]) {
+      if (renderState && renderState.size && (renderState.size[0] !== size[0] || renderState.size[1] !== size[1])) {
         changed = true;
         renderState.size = size;
       }
@@ -36796,13 +36795,13 @@ uniform ${i3} ${o3} u_${a3};
       this.deactivate();
     }
     deactivate() {
-      console.error("This function must be implemented in subclasses");
+      console.error("The function deactivate() must be implemented in subclasses");
     }
     render(options) {
-      console.error("This function must be implemented in subclasses");
+      console.error("The function render() must be implemented in subclasses");
     }
     createDefaultElement() {
-      console.error("This function must be implemented in subclasses");
+      console.error("The function createDefaultElement() must be implemented in subclasses");
     }
   };
   var ControlCommon_default = ControlCommon;
@@ -36862,7 +36861,6 @@ uniform ${i3} ${o3} u_${a3};
       if (this.map) {
         this.map.un("postrender", this.onPostRender);
       }
-      super.deactivate();
     }
     onPostRender(evt) {
       if (this.map && this.element) {
@@ -48645,7 +48643,8 @@ uniform ${i3} ${o3} u_${a3};
         this.removeListeners();
         this.reset();
       }
-      super.deactivate();
+    }
+    render() {
     }
   };
   var RoutingControl_default = RoutingControl;
@@ -48654,9 +48653,9 @@ uniform ${i3} ${o3} u_${a3};
   var StopFinderControlCommon = class extends ControlCommon_default {
     constructor(options) {
       super(options);
-      const { apiParams, apiKey, url } = options;
+      const { apiParams, apiKey, url, placeholder } = options || {};
       this.apiParams = { limit: 20, ...apiParams || {} };
-      this.placeholder = options.placeholder || "Search for a stop...";
+      this.placeholder = placeholder || "Search for a stop...";
       const apiOptions = { apiKey };
       if (url) {
         apiOptions.url = url;
@@ -48664,6 +48663,8 @@ uniform ${i3} ${o3} u_${a3};
       this.api = new StopsAPI_default(apiOptions);
       this.abortController = new AbortController();
     }
+    deactivate() {
+    }
     render(featureCollection) {
       const suggestions = featureCollection?.features || [];
       if (!this.suggestionsElt) {
@@ -48920,10 +48921,10 @@ uniform ${i3} ${o3} u_${a3};
       }
       this.renderState = {
         center: [x, y],
-        zoom: null,
-        rotation: null,
-        visible: null,
-        opacity: null,
+        zoom: void 0,
+        rotation: void 0,
+        visible: void 0,
+        opacity: void 0,
         size: [0, 0]
       };
       super.loadMbMap();
@@ -48972,9 +48973,9 @@ uniform ${i3} ${o3} u_${a3};
     }
   };
 
-  // src/ol/layers/MapboxStyleLayer.js
+  // src/ol/layers/MapboxStyleLayer.ts
   var MapboxStyleLayer = class extends Layer_default4 {
-    constructor(options = {}) {
+    constructor(options) {
       super(options);
       this.mapboxLayer = options.mapboxLayer;
       this.disabled = false;
@@ -48998,11 +48999,11 @@ uniform ${i3} ${o3} u_${a3};
       }
     }
     attachToMap(map) {
-      if (!this.mapboxLayer.map) {
-        this.mapboxLayer.attachToMap(map);
+      if (this.mapboxLayer && !this.mapboxLayer.map) {
+        this.mapboxLayer?.attachToMap(map);
       }
       super.attachToMap(map);
-      if (!this.map) {
+      if (!this.map || !this.mapboxLayer) {
         return;
       }
       const { mbMap } = this.mapboxLayer;
@@ -49024,35 +49025,36 @@ uniform ${i3} ${o3} u_${a3};
         this.onLoad();
       }));
     }
-    detachFromMap(map) {
-      const { mbMap } = this.mapboxLayer;
-      if (mbMap) {
+    detachFromMap() {
+      if (this.mapboxLayer?.mbMap) {
+        const { mbMap } = this.mapboxLayer;
         mbMap.off("load", this.onLoad);
         this.removeStyleLayers();
       }
-      super.detachFromMap(map);
+      super.detachFromMap();
     }
     addStyleLayers() {
-      const { mbMap } = this.mapboxLayer;
-      if (!mbMap) {
+      if (!this.mapboxLayer?.mbMap) {
         return;
       }
+      const { mbMap } = this.mapboxLayer;
       this.styleLayers.forEach((styleLayer) => {
         const { id, source } = styleLayer;
-        if (mbMap.getSource(source) && !mbMap.getLayer(id)) {
+        if (mbMap.getSource(source) && id && !mbMap.getLayer(id)) {
           mbMap.addLayer(styleLayer, this.beforeId);
         }
       });
       this.applyLayoutVisibility();
     }
     removeStyleLayers() {
-      const { mbMap } = this.mapboxLayer;
-      if (!mbMap) {
+      if (!this.mapboxLayer?.mbMap) {
         return;
       }
+      const { mbMap } = this.mapboxLayer;
       this.styleLayers.forEach((styleLayer) => {
-        if (mbMap.getLayer(styleLayer.id)) {
-          mbMap.removeLayer(styleLayer.id);
+        const { id } = styleLayer;
+        if (id && mbMap.getLayer(id)) {
+          mbMap.removeLayer(id);
         }
       });
     }
@@ -49061,6 +49063,9 @@ uniform ${i3} ${o3} u_${a3};
       if (this.addDynamicFilters) {
         this.addDynamicFilters();
       }
+      if (!this.mapboxLayer?.mbMap) {
+        return;
+      }
       const { mbMap } = this.mapboxLayer;
       const style = mbMap.getStyle();
       if (style && this.styleLayersFilter) {
@@ -49069,8 +49074,11 @@ uniform ${i3} ${o3} u_${a3};
       }
     }
     getFeatureInfoAtCoordinate(coordinate) {
+      if (!this.mapboxLayer?.mbMap) {
+        return Promise.resolve({ coordinate, features: [], layer: this });
+      }
       const { mbMap } = this.mapboxLayer;
-      if (!mbMap || !mbMap.isStyleLoaded()) {
+      if (!mbMap.isStyleLoaded()) {
         return Promise.resolve({ coordinate, features: [], layer: this });
       }
       let layers = this.styleLayers || [];
@@ -49084,23 +49092,28 @@ uniform ${i3} ${o3} u_${a3};
         layers: layers.map((layer) => layer && layer.id),
         validate: false
       }).then((featureInfo) => {
-        const features = featureInfo.features.filter((feature2) => this.featureInfoFilter(feature2, this.map.getView().getResolution()));
+        const features = featureInfo.features.filter((feature2) => {
+          return this.featureInfoFilter(feature2, this.map?.getView().getResolution());
+        });
         this.highlight(features);
         return { ...featureInfo, features, layer: this };
       });
     }
     setFilter(filter) {
-      const { mbMap } = this.mapboxLayer;
-      if (!mbMap) {
+      if (!this.mapboxLayer?.mbMap) {
         return;
       }
+      const { mbMap } = this.mapboxLayer;
       this.styleLayers.forEach(({ id }) => {
-        if (mbMap.getLayer(id)) {
+        if (id && filter && mbMap.getLayer(id)) {
           mbMap.setFilter(id, filter);
         }
       });
     }
     setHoverState(features, state) {
+      if (!this.mapboxLayer?.mbMap) {
+        return;
+      }
       const { mbMap } = this.mapboxLayer;
       if (!features || !mbMap) {
         return;
@@ -49121,23 +49134,23 @@ uniform ${i3} ${o3} u_${a3};
       });
     }
     select(features = []) {
-      this.setHoverState(this.selectedFeatures, false);
+      this.setHoverState(this.selectedFeatures || [], false);
       this.selectedFeatures = features;
-      this.setHoverState(this.selectedFeatures, true);
+      this.setHoverState(this.selectedFeatures || [], true);
     }
     highlight(features = []) {
-      const filtered = this.highlightedFeatures.filter((feature2) => !this.selectedFeatures.map((feat) => feat.getId()).includes(feature2.getId()));
+      const filtered = this.highlightedFeatures?.filter((feature2) => !(this.selectedFeatures || []).map((feat) => feat.getId()).includes(feature2.getId())) || [];
       this.setHoverState(filtered, false);
       this.highlightedFeatures = features;
       this.setHoverState(this.highlightedFeatures, true);
     }
     applyLayoutVisibility(evt) {
       const { visible } = this;
-      const { mbMap } = this.mapboxLayer;
       const filterFunc = this.styleLayersFilter;
-      if (!mbMap) {
+      if (!this.mapboxLayer?.mbMap) {
         return;
       }
+      const { mbMap } = this.mapboxLayer;
       const style = mbMap.getStyle();
       if (!style) {
         return;
@@ -49650,7 +49663,7 @@ uniform ${i3} ${o3} u_${a3};
   };
   var fullTrajectoryStyle_default = fullTrajectorystyle;
 
-  // src/ol/styles/fullTrajectoryDelayStyle.js
+  // src/ol/styles/fullTrajectoryDelayStyle.ts
   var stroke = new Style_default({
     zIndex: 2,
     image: new Circle_default({
@@ -49868,7 +49881,7 @@ uniform ${i3} ${o3} u_${a3};
   };
   var RealtimeLayer_default = RealtimeLayer;
 
-  // src/ol/layers/VectorLayer.js
+  // src/ol/layers/VectorLayer.ts
   var VectorLayer2 = class extends Layer_default4 {
     getFeatureInfoAtCoordinate(coordinate) {
       let features = [];
@@ -49891,29 +49904,40 @@ uniform ${i3} ${o3} u_${a3};
   };
   var VectorLayer_default2 = VectorLayer2;
 
-  // src/ol/layers/WMSLayer.js
+  // src/ol/layers/WMSLayer.ts
   var WMSLayer = class extends Layer_default4 {
-    constructor(options = {}) {
+    constructor(options) {
       super(options);
       this.abortController = new AbortController();
       this.format = new GeoJSON_default();
     }
     getFeatureInfoUrl(coord) {
+      if (!this.map) {
+        return;
+      }
       const projection = this.map.getView().getProjection();
       const resolution = this.map.getView().getResolution();
-      if (this.olLayer.getSource().getFeatureInfoUrl) {
-        return this.olLayer.getSource().getFeatureInfoUrl(coord, resolution, projection, {
+      if (resolution && projection && this.olLayer?.getSource()?.getFeatureInfoUrl) {
+        return this.olLayer?.getSource()?.getFeatureInfoUrl(coord, resolution, projection, {
           info_format: "application/json",
-          query_layers: this.olLayer.getSource().getParams().layers
+          query_layers: this.olLayer?.getSource()?.getParams().layers
         });
       }
-      return false;
     }
     getFeatureInfoAtCoordinate(coordinate) {
-      this.abortController.abort();
+      this.abortController?.abort();
       this.abortController = new AbortController();
       const { signal } = this.abortController;
-      return fetch(this.getFeatureInfoUrl(coordinate), { signal }).then((resp) => resp.json()).then((r) => r.features).then((data) => ({
+      const url = this.getFeatureInfoUrl(coordinate);
+      if (!url) {
+        console.error("No url for the WMS layer.");
+        return Promise.resolve({
+          features: [],
+          coordinate,
+          layer: this
+        });
+      }
+      return fetch(url, { signal }).then((resp) => resp.json()).then((r) => r.features).then((data) => ({
         layer: this,
         coordinate,
         features: data.map((d) => this.format.readFeature(d))
@@ -49948,6 +49972,8 @@ uniform ${i3} ${o3} u_${a3};
     getMapboxMapCopyrights: () => getMapboxMapCopyrights_default,
     getMapboxRender: () => getMapboxRender,
     getMaplibreRender: () => getMaplibreRender,
+    getMercatorResolution: () => getMercatorResolution_default,
+    getSourceCoordinates: () => getSourceCoordinates_default,
     getTextCanvas: () => getTextCanvas,
     getUTCDateString: () => getUTCDateString,
     getUTCTimeString: () => getUTCTimeString,
@@ -49990,7 +50016,7 @@ uniform ${i3} ${o3} u_${a3};
   };
   var CopyrightControl_default2 = CopyrightControl2;
 
-  // src/mapbox/layers/Layer.js
+  // src/mapbox/layers/Layer.ts
   var Layer4 = class extends UserInteractionsLayerMixin_default(Layer2) {
     attachToMap(map) {
       super.attachToMap(map);
@@ -50011,10 +50037,10 @@ uniform ${i3} ${o3} u_${a3};
     }
     activateUserInteractions() {
       this.deactivateUserInteractions();
-      if (this.map && this.userInteractions && this.userClickInteractions && this.userClickCallbacks.length) {
+      if (this.map && this.userInteractions && this.userClickInteractions && this.userClickCallbacks?.length) {
         this.map.on("click", this.onUserClickCallback);
       }
-      if (this.map && this.userInteractions && this.userHoverInteractions && this.userHoverCallbacks.length) {
+      if (this.map && this.userInteractions && this.userHoverInteractions && this.userHoverCallbacks?.length) {
         this.map.on("mousemove", this.onUserMoveCallback);
       }
     }
@@ -50523,18 +50549,8 @@ uniform ${i3} ${o3} u_${a3};
   }
   var es_default6 = transformRotate;
 
-  // src/mapbox/utils.js
-  var getMercatorResolution = (map) => {
-    const bounds = map.getBounds().toArray();
-    const a = fromLonLat(bounds[0]);
-    const b = fromLonLat(bounds[1]);
-    const extent = [...a, ...b];
-    const { width, height } = map.getCanvas();
-    const xResolution = getWidth(extent) / width;
-    const yResolution = getHeight(extent) / height;
-    return Math.max(xResolution, yResolution);
-  };
-  var getSourceCoordinates = (map, pixelRatio) => {
+  // src/mapbox/utils/getSourceCoordinates.ts
+  var getSourceCoordinates = (map, pixelRatio = 1) => {
     const { width, height } = map.getCanvas();
     const leftTop = map.unproject({ x: 0, y: 0 });
     const leftBottom = map.unproject({ x: 0, y: height / pixelRatio });
@@ -50550,8 +50566,22 @@ uniform ${i3} ${o3} u_${a3};
       [leftBottom.lng, leftBottom.lat]
     ];
   };
+  var getSourceCoordinates_default = getSourceCoordinates;
 
-  // src/mapbox/layers/RealtimeLayer.js
+  // src/mapbox/utils/getMercatorResolution.ts
+  var getMercatorResolution = (map) => {
+    const bounds = map.getBounds().toArray();
+    const a = fromLonLat(bounds[0]);
+    const b = fromLonLat(bounds[1]);
+    const extent = [...a, ...b];
+    const { width, height } = map.getCanvas();
+    const xResolution = getWidth(extent) / width;
+    const yResolution = getHeight(extent) / height;
+    return Math.max(xResolution, yResolution);
+  };
+  var getMercatorResolution_default = getMercatorResolution;
+
+  // src/mapbox/layers/RealtimeLayer.ts
   var RealtimeLayer2 = class extends RealtimeLayerMixin_default(Layer_default5) {
     constructor(options = {}) {
       super({
@@ -50567,15 +50597,11 @@ uniform ${i3} ${o3} u_${a3};
       if (!map) {
         return;
       }
-      const canvas2 = map.getCanvas();
-      super.attachToMap(map, {
-        width: canvas2.width / this.pixelRatio,
-        height: canvas2.height / this.pixelRatio
-      });
+      super.attachToMap(map);
       this.source = {
         type: "canvas",
         canvas: this.canvas,
-        coordinates: getSourceCoordinates(map, this.pixelRatio),
+        coordinates: getSourceCoordinates_default(map, this.pixelRatio),
         animate: true,
         attribution: this.copyrights && this.copyrights.join(", ")
       };
@@ -50642,17 +50668,23 @@ uniform ${i3} ${o3} u_${a3};
         ...evt
       });
     }
-    renderTrajectories(noInterpolate) {
+    renderTrajectories(noInterpolate = false) {
       if (!this.map) {
         return;
       }
+      if (!this.pixelRatio) {
+        this.pixelRatio = 1;
+      }
       const { width, height } = this.map.getCanvas();
       const center = this.map.getCenter();
       const leftBottom = this.map.unproject({
         x: 0,
         y: height / this.pixelRatio
       });
-      const rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 });
+      const rightTop = this.map.unproject({
+        x: width / this.pixelRatio,
+        y: 0
+      });
       const coord0 = es_default6(point([leftBottom.lng, leftBottom.lat]), -this.map.getBearing(), {
         pivot: [center.lng, center.lat]
       }).geometry.coordinates;
@@ -50678,7 +50710,7 @@ uniform ${i3} ${o3} u_${a3};
       return super.getRefreshTimeInMs(this.map.getZoom());
     }
     getFeatureInfoAtCoordinate(coordinate, options = {}) {
-      const resolution = getMercatorResolution(this.map);
+      const resolution = getMercatorResolution_default(this.map);
       return super.getFeatureInfoAtCoordinate(coordinate, {
         resolution,
         ...options
@@ -50706,10 +50738,10 @@ uniform ${i3} ${o3} u_${a3};
     onMove() {
       this.renderTrajectories();
     }
-    renderTrajectoriesInternal(viewState, noInterpolate) {
+    renderTrajectoriesInternal(viewState, noInterpolate = false) {
       const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
       if (render && this.map.style) {
-        const extent = getSourceCoordinates(this.map, this.pixelRatio);
+        const extent = getSourceCoordinates_default(this.map, this.pixelRatio);
         const source = this.map.getSource(this.key);
         if (source) {
           source.setCoordinates(extent);