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

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;
       }
@@ -48920,10 +48919,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 +48971,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 +48997,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 +49023,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 +49061,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 +49072,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 +49090,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 +49132,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 +49661,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 +49879,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 +49902,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 +49970,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 +50014,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 +50035,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 +50547,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 +50564,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 +50595,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 +50666,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 +50708,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 +50736,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);