mobility-toolbox-js 2.0.0-beta.8 → 2.0.0-beta.80

package/src/doc/examples/ol-routing.js

@@ -1,59 +0,0 @@
-import View from 'ol/View';
-import Map from 'ol/Map';
-import { MaplibreLayer, CopyrightControl, RoutingControl } from '../../ol';
-import 'ol/ol.css';
-
-export default () => {
-  const map = new Map({
-    target: 'map',
-    view: new View({
-      center: [950690.34, 6003962.67],
-      zoom: 15,
-    }),
-    controls: [],
-  });
-
-  const mapboxLayer = new MaplibreLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
-  });
-  mapboxLayer.init(map);
-
-  const copyright = new CopyrightControl();
-  copyright.map = map;
-
-  const control = new RoutingControl({
-    element: document.createElement('div'),
-    apiKey: `${window.apiKey}`,
-  });
-  control.map = map;
-
-  control.addViaPoint([950476.4055933182, 6003322.253698345]);
-  control.addViaPoint([950389.0813034325, 6003656.659274571]);
-  control.addViaPoint('29563461696e881d');
-
-  // Add example button to toggle the RoutingControl.
-  document.getElementById('control-button').addEventListener('click', (e) => {
-    e.target.innerHTML = control.active
-      ? 'Activate RoutingControl'
-      : 'Deactivate RoutingControl';
-    if (control.active) {
-      control.active = false;
-    } else {
-      control.active = true;
-    }
-  });
-
-  // Add example button to toggle the RoutingControl mot.
-  document.getElementById('mot-button').addEventListener('click', (e) => {
-    e.target.innerHTML =
-      control.mot === 'bus'
-        ? 'Switch to bus routing'
-        : 'Switch to foot routing';
-    control.mot = control.mot === 'bus' ? 'foot' : 'bus';
-  });
-
-  // Add example button to toggle the RoutingControl mot.
-  document.getElementById('reset-button').addEventListener('click', () => {
-    control.reset();
-  });
-};

package/src/doc/examples/ol-routing.md

@@ -1 +0,0 @@
-Follow [this link](https://developer.geops.io/) to get information about the API and how to get an API key.

package/src/doc/examples/ol-stop-finder.html

@@ -1,15 +0,0 @@
-<style>
-
-#mbt-search > div > div:hover {
-  background-color: lightgray;
-}
-
-#mbt-search {
-  max-height: 90%;
-}
-
-</style>
-
-<div style="width: 100%; height: 100%; position: relative;">
-  <div id="map" style="width: 100%; height: 100%;"></div>
-</div>

package/src/doc/examples/ol-stop-finder.js

@@ -1,31 +0,0 @@
-import View from 'ol/View';
-import Map from 'ol/Map';
-import { MapboxLayer, CopyrightControl, StopFinderControl } from '../../ol';
-import 'ol/ol.css';
-
-export default () => {
-  const map = new Map({
-    target: 'map',
-    view: new View({
-      center: [950690.34, 6003962.67],
-      zoom: 15,
-    }),
-    controls: [],
-  });
-
-  const copyright = new CopyrightControl();
-  copyright.map = map;
-
-  const stopFinder = new StopFinderControl({
-    apiKey: window.apiKey,
-  });
-  stopFinder.map = map;
-
-  const mapboxLayer = new MapboxLayer({
-    url: 'https://maps.geops.io/styles/travic_v2/style.json',
-    apiKey: window.apiKey,
-  });
-  mapboxLayer.init(map);
-
-  map.on('singleclick', () => stopFinder.clear());
-};

package/src/doc/examples/ol-stop-finder.md

@@ -1 +0,0 @@
-Follow [this link](https://developer.geops.io/) to get information about the API and how to get an API key.

package/src/doc/examples/ol-tracker.html

@@ -1 +0,0 @@
-<div id="map" style="width: 100%; height: 100%;"></div>

package/src/doc/examples/ol-tracker.js

@@ -1,44 +0,0 @@
-import { Map, View } from 'ol';
-import {
-  TralisLayer,
-  MaplibreLayer,
-  CopyrightControl,
-  trackerDelayStyle,
-} from '../../ol';
-import { sortByDelay } from '../../common/utils';
-import 'ol/ol.css';
-
-export default () => {
-  const map = new Map({
-    target: 'map',
-    view: new View({
-      center: [831634, 5933959],
-      zoom: 13,
-    }),
-    controls: [],
-  });
-
-  const control = new CopyrightControl();
-  control.map = map;
-
-  const layer = new MaplibreLayer({
-    url: 'https://maps.geops.io/styles/travic_v2/style.json',
-    apiKey: window.apiKey,
-  });
-  layer.init(map);
-
-  const tracker = new TralisLayer({
-    url: 'wss://api.geops.io/tracker-ws/v1/',
-    apiKey: window.apiKey,
-    style: trackerDelayStyle,
-    sort: sortByDelay,
-  });
-  tracker.init(map);
-
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-};

package/src/doc/examples/ol-tracker.md

@@ -1 +0,0 @@
-Follow [this link](https://developer.geops.io/) to get information about the API and how to get an API key.

package/src/doc/examples/ol-tralis.html

@@ -1,5 +0,0 @@
-<div id="map" style="width: 100%; height: 100%;"></div>
-<button id="button">Show/hide</button>
-<button id="close">Kill</button>
-<button id="bbox">Send same bbox</button>
-<button id="terminate">terminate</button>

package/src/doc/examples/ol-tralis.js

@@ -1,57 +0,0 @@
-import View from 'ol/View';
-import Map from 'ol/Map';
-import { TralisLayer, MapboxLayer, CopyrightControl } from '../../ol';
-
-export default () => {
-  const map = new Map({
-    target: 'map',
-    view: new View({
-      // center: max,
-      center: [831634, 5933959],
-      zoom: 13,
-      // center: fromLonLat([7.841148, 47.996542]), // freiburg
-      // center: fromLonLat([11.55, 48.14]), // munich
-    }),
-    controls: [],
-  });
-
-  const control = new CopyrightControl();
-  control.map = map;
-
-  const layer = new MapboxLayer({
-    url: 'https://maps.geops.io/styles/travic_v2/style.json',
-    apiKey: window.apiKey,
-  });
-  layer.init(map);
-
-  const tracker = new TralisLayer({
-    url: 'wss://api.geops.io/tracker-ws/v1/',
-    apiKey: window.apiKey,
-    // bbox: [1152072, 6048052, 1433666, 6205578],
-    isUpdateBboxOnMoveEnd: true,
-    visible: true,
-    tenant: 'sbb',
-    // projection: 'EPSG:3857',
-    // regexPublishedLineName: '^(S|R$|RE|PE|D|IRE|RB|TER)',
-  });
-  tracker.init(map);
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-  document.getElementById('button').onclick = () => {
-    tracker.setVisible(!tracker.visible);
-  };
-  document.getElementById('close').onclick = () => {
-    tracker.api.conn.websocket.close();
-    window.lastWs = tracker.api.conn.websocket;
-  };
-  document.getElementById('bbox').onclick = () => {
-    tracker.api.conn.websocket.send(`BBOX ${tracker.api.bbox.join(' ')}`);
-  };
-  document.getElementById('terminate').onclick = () => {
-    tracker.api.conn.websocket.terminate();
-  };
-};

package/src/doc/examples/tralis-live-map.html

@@ -1 +0,0 @@
-<div id="map" style="width: 100%; height: 100%;"></div>

package/src/doc/examples/tralis-live-map.js

@@ -1,51 +0,0 @@
-import { Map } from 'mapbox-gl';
-import { TralisLayer, CopyrightControl } from '../../mapbox';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import LINE_IMAGES from './assets/tralis-live-map';
-
-export default () => {
-  const map = new Map({
-    container: 'map',
-    style: 'https://maps.geops.io/styles/travic_v2/style.json',
-    apiKey: window.apiKey,
-    center: [11.55, 48.14],
-    zoom: 10,
-    touchPitch: false,
-    pitchWithRotate: false,
-    attributionControl: false,
-  });
-
-  const control = new CopyrightControl();
-  control.map = map;
-
-  const cache = {};
-  const tracker = new TralisLayer({
-    url: 'wss://api.geops.io/realtime-ws/v1/',
-    isUpdateBboxOnMoveEnd: false,
-    apiKey: window.apiKey,
-    bbox: [1152072, 6048052, 1433666, 6205578],
-    style: (props) => {
-      let { name } = props.line || {};
-      if (!name || !LINE_IMAGES[name]) {
-        name = 'unknown';
-      }
-      if (!cache[name]) {
-        const img = new Image();
-        img.src = LINE_IMAGES[name];
-        img.width = 25 * window.devicePixelRatio;
-        img.height = 25 * window.devicePixelRatio;
-        cache[name] = img;
-      }
-      return cache[name];
-    },
-  });
-
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-
-  tracker.init(map);
-};

package/src/doc/examples/tralis-live-map.md

@@ -1,3 +0,0 @@
-This example uses the [geOps Realtime API](https://developer.geops.io/).
-
-Follow [this link](https://developer.geops.io/) to get information about the API and how to get an API key.

package/src/doc/examples.js

@@ -1,107 +0,0 @@
-import liveTrackerOLImg from './img/examples/live_tracker_ol.jpg';
-import liveTrackerMBImg from './img/examples/live_tracker_mb.jpg';
-// import liveTrackerMunichImg from './img/examples/live_tracker_munich.jpg';
-import mapboxImg from './img/examples/mapbox.jpg';
-import mapboxStyleImg from './img/examples/mapbox_style.jpg';
-import queryObjectsImg from './img/examples/query_objects.jpg';
-import olCopyrightImg from './img/examples/ol-copyright.png';
-import stopsImg from './img/examples/stops.jpg';
-import routingImg from './img/examples/routing.jpg';
-
-// const munichAssets = require('./examples/assets/tralis-live-map').default;
-
-// To make redirect works properly on netlify it's important that the key
-// are differents from the name of js and html files.
-export default [
-  {
-    name: 'Live tracker with OpenLayers',
-    key: 'ol-tracker',
-    description:
-      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
-    img: liveTrackerOLImg,
-  },
-  {
-    name: 'Live tracker with Mapbox',
-    key: 'mb-tracker',
-    description:
-      'Use the [geOps Realtime API](https://developer.geops.io/apis/realtime/) to show moving trains in a Mapbox map.',
-    img: liveTrackerMBImg,
-  },
-  {
-    name: 'Stop finder',
-    key: 'ol-stop-finder',
-    description:
-      'Use the [geOps Stops API](https://developer.geops.io/apis/stops/) for finding public transport stops.',
-    img: stopsImg,
-  },
-  {
-    name: 'Routing',
-    key: 'routing-control',
-    description:
-      'Use the [geOps Routing API](https://developer.geops.io/apis/routing/) to find the shortest route between 2 points.',
-    img: routingImg,
-    files: {
-      html: 'ol-routing.html',
-      js: 'ol-routing.js',
-    },
-  },
-  // {
-  //   name: 'Live train positions for Munich',
-  //   key: 'tralis-live-map',
-  //   description:
-  //     'Realtime vehicle positions and prognosis data based on scheduled times, realtime updates and GPS locations.',
-  //   img: liveTrackerMunichImg,
-  //   extraFiles: {
-  //     'assets/tralis-live-map/index.js': {
-  //       content: `export default ${JSON.stringify(munichAssets)};`,
-  //     },
-  //   },
-  // },
-  // These examples are used for the dbug of TralisLayer don't remove them pls.
-  // {
-  //   name: 'Tralis tracker with OpenLayers',
-  //   key: 'ol-tralis',
-  //   description: 'Show moving tramway in an OpenLayers map.',
-  //   img: liveTrackerOLImg,
-  // },
-  // {
-  //   name: 'Tralis tracker with Mapbox',
-  //   key: 'mapbox-tralis',
-  //   description: 'Show moving tramway in an Mapbox map.',
-  //   img: liveTrackerOLImg,
-  // },
-  {
-    name: 'Mapbox layer',
-    key: 'ol-mapbox-layer',
-    description: 'Display a Mapbox style on an OpenLayers map.',
-    img: mapboxImg,
-  },
-  {
-    name: 'Mapbox Style layer',
-    key: 'ol-mapbox-style-layer',
-    description:
-      'Display/hide a set of layers of a Mapbox style on an OpenLayers map.',
-    img: mapboxStyleImg,
-  },
-  {
-    name: 'Querying objects',
-    key: 'ol-query',
-    description:
-      'This example shows how to query objects in different kinds of layers.',
-    img: queryObjectsImg,
-  },
-  {
-    name: 'Copyrights with OpenLayers',
-    key: 'ol-copyright',
-    description:
-      'This example shows how to use the CopyrightControl component.',
-    img: olCopyrightImg,
-  },
-  {
-    name: 'Copyrights with Mapbox',
-    key: 'mb-copyright',
-    description:
-      'This example shows how to use the CopyrightControl component.',
-    img: olCopyrightImg,
-  },
-];

package/src/doc/index.js

@@ -1,21 +0,0 @@
-import 'react-app-polyfill/stable';
-// import { createRoot } from 'react-dom/client';
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-// render(
-//   <BrowserRouter>
-//     <App />
-//   </BrowserRouter>,
-//   document.getElementById('root'),
-// );
-
-const container = document.getElementById('root');
-const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-);

package/src/index.js

@@ -1,10 +0,0 @@
-import * as ol from './ol';
-import * as mapbox from './mapbox';
-
-export * as ol from './ol';
-export * as mapbox from './mapbox';
-
-export default {
-  ol,
-  mapbox,
-};

package/src/mapbox/controls/CopyrightControl.js

@@ -1,58 +0,0 @@
-import Control from '../../common/controls/Control';
-import mixin from '../../common/mixins/CopyrightMixin';
-import { getMapboxMapCopyrights } from '../../common/utils';
-
-/**
- * Display layer's copyrights.
- *
- * @example
- * import { Map } from 'mapbox-gl';
- * import { CopyrightControl } from 'mobility-toolbox-js/mapbox';
- *
- * const map = new Map({
- *   container: 'map',
- *   style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
- *   controls: [
- *     new CopyrightControl()
- *   ]
- * });
- *
- * const control = new CopyrightControl();
- * control.map = map;
- *
- *
- * @see <a href="/example/mb-copyright">Mapbox copyright example</a>
- *
- * @extends {Control}
- * @implements {CopyrightInterface}
- */
-class CopyrightControl extends mixin(Control) {
-  constructor(options) {
-    super(options);
-    this.render = this.render.bind(this);
-  }
-
-  activate() {
-    super.activate();
-    if (this.map) {
-      this.map.on('sourcedata', this.render);
-      this.map.on('styledata', this.render);
-      this.map.on('idle', this.render);
-    }
-  }
-
-  deactivate() {
-    if (this.map) {
-      this.map.off('sourcedata', this.render);
-      this.map.off('styledata', this.render);
-      this.map.off('idle', this.render);
-    }
-    super.deactivate();
-  }
-
-  getCopyrights() {
-    return getMapboxMapCopyrights(this.map);
-  }
-}
-
-export default CopyrightControl;

package/src/mapbox/layers/Layer.js

@@ -1,118 +0,0 @@
-import { unByKey } from 'ol/Observable';
-import { transformExtent } from 'ol/proj';
-import LayerCommon from '../../common/layers/Layer';
-
-/**
- * A class representing a layer to display on an OpenLayers map.
- *
- * @example
- * import { Layer } from 'mobility-toolbox-js/ol';
- *
- * const layer = new Layer({
- *   olLayer: ...,
- * });
- *
- * @see <a href="/example/ol-map">Map example</a>
- *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
- * @extends {Layer}
- */
-class Layer extends LayerCommon {
-  /**
-   * Initialize the layer and listen to user events.
-   * @param {ol/Map~Map} map
-   */
-  init(map) {
-    super.init(map);
-
-    if (!this.map) {
-      return;
-    }
-
-    if (this.isClickActive || this.isHoverActive) {
-      this.toggleVisibleListeners();
-      this.onChangeVisibleKey = this.on(
-        'change:visible',
-        this.toggleVisibleListeners,
-      );
-    }
-  }
-
-  terminate(map) {
-    if (this.map) {
-      this.map.off('mousemove', this.onUserMoveCallback);
-      this.map.off('click', this.onUserClickCallback);
-      unByKey(this.onChangeVisibleKey);
-    }
-    super.terminate(map);
-  }
-
-  /**
-   * Function triggered when the user click the map.
-   * @private
-   */
-  onUserClickCallback(evt) {
-    super.onUserClickCallback({ coordinate: evt.lngLat.toArray(), ...evt });
-  }
-
-  /**
-   * Function triggered when the user moves the cursor over the map.
-   * @private
-   */
-  onUserMoveCallback(evt) {
-    super.onUserMoveCallback({ coordinate: evt.lngLat.toArray(), ...evt });
-  }
-
-  /**
-   * Toggle listeners needed when a layer is avisible or not.
-   * @private
-   */
-  toggleVisibleListeners() {
-    if (this.visible) {
-      if (this.isClickActive) {
-        this.map.on('click', this.onUserClickCallback);
-      }
-
-      if (this.isHoverActive) {
-        this.map.on('mousemove', this.onUserMoveCallback);
-      }
-    } else {
-      if (this.isClickActive) {
-        this.map.off('click', this.onUserClickCallback);
-      }
-
-      if (this.isHoverActive) {
-        this.map.off('mousemove', this.onUserMoveCallback);
-      }
-    }
-  }
-
-  /**
-   * Returns the current extent in mercator coordinates.
-   */
-  getMercatorExtent() {
-    const bounds = this.map.getBounds().toArray();
-    return transformExtent(
-      [...bounds[0], ...bounds[1]],
-      'EPSG:4326',
-      'EPSG:3857',
-    );
-  }
-
-  /**
-   * Returns the equivalent zoom in Openlayers.
-   */
-  getOlZoom() {
-    return this.map.getZoom() + 1;
-  }
-
-  /**
-   * Create a copy of the Layer.
-   * @param {Object} newOptions Options to override
-   * @return {Layer} A Layer
-   */
-  clone(newOptions) {
-    return new Layer({ ...this.options, ...newOptions });
-  }
-}
-export default Layer;