mobility-toolbox-js 2.0.0-beta.8 → 2.0.1-beta.13

package/ol/controls/CopyrightControl.js

@@ -0,0 +1,42 @@
+import { inView } from "ol/layer/Layer";
+import Control from "../../common/controls/Control";
+import mixin from "../../common/mixins/CopyrightMixin";
+import removeDuplicate from "../../common/utils/removeDuplicate";
+class CopyrightControl extends mixin(Control) {
+  constructor(options) {
+    super(options);
+    this.onPostRender = this.onPostRender.bind(this);
+  }
+  getCopyrights() {
+    if (!this.frameState) {
+      return [];
+    }
+    let copyrights = [];
+    this.frameState.layerStatesArray.forEach((layerState) => {
+      const { layer } = layerState;
+      if (inView(layerState, this.frameState.viewState) && layer && layer.getSource && layer.getSource() && layer.getSource().getAttributions()) {
+        copyrights = copyrights.concat(layer.getSource().getAttributions()(this.frameState));
+      }
+    });
+    return removeDuplicate(copyrights);
+  }
+  activate() {
+    super.activate();
+    if (this.map) {
+      this.map.on("postrender", this.onPostRender);
+    }
+  }
+  deactivate() {
+    if (this.map) {
+      this.map.un("postrender", this.onPostRender);
+    }
+    super.deactivate();
+  }
+  onPostRender(evt) {
+    if (this.map && this.element) {
+      this.frameState = evt.frameState;
+      this.render();
+    }
+  }
+}
+export default CopyrightControl;

package/ol/controls/CopyrightControl.test.js

@@ -0,0 +1,165 @@
+import View from "ol/View";
+import Tile from "ol/Tile";
+import TileLayer from "ol/layer/Tile";
+import TileSource from "ol/source/Tile";
+import { createXYZ } from "ol/tilegrid";
+import { Map } from "ol";
+import Layer from "../layers/Layer";
+import CopyrightControl from "./CopyrightControl";
+const tileLoadFunction = () => {
+  const tile = new Tile([0, 0, -1], 2);
+  tile.getImage = () => {
+    const image = new Image();
+    image.width = 256;
+    image.height = 256;
+    return image;
+  };
+  return tile;
+};
+const getOLTileLayer = () => {
+  const layer = new TileLayer({
+    source: new TileSource({
+      projection: "EPSG:3857",
+      tileGrid: createXYZ()
+    })
+  });
+  layer.getSource().getTile = tileLoadFunction;
+  return layer;
+};
+const getLayer = (copyrights, visible = true) => new Layer({
+  visible,
+  copyrights,
+  olLayer: getOLTileLayer()
+});
+describe("CopyrightControl", () => {
+  let map;
+  beforeEach(() => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    map = new Map({
+      target,
+      view: new View({
+        center: [0, 0],
+        zoom: 0
+      })
+    });
+    getLayer(true, "bar").attachToMap(map);
+    map.setSize([200, 200]);
+    map.renderSync();
+  });
+  afterEach(() => {
+    if (map) {
+      map.setTarget(null);
+      map = null;
+    }
+  });
+  test("should be activate by default", () => {
+    const control = new CopyrightControl();
+    expect(control.active).toBe(true);
+  });
+  test("renders a string copyright", () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer("copyright").attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright");
+  });
+  test("renders an array of copyrights", () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer(["copyright 1", "copyright 2"]).attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright 1 | copyright 2");
+  });
+  test("renders unique copyrights", () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    getLayer(["copyright 1", "copyright 2"]).attachToMap(map);
+    getLayer("copyright 1").attachToMap(map);
+    getLayer(["copyright 2"]).attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright 1 | copyright 2");
+  });
+  test("doesn't render copyright of an hidden layer", () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe("");
+    const layer1 = getLayer("copyright hidden", false);
+    layer1.attachToMap(map);
+    const layer2 = getLayer("copyright", true);
+    layer2.attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright");
+    layer1.setVisible(true);
+    map.renderSync();
+    layer2.setVisible(false);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright hidden");
+  });
+  test("should activate the control on construction then deactivate it", () => {
+    getLayer("copyright 1").attachToMap(map);
+    const control = new CopyrightControl({ active: true });
+    control.attachToMap(map);
+    map.renderSync();
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+    expect(control.active).toBe(true);
+    expect(control.element.innerHTML).toBe("copyright 1");
+    control.active = false;
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("");
+  });
+  test("should deactivate the control on constrcution then activate it", () => {
+    getLayer("copyright 1").attachToMap(map);
+    const control = new CopyrightControl({ active: false });
+    control.attachToMap(map);
+    map.renderSync();
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+    expect(control.active).toBe(false);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("");
+    control.active = true;
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright 1");
+  });
+  test("should add copyrights in the map container element then remove it.", () => {
+    getLayer("copyright value").attachToMap(map);
+    map.renderSync();
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+    control.detachFromMap();
+    expect(control.element.parentNode).toBe(null);
+  });
+  test("should add copyrights in the target element then remove it.", () => {
+    getLayer(["copyright value"]).attachToMap(map);
+    map.renderSync();
+    const target = document.createElement("div");
+    target.setAttribute("id", "copyright");
+    document.body.appendChild(target);
+    const control = new CopyrightControl({
+      target: document.getElementById("copyright")
+    });
+    control.attachToMap(map);
+    expect(control.element.parentNode).toBe(target);
+    control.detachFromMap();
+    expect(control.element.parentNode).toBe(null);
+  });
+  test("renders custom copyrights with the render method ", () => {
+    const control = new CopyrightControl({
+      active: true,
+      render() {
+        if (!this.element) {
+          return;
+        }
+        this.element.innerHTML = this.active ? this.getCopyrights().join(", ") : "";
+      }
+    });
+    control.attachToMap(map);
+    getLayer(["copyright 1", "copyright 2", "copyright 3"]).attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe("copyright 1, copyright 2, copyright 3");
+  });
+});

package/ol/controls/RoutingControl.js

@@ -0,0 +1,387 @@
+import { Feature } from "ol";
+import { LineString, Point } from "ol/geom";
+import { Modify } from "ol/interaction";
+import { unByKey } from "ol/Observable";
+import { click } from "ol/events/condition";
+import { GeoJSON } from "ol/format";
+import { buffer } from "ol/extent";
+import { fromLonLat, toLonLat } from "ol/proj";
+import { RoutingAPI } from "../../api";
+import Control from "../../common/controls/Control";
+import RoutingLayer from "../layers/RoutingLayer";
+const REGEX_VIA_POINT = /^([^@$!\n]*)(@?([\d.]+),([\d.]+))?(\$?([a-zA-Z0-9]{0,2}))$/;
+const REGEX_VIA_POINT_COORD = /^([\d.]+),([\d.]+)$/;
+const REGEX_VIA_POINT_STATION_ID = /^!([^$]*)(\$?([a-zA-Z0-9]{0,2}))$/;
+const STOP_FETCH_ABORT_CONTROLLER_KEY = "stop-fetch";
+const getFlatCoordinatesFromSegments = (segmentArray) => {
+  const coords = [];
+  segmentArray.forEach((seg) => {
+    coords.push(...seg.getGeometry().getCoordinates());
+  });
+  return coords;
+};
+class RoutingControl extends Control {
+  constructor(options = {}) {
+    super(options);
+    Object.defineProperties(this, {
+      mot: {
+        get: () => this.get("mot"),
+        set: (newMot) => {
+          if (newMot) {
+            this.set("mot", newMot);
+            if (this.viaPoints) {
+              this.drawRoute();
+            }
+          }
+        }
+      },
+      loading: {
+        get: () => this.get("loading"),
+        set: (newLoading) => {
+          this.set("loading", newLoading);
+        }
+      },
+      modify: {
+        get: () => this.get("modify"),
+        set: (modify) => {
+          this.set("modify", modify);
+        }
+      }
+    });
+    this.loading = false;
+    this.graphs = options.graphs || [["osm", 0, 99]];
+    this.mot = options.mot || "bus";
+    this.modify = options.modify !== false;
+    this.routingApiParams = options.routingApiParams || {};
+    this.useRawViaPoints = options.useRawViaPoints || false;
+    this.snapToClosestStation = options.snapToClosestStation || false;
+    this.cacheStationData = {};
+    this.abortControllers = [];
+    this.apiKey = options.apiKey;
+    this.stopsApiKey = options.stopsApiKey || this.apiKey;
+    this.segments = [];
+    this.stopsApiUrl = options.stopsApiUrl || "https://api.geops.io/stops/v1/";
+    this.api = new RoutingAPI({
+      ...options
+    });
+    this.routingLayer = options.routingLayer || new RoutingLayer({
+      name: "routing-layer",
+      style: options.style
+    });
+    this.onRouteError = options.onRouteError || ((error) => {
+      this.dispatchEvent({
+        type: "change:route",
+        target: this
+      });
+      this.reset();
+      console.error(error);
+    });
+    this.viaPoints = [];
+    this.onMapClick = this.onMapClick.bind(this);
+    this.onModifyEnd = this.onModifyEnd.bind(this);
+    this.onModifyStart = this.onModifyStart.bind(this);
+    this.apiChangeListener = () => this.drawRoute();
+    this.createModifyInteraction();
+  }
+  static getGraphsResolutions(graphs, map) {
+    const view = map.getView();
+    return graphs.map(([, minZoom, maxZoom]) => [
+      view.getResolutionForZoom(minZoom),
+      view.getResolutionForZoom(maxZoom || minZoom + 1)
+    ]);
+  }
+  addViaPoint(coordinatesOrString, index = this.viaPoints.length, overwrite = 0) {
+    this.viaPoints.splice(index, overwrite, coordinatesOrString);
+    this.drawRoute();
+    this.dispatchEvent({
+      type: "change:route",
+      target: this
+    });
+  }
+  removeViaPoint(index = this.viaPoints.length - 1) {
+    if (this.viaPoints.length && this.viaPoints[index]) {
+      this.viaPoints.splice(index, 1);
+    }
+    this.drawRoute();
+    this.dispatchEvent({
+      type: "change:route",
+      target: this
+    });
+  }
+  setViaPoints(coordinateArray) {
+    this.viaPoints = [...coordinateArray];
+    this.drawRoute();
+    this.dispatchEvent({
+      type: "change:route",
+      target: this
+    });
+  }
+  reset() {
+    this.abortRequests();
+    this.viaPoints = [];
+    this.routingLayer.olLayer.getSource().clear();
+    this.dispatchEvent({
+      type: "change:route",
+      target: this
+    });
+  }
+  abortRequests() {
+    this.graphs.forEach(([graph]) => {
+      if (this.abortControllers[graph]) {
+        this.abortControllers[graph].abort();
+      }
+      this.abortControllers[graph] = new AbortController();
+    });
+    this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]?.abort();
+    this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY] = new AbortController();
+    this.loading = false;
+  }
+  drawRoute() {
+    this.abortRequests();
+    this.routingLayer.olLayer.getSource().clear();
+    if (!this.viaPoints.length) {
+      return null;
+    }
+    if (this.viaPoints.length === 1) {
+      return this.drawViaPoint(this.viaPoints[0], 0, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]);
+    }
+    const formattedViaPoints = this.viaPoints.map((viaPoint) => {
+      if (Array.isArray(viaPoint)) {
+        const projection = this.map.getView().getProjection();
+        const [lon, lat] = toLonLat(viaPoint, projection);
+        return this.snapToClosestStation ? [`@${lat}`, lon] : [lat, lon];
+      }
+      return this.useRawViaPoints ? viaPoint : `!${viaPoint}`;
+    });
+    this.loading = true;
+    this.routingLayer.olLayer.getSource().clear();
+    this.viaPoints.forEach((viaPoint, idx) => this.drawViaPoint(viaPoint, idx, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]));
+    return Promise.all(this.graphs.map(([graph], index) => {
+      return this.api.route({
+        graph,
+        via: `${formattedViaPoints.join("|")}`,
+        mot: `${this.mot}`,
+        "resolve-hops": false,
+        elevation: false,
+        "coord-radius": 100,
+        "coord-punish": 1e3,
+        ...this.routingApiParams
+      }, this.abortControllers[graph]).then((featureCollection) => {
+        this.segments = this.format.readFeatures(featureCollection);
+        if (this.mot === "foot") {
+          const uniqueVias = this.segments.reduce((resultVias, currentFeat) => {
+            const segTrg = currentFeat.get("trg");
+            return resultVias.find((via) => via[0] === segTrg[0] && via[1] === segTrg[1]) ? resultVias : [...resultVias, segTrg];
+          }, []);
+          this.segments = uniqueVias.map((via) => {
+            const viaSegments = this.segments.filter((seg) => {
+              const segTrg = seg.get("trg");
+              return segTrg[0] === via[0] && segTrg[1] === via[1];
+            });
+            const coords2 = getFlatCoordinatesFromSegments(viaSegments);
+            return new Feature({
+              geometry: new LineString(coords2)
+            });
+          });
+        }
+        const coords = getFlatCoordinatesFromSegments(this.segments);
+        const routeFeature = new Feature({
+          geometry: new LineString(coords)
+        });
+        routeFeature.set("graph", graph);
+        routeFeature.set("mot", this.mot);
+        routeFeature.set("minResolution", this.graphsResolutions[index][0]);
+        routeFeature.set("maxResolution", this.graphsResolutions[index][1]);
+        this.routingLayer.olLayer.getSource().addFeature(routeFeature);
+        this.loading = false;
+      }).catch((error) => {
+        if (error.name === "AbortError") {
+          return;
+        }
+        this.segments = [];
+        this.dispatchEvent({
+          type: "error",
+          target: this
+        });
+        this.onRouteError(error, this);
+        this.loading = false;
+      });
+    }));
+  }
+  drawViaPoint(viaPoint, idx, abortController) {
+    const pointFeature = new Feature();
+    pointFeature.set("viaPointIdx", idx);
+    if (Array.isArray(viaPoint)) {
+      pointFeature.setGeometry(new Point(viaPoint));
+      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+      return Promise.resolve(pointFeature);
+    }
+    if (!this.useRawViaPoints || REGEX_VIA_POINT_STATION_ID.test(viaPoint)) {
+      let stationId;
+      let track2;
+      if (this.useRawViaPoints) {
+        [, stationId, , track2] = REGEX_VIA_POINT_STATION_ID.exec(viaPoint);
+      } else {
+        [stationId, track2] = viaPoint.split("$");
+      }
+      return fetch(`${this.stopsApiUrl}lookup/${stationId}?key=${this.stopsApiKey}`, { signal: abortController.signal }).then((res) => res.json()).then((stationData) => {
+        const { coordinates } = stationData.features[0].geometry;
+        this.cacheStationData[viaPoint] = fromLonLat(coordinates);
+        pointFeature.set("viaPointTrack", track2);
+        pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
+        this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+        return pointFeature;
+      }).catch((error) => {
+        if (error.name === "AbortError") {
+          return;
+        }
+        this.dispatchEvent({
+          type: "error",
+          target: this
+        });
+        this.onRouteError(error, this);
+        this.loading = false;
+      });
+    }
+    if (this.useRawViaPoints && REGEX_VIA_POINT_COORD.test(viaPoint)) {
+      const [lat2, lon2] = REGEX_VIA_POINT_COORD.exec(viaPoint);
+      const coordinates = fromLonLat([parseFloat(lon2), parseFloat(lat2)], this.map.getView().getProjection());
+      pointFeature.setGeometry(new Point(coordinates));
+      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+      return Promise.resolve(pointFeature);
+    }
+    const [, stationName, , lat, lon, , track] = REGEX_VIA_POINT.exec(viaPoint);
+    if (lon && lat) {
+      const coordinates = fromLonLat([parseFloat(lon), parseFloat(lat)], this.map.getView().getProjection());
+      pointFeature.set("viaPointTrack", track);
+      pointFeature.setGeometry(new Point(coordinates));
+      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+      return Promise.resolve(pointFeature);
+    }
+    if (stationName) {
+      return fetch(`${this.stopsApiUrl}?key=${this.stopsApiKey}&q=${stationName}&limit=1`, { signal: abortController.signal }).then((res) => res.json()).then((stationData) => {
+        const { coordinates } = stationData.features[0].geometry;
+        this.cacheStationData[viaPoint] = fromLonLat(coordinates);
+        pointFeature.set("viaPointTrack", track);
+        pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
+        this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+        return pointFeature;
+      }).catch((error) => {
+        this.dispatchEvent({
+          type: "error",
+          target: this
+        });
+        this.onRouteError(error, this);
+        this.loading = false;
+        return null;
+      });
+    }
+    return Promise.resolve(null);
+  }
+  onMapClick(e) {
+    const feats = e.target.getFeaturesAtPixel(e.pixel);
+    const viaPoint = feats.find((feat) => feat.getGeometry() instanceof Point && feat.get("viaPointIdx") !== void 0);
+    if (viaPoint) {
+      this.removeViaPoint(viaPoint.get("viaPointIdx"));
+      return;
+    }
+    this.addViaPoint(e.coordinate);
+  }
+  onModifyStart(evt) {
+    let segmentIndex = -1;
+    const route = evt.features.getArray().find((feat) => feat.getGeometry() instanceof LineString);
+    if (route) {
+      const closestExtent = buffer(new Point(route.getGeometry().getClosestPoint(evt.mapBrowserEvent.coordinate)).getExtent(), 1e-3);
+      segmentIndex = this.segments.findIndex((segment) => segment.getGeometry().intersectsExtent(closestExtent));
+    }
+    const viaPoint = (evt.features.getArray().filter((feat) => feat.getGeometry() instanceof Point) || [])[0];
+    this.initialRouteDrag = {
+      viaPoint,
+      oldRoute: route && route.clone(),
+      segmentIndex
+    };
+  }
+  onModifyEnd(evt) {
+    const coord = evt.mapBrowserEvent.coordinate;
+    const { oldRoute, viaPoint, segmentIndex } = this.initialRouteDrag;
+    if (viaPoint) {
+      return this.addViaPoint(coord, viaPoint.get("viaPointIdx"), 1);
+    }
+    if (!oldRoute) {
+      return this.addViaPoint(coord, 0, 1);
+    }
+    if (segmentIndex === -1) {
+      return Promise.reject(new Error("No segment found"));
+    }
+    return this.addViaPoint(coord, segmentIndex + 1);
+  }
+  createDefaultElement() {
+    this.element = document.createElement("button");
+    this.element.id = "ol-toggle-routing";
+    this.element.innerHTML = "Toggle Route Control";
+    this.element.onclick = () => this.active ? this.deactivate() : this.activate();
+    Object.assign(this.element.style, {
+      position: "absolute",
+      right: "10px",
+      top: "10px"
+    });
+  }
+  createModifyInteraction() {
+    this.modifyInteraction = new Modify({
+      source: this.routingLayer.olLayer.getSource(),
+      pixelTolerance: 4,
+      hitDetection: this.routingLayer.olLayer,
+      deleteCondition: (e) => {
+        const feats = e.target.getFeaturesAtPixel(e.pixel, {
+          hitTolerance: 5
+        });
+        const viaPoint = feats.find((feat) => feat.getGeometry() instanceof Point && feat.get("index"));
+        if (click(e) && viaPoint) {
+          this.removeViaPoint(viaPoint.get("index"));
+          return true;
+        }
+        return false;
+      }
+    });
+    this.modifyInteraction.on("modifystart", this.onModifyStart);
+    this.modifyInteraction.on("modifyend", this.onModifyEnd);
+    this.modifyInteraction.setActive(false);
+  }
+  addListeners() {
+    if (!this.modify) {
+      return;
+    }
+    this.removeListeners();
+    this.onMapClickKey = this.map.on("singleclick", this.onMapClick);
+  }
+  removeListeners() {
+    unByKey(this.onMapClickKey);
+  }
+  activate() {
+    super.activate();
+    if (this.map) {
+      this.format = new GeoJSON({
+        featureProjection: this.map.getView().getProjection()
+      });
+      this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, this.map);
+      this.map.removeInteraction(this.modifyInteraction);
+      this.routingLayer.attachToMap(this.map);
+      this.map.addInteraction(this.modifyInteraction);
+      this.modifyInteraction.setActive(this.modify);
+      this.addListeners();
+    } else {
+      this.format = new GeoJSON({ featureProjection: "EPSG:3857" });
+      this.graphsResolutions = this.graphs;
+    }
+  }
+  deactivate() {
+    if (this.map) {
+      this.routingLayer.detachFromMap(this.map);
+      this.map.removeInteraction(this.modifyInteraction);
+      this.removeListeners();
+      this.reset();
+    }
+    super.deactivate();
+  }
+}
+export default RoutingControl;