mobility-toolbox-js 2.0.1-beta.13 → 2.1.0

package/ol/layers/MapGlLayer.js

@@ -0,0 +1,218 @@
+/* eslint-disable max-classes-per-file */
+import { toLonLat } from 'ol/proj';
+import OlLayer from 'ol/layer/Layer';
+import Source from 'ol/source/Source';
+import GeoJSON from 'ol/format/GeoJSON';
+import BaseEvent from 'ol/events/Event';
+import { getUrlWithParams, getMapboxMapCopyrights } from '../../common/utils';
+import Layer from './Layer';
+/**
+ * Common class for Mapbox and Maplibre and potential other fork from Mapbox.
+ * It's used to share code between Mapbox and Maplibre layers without importing both libs.
+ */
+class MapGlLayer extends Layer {
+    constructor(options) {
+        super(options);
+        this.olLayer = new OlLayer({
+            source: new Source({}),
+            render: this.getOlLayerRender(),
+        });
+        /**
+         * Url of the mapbox style.
+         * @type {string}
+         * @private
+         */
+        this.styleUrl = options.url;
+        /**
+         * Api key for the url of the mapbox style.
+         * If set to false, the apiKey is not required.
+         * @type {string}
+         * @private
+         */
+        this.apiKey = options.apiKey;
+        /**
+         * Name of the apiKey to set in the url request.
+         * Default is 'key'.
+         * @type {string}
+         * @private
+         */
+        this.apiKeyName = options.apiKeyName || 'key';
+        /** @ignore */
+        this.updateAttribution = this.updateAttribution.bind(this);
+    }
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        /**
+         * The feature format.
+         * @type {ol/format/GeoJSON}
+         */
+        this.format = new GeoJSON({
+            featureProjection: this.map.getView().getProjection(),
+        });
+        this.loadMbMap();
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap() {
+        if (this.mbMap) {
+            this.mbMap.off('idle', this.updateAttribution);
+            // Some asynchrone repaints are triggered even if the mbMap has been removed,
+            // to avoid display of errors we set an empty function.
+            this.mbMap.triggerRepaint = () => { };
+            this.mbMap.remove();
+            this.mbMap = undefined;
+        }
+        this.loaded = false;
+        super.detachFromMap();
+    }
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap() {
+        var _a, _b, _c;
+        this.olListenersKeys.push(
+        // @ts-ignore
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('change:target', () => {
+            this.loadMbMap();
+        }));
+        if (!((_b = this.map) === null || _b === void 0 ? void 0 : _b.getTargetElement())) {
+            return;
+        }
+        if (!this.visible) {
+            // On next change of visibility we load the map
+            this.olListenersKeys.push(
+            // @ts-ignore
+            this.once('change:visible', () => {
+                this.loadMbMap();
+            }));
+            return;
+        }
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.width = '100%';
+        container.style.height = '100%';
+        if (!this.styleUrl) {
+            // eslint-disable-next-line no-console
+            console.error(`No styleUrl defined for mapbox layer: ${this.styleUrl}`);
+            return;
+        }
+        if (!this.apiKey && !((_c = this.styleUrl) === null || _c === void 0 ? void 0 : _c.includes(this.apiKeyName))) {
+            // eslint-disable-next-line no-console
+            console.error(`No apiKey defined for mapbox layer with style url to ${this.styleUrl}`);
+        }
+        const Map = this.getMapboxMapClass();
+        /**
+         * A mapbox map
+         * @type {mapboxgl.Map}
+         */
+        this.mbMap = new Map(Object.assign({ style: getUrlWithParams(this.styleUrl, {
+                [this.apiKeyName]: this.apiKey,
+            }).toString(), container, interactive: false, trackResize: false, attributionControl: false }, (this.options.mapOptions || {})));
+        this.mbMap.once('load', () => {
+            /**
+             * Is the map loaded.
+             * @type {boolean}
+             */
+            this.loaded = true;
+            this.dispatchEvent(new BaseEvent('load'));
+        });
+        this.mbMap.on('idle', this.updateAttribution);
+    }
+    /**
+     * Update attributions of the source.
+     * @private
+     */
+    updateAttribution(evt) {
+        var _a, _b, _c;
+        const newAttributions = getMapboxMapCopyrights(evt.target) || [];
+        if (((_a = this.copyrights) === null || _a === void 0 ? void 0 : _a.toString()) !== newAttributions.toString()) {
+            this.copyrights = newAttributions;
+            // @ts-ignore
+            (_c = (_b = this.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.setAttributions(newAttributions);
+        }
+    }
+    /**
+     * Request feature information for a given coordinate.
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+     * @param {Object} options A [mapboxgl.Map#queryrenderedfeatures](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) options parameter.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate. The original Mapbox feature is available as a property named 'mapboxFeature'.
+     */
+    getFeatureInfoAtCoordinate(coordinate, options) {
+        // Ignore the getFeatureInfo until the mapbox map is loaded
+        if (!options ||
+            !this.format ||
+            !this.mbMap ||
+            !this.mbMap.isStyleLoaded()) {
+            return Promise.resolve({ coordinate, features: [], layer: this });
+        }
+        const pixel = coordinate &&
+            this.mbMap.project(toLonLat(coordinate));
+        let pixels;
+        if (this.hitTolerance) {
+            const { x, y } = pixel;
+            pixels = [
+                {
+                    x: x - this.hitTolerance,
+                    y: y - this.hitTolerance,
+                },
+                {
+                    x: x + this.hitTolerance,
+                    y: y + this.hitTolerance,
+                },
+            ];
+        }
+        // At this point we get GeoJSON Mapbox feature, we transform it to an OpenLayers
+        // feature to be consistent with other layers.
+        const features = this.mbMap
+            // @ts-ignore
+            .queryRenderedFeatures(pixels || pixel, options)
+            .map((feature) => {
+            const olFeature = this.format.readFeature(feature);
+            if (olFeature) {
+                // We save the original mapbox feature to avoid losing informations
+                // potentially needed for other functionnality like highlighting
+                // (id, layer id, source, sourceLayer ...)
+                olFeature.set('mapboxFeature', feature);
+            }
+            return olFeature;
+        });
+        return Promise.resolve({
+            layer: this,
+            features,
+            coordinate,
+        });
+    }
+    /**
+     * Return the render function function for the ol layer.
+     *
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getOlLayerRender() {
+        // eslint-disable-next-line no-console
+        console.error('This function must be implemented in subclasses');
+        const div = document.createElement('div');
+        return () => div;
+    }
+    /**
+     * Return the Class to instanciate for the mapbox map.
+     *
+     * @return {mapboxgl.Map|maplibregl.Map} map
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        // eslint-disable-next-line no-console
+        console.error('This function must be implemented in subclasses');
+        // @ts-ignore
+        return null;
+    }
+}
+export default MapGlLayer;

package/ol/layers/MapboxLayer.d.ts

@@ -0,0 +1,50 @@
+import { Map } from 'mapbox-gl';
+import { Coordinate } from 'ol/coordinate';
+import type OlMap from 'ol/Map';
+import { Size } from 'ol/size';
+import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+export default class MapboxLayer extends MapGlLayer {
+    renderState?: {
+        center?: Coordinate;
+        zoom?: number;
+        visible?: boolean;
+        opacity?: number;
+        resolution?: number;
+        rotation?: number;
+        size?: Size;
+    };
+    tabIndex?: number;
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map: OlMap): void;
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap(): void;
+    getOlLayerRender(): import("ol/layer/Layer").RenderFunction;
+    getMapboxMapClass(): typeof Map;
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions: MapGlLayerOptions): MapboxLayer;
+}
+//# sourceMappingURL=MapboxLayer.d.ts.map

package/ol/layers/MapboxLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapboxLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxLayer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,UAAU,EAAE,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;IAEF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,GAAG,EAAE,KAAK;IAsBtB;;;OAGG;IACH,SAAS;IAqDT,gBAAgB;IAKhB,iBAAiB;IAIjB;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,iBAAiB;CAGpC"}

package/ol/layers/MapboxLayer.js

@@ -1,203 +1,109 @@
-import { toLonLat } from "ol/proj";
-import { Map } from "mapbox-gl";
-import Source from "ol/source/Source";
-import OLLayer from "ol/layer/Layer";
-import GeoJSON from "ol/format/GeoJSON";
-import Layer from "./Layer";
-import { getMapboxMapCopyrights, getMapboxStyleUrl } from "../../common/utils";
-export default class MapboxLayer extends Layer {
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.mbMap) {
-          console.warn("Mapbox map doesn't exist.");
-          return null;
-        }
-        let changed = false;
-        const canvas = this.mbMap.getCanvas();
-        const { viewState } = frameState;
-        const visible = this.olLayer.getVisible();
-        if (this.renderState.visible !== visible) {
-          canvas.style.display = visible ? "block" : "none";
-          this.renderState.visible = visible;
-          canvas.style.position = "absolute";
-        }
-        const opacity = this.olLayer.getOpacity();
-        if (this.renderState.opacity !== opacity) {
-          canvas.style.opacity = opacity;
-          this.renderState.opacity = opacity;
-        }
-        const { rotation } = viewState;
-        if (this.renderState.rotation !== rotation) {
-          this.mbMap.rotateTo(-(rotation || 0) * 180 / Math.PI, {
-            animate: false
-          });
-          changed = true;
-          this.renderState.rotation = rotation;
+/* eslint-disable no-underscore-dangle */
+import { Map } from 'mapbox-gl';
+import { getMapboxMapCopyrights, getMapboxRender } from '../../common/utils';
+import MapGlLayer from './MapGlLayer';
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+export default class MapboxLayer extends MapGlLayer {
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
         }
-        if (this.renderState.zoom !== viewState.zoom || this.renderState.center[0] !== viewState.center[0] || this.renderState.center[1] !== viewState.center[1]) {
-          this.mbMap.jumpTo({
-            center: toLonLat(viewState.center),
-            zoom: viewState.zoom - 1,
-            animate: false
-          });
-          changed = true;
-          this.renderState.zoom = viewState.zoom;
-          this.renderState.center = viewState.center;
+        this.olListenersKeys.push(this.map.on('change:size', () => {
+            try {
+                if (this.mbMap) {
+                    this.mbMap.resize();
+                }
+            }
+            catch (err) {
+                // ignore render errors
+                // eslint-disable-next-line no-console
+                console.warn(err);
+            }
+        }));
+    }
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap() {
+        var _a;
+        // If the map hasn't been resized, the center could be [NaN,NaN].
+        // We set default good value for the mapbox map, to avoid the app crashes.
+        let [x, y] = ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().getCenter()) || [];
+        if (!x || !y) {
+            x = 0;
+            y = 0;
         }
-        const size = this.map.getSize();
-        if (this.renderState.size[0] !== size[0] || this.renderState.size[1] !== size[1]) {
-          changed = true;
-          this.renderState.size = size;
+        // Options the last render run did happen. If something changes
+        // we have to render again
+        /** @ignore */
+        this.renderState = {
+            center: [x, y],
+            zoom: undefined,
+            rotation: undefined,
+            visible: undefined,
+            opacity: undefined,
+            size: [0, 0],
+        };
+        super.loadMbMap();
+        if (!this.mbMap) {
+            // mbMap could ne bull if the map is not in the dom yet.
+            return;
         }
-        if (this.mbMap && this.mbMap.style && this.mbMap.isStyleLoaded() && changed) {
-          try {
-            if (this.mbMap._frame) {
-              this.mbMap._frame.cancel();
-              this.mbMap._frame = null;
+        this.mbMap.once('load', () => {
+            var _a, _b;
+            if (!this.mbMap) {
+                return;
+            }
+            this.mbMap.resize();
+            /** @ignore */
+            this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
+            // @ts-ignore
+            (_b = (_a = this.olLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.setAttributions(this.copyrights);
+        });
+        const mapboxCanvas = this.mbMap.getCanvas();
+        if (mapboxCanvas) {
+            if (this.options.tabIndex) {
+                mapboxCanvas.setAttribute('tabindex', `${this.options.tabIndex}`);
+            }
+            else {
+                // With a tabIndex='-1' the mouse events works but the map is not focused when we click on it
+                // so we remove completely the tabIndex attribute.
+                mapboxCanvas.removeAttribute('tabindex');
             }
-            this.mbMap._render();
-          } catch (err) {
-            console.warn(err);
-          }
-        }
-        return this.mbMap.getContainer();
-      }
-    });
-    super({
-      ...options,
-      olLayer: mbLayer
-    });
-    this.styleUrl = options.url;
-    this.apiKey = options.apiKey;
-    this.apiKeyName = options.apiKeyName || "key";
-    this.updateAttribution = this.updateAttribution.bind(this);
-  }
-  attachToMap(map) {
-    super.attachToMap(map);
-    if (!this.map || this.mbMap) {
-      return;
-    }
-    this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection()
-    });
-    this.loadMbMap();
-    this.olListenersKeys.push(this.map.on("change:size", () => {
-      try {
-        if (this.mbMap) {
-          this.mbMap.resize();
         }
-      } catch (err) {
-        console.warn(err);
-      }
-    }));
-  }
-  detachFromMap() {
-    if (this.mbMap) {
-      this.mbMap.off("idle", this.updateAttribution);
-      this.mbMap.triggerRepaint = () => {
-      };
-      this.mbMap.remove();
-      this.mbMap = null;
-    }
-    this.loaded = false;
-    super.detachFromMap();
-  }
-  createStyleUrl() {
-    return getMapboxStyleUrl(this.apiKey, this.apiKeyName, this.styleUrl);
-  }
-  loadMbMap() {
-    this.olListenersKeys.push(this.map.on("change:target", () => {
-      this.loadMbMap();
-    }));
-    if (!this.map.getTargetElement()) {
-      return;
-    }
-    if (!this.visible) {
-      this.olListenersKeys.push(this.once("change:visible", () => {
-        this.loadMbMap();
-      }));
-      return;
-    }
-    let [x, y] = this.map.getView().getCenter();
-    if (!x || !y) {
-      x = 0;
-      y = 0;
-    }
-    const container = document.createElement("div");
-    container.style.position = "absolute";
-    container.style.width = "100%";
-    container.style.height = "100%";
-    this.mbMap = new Map({
-      style: this.createStyleUrl(),
-      container,
-      interactive: false,
-      trackResize: false,
-      attributionControl: false,
-      ...this.options.mapOptions || {}
-    });
-    this.renderState = {
-      center: [x, y],
-      zoom: null,
-      rotation: null,
-      visible: null,
-      opacity: null,
-      size: [0, 0]
-    };
-    this.mbMap.once("load", () => {
-      this.mbMap.resize();
-      this.loaded = true;
-      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
-      this.olLayer.getSource().setAttributions(this.copyrights);
-      this.dispatchEvent({
-        type: "load",
-        target: this
-      });
-    });
-    const mapboxCanvas = this.mbMap.getCanvas();
-    if (mapboxCanvas) {
-      if (this.options.tabIndex) {
-        mapboxCanvas.setAttribute("tabindex", this.options.tabIndex);
-      } else {
-        mapboxCanvas.removeAttribute("tabindex");
-      }
     }
-    this.mbMap.on("idle", this.updateAttribution);
-  }
-  updateAttribution(evt) {
-    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
-    if (this.copyrights.toString() !== newAttributions.toString()) {
-      this.copyrights = newAttributions;
-      this.olLayer.getSource().setAttributions(newAttributions);
+    getOlLayerRender() {
+        return getMapboxRender(this);
     }
-  }
-  getFeatureInfoAtCoordinate(coordinate, options) {
-    if (!options || !this.format || !this.mbMap || !this.mbMap.isStyleLoaded()) {
-      return Promise.resolve({ coordinate, features: [], layer: this });
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        return Map;
     }
-    let pixel = coordinate && this.mbMap.project(toLonLat(coordinate));
-    if (this.hitTolerance) {
-      const { x, y } = pixel;
-      pixel = [
-        { x: x - this.hitTolerance, y: y - this.hitTolerance },
-        { x: x + this.hitTolerance, y: y + this.hitTolerance }
-      ];
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions) {
+        return new MapboxLayer(Object.assign(Object.assign({}, this.options), newOptions));
     }
-    const features = this.mbMap.queryRenderedFeatures(pixel, options).map((feature) => {
-      const olFeature = this.format.readFeature(feature);
-      if (olFeature) {
-        olFeature.set("mapboxFeature", feature);
-      }
-      return olFeature;
-    });
-    return Promise.resolve({
-      layer: this,
-      features,
-      coordinate
-    });
-  }
-  clone(newOptions) {
-    return new MapboxLayer({ ...this.options, ...newOptions });
-  }
 }