mobility-toolbox-js 2.0.0-beta.3 → 2.0.0-beta.6

package/src/doc/components/examples/ol-copyright.js

@@ -0,0 +1,43 @@
+import { Map, View } from 'ol';
+import { MaplibreLayer, CopyrightControl } from '../../ol';
+import 'ol/ol.css';
+
+export default () => {
+  // Define the map
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      center: [0, 0],
+      zoom: 1,
+    }),
+    controls: [],
+  });
+
+  // Define a custom rendering for the copyright
+  const control = new CopyrightControl({
+    target: document.getElementById('copyright'),
+    element: document.createElement('div'),
+    render() {
+      this.element.innerHTML = this.active
+        ? this.getCopyrights().join(' | ')
+        : '';
+    },
+  });
+
+  // Attach to the map
+  control.map = map;
+
+  // Define the Mapbox style to display
+  const mapboxLayer = new MaplibreLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+
+  // Display the Mapbox style on the map
+  mapboxLayer.init(map);
+
+  // Toggle the copyright control.
+  document.getElementById('button').addEventListener('click', () => {
+    control.map = control.map ? null : map;
+  });
+};

package/src/doc/components/examples/ol-mapbox-layer.html

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

package/src/doc/components/examples/ol-mapbox-layer.js

@@ -0,0 +1,28 @@
+import { Map, View } from 'ol';
+import { MaplibreLayer, CopyrightControl } from '../../ol';
+import 'ol/ol.css';
+
+export default () => {
+  // Define the map
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      center: [0, 0],
+      zoom: 1,
+    }),
+    controls: [],
+  });
+
+  // Add copyright control
+  const control = new CopyrightControl();
+  control.map = map;
+
+  // Define the Mapbox style to display
+  const layer = new MaplibreLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+
+  // Display the Mapbox style on the map
+  layer.init(map);
+};

package/src/doc/components/examples/ol-mapbox-style-layer.html

@@ -0,0 +1,12 @@
+<style>
+  #button {
+    position: absolute;
+    margin: 10px 10px;
+    bottom: 0;
+    left: 0;
+  }
+</style>
+<div style="width: 100%; height: 100%; position: relative">
+  <div id="map" style="width: 100%; height: 100%"></div>
+  <button id="button" type="button" class="geops-ui">Hide the POIs</button>
+</div>

package/src/doc/components/examples/ol-mapbox-style-layer.js

@@ -0,0 +1,44 @@
+import { Map, View } from 'ol';
+import { MaplibreLayer, MapboxStyleLayer, CopyrightControl } from '../../ol';
+import 'ol/ol.css';
+
+export default () => {
+  // Define the map
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      center: [950690.34, 6003962.67],
+      zoom: 20,
+    }),
+    controls: [],
+  });
+
+  // Add copyright control
+  const control = new CopyrightControl();
+  control.map = map;
+
+  // Define the Mapbox style to display
+  const mapboxLayer = new MaplibreLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+
+  // Display the style on the map
+  mapboxLayer.init(map);
+
+  // Define the list of Mapbox style layers representing the pois.
+  const poiLayer = new MapboxStyleLayer({
+    mapboxLayer,
+    styleLayersFilter: ({ id }) => /^poi_/.test(id),
+  });
+
+  // Display the pois on the map
+  poiLayer.init(map);
+
+  // Toggle pois visibility
+  document.getElementById('button').addEventListener('click', (evt) => {
+    poiLayer.setVisible(!poiLayer.visible);
+    const { target } = evt;
+    target.innerHTML = `${poiLayer.visible ? 'Hide' : 'Show'} the POIs`;
+  });
+};

package/src/doc/components/examples/ol-query.html

@@ -0,0 +1,32 @@
+<style>
+  div#box {
+    position: absolute;
+    z-index: 1;
+    top: 100px;
+    left: 10px;
+    width: 200px;
+    padding: 10px;
+    background-color: #FFFFFF;
+    border-radius: 5px;
+    font-family: Lato, Arial, sans-serif;
+    color: #353535;
+  }
+
+  div#box .heading {
+    font-weight: bold;
+    font-size: 22px;
+    line-height: 27px;
+  }
+
+  div#box #content {
+    font-size: 18px;
+    line-height: 22px;
+  }
+</style>
+<div style="width: 100%; height: 100%; position: relative;">
+  <div id="box">
+    <div class="heading">Query result</div>
+    <div id="content">Click on a feature.</div>
+  </div>
+  <div id="map" style="width: 100%; height: 100%;"></div>
+</div>

package/src/doc/components/examples/ol-query.js

@@ -0,0 +1,83 @@
+import OLVectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import { Polygon } from 'ol/geom';
+import View from 'ol/View';
+import Map from 'ol/Map';
+import {
+  MaplibreLayer,
+  MapboxStyleLayer,
+  VectorLayer,
+  CopyrightControl,
+} from '../../ol';
+import 'ol/ol.css';
+
+export default () => {
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      center: [950690.34, 6003962.67],
+      zoom: 20,
+    }),
+    controls: [],
+  });
+
+  // Add copyright control
+  const control = new CopyrightControl();
+  control.map = map;
+
+  map.on('pointermove', () => {
+    map.getTargetElement().style.cursor = '';
+  });
+
+  const onHover = ([feature]) => {
+    if (feature) {
+      map.getTargetElement().style.cursor = 'pointer';
+    }
+  };
+
+  const onClick = ([feature]) => {
+    if (feature) {
+      document.getElementById('content').innerHTML = feature.get('name');
+    }
+  };
+
+  const mapboxLayer = new MaplibreLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+  mapboxLayer.init(map);
+
+  const poiLayer = new MapboxStyleLayer({
+    visible: true,
+    mapboxLayer,
+    styleLayersFilter: ({ id }) => /^poi_named/.test(id),
+    onHover,
+    onClick,
+  });
+  poiLayer.init(map);
+
+  const vectorLayer = new VectorLayer({
+    olLayer: new OLVectorLayer({
+      source: new VectorSource({
+        features: [
+          new Feature({
+            name: 'Rectangle',
+            geometry: new Polygon([
+              [
+                [950693, 6003968],
+                [950693, 6003936],
+                [950760, 6003936],
+                [950760, 6003968],
+                [950693, 6003968],
+              ],
+            ]),
+          }),
+        ],
+      }),
+    }),
+    onHover,
+    onClick,
+  });
+  vectorLayer.init(map);
+};

package/src/doc/components/examples/ol-routing.html

@@ -0,0 +1,26 @@
+<style>
+  #control-button,
+  #mot-button,
+  #reset-button {
+    margin: 10px 10px;
+  }
+
+  .buttons {
+    display: flex;
+  }
+</style>
+<div style="width: 100%; height: 100%; position: relative;">
+  <div id="map" style="width: 100%; height: 100%;"></div>
+  <div class="buttons">
+    <button id="control-button" type="button" class="geops-ui">
+      Deactivate RoutingControl
+    </button>
+    <button id="mot-button" type="button" class="geops-ui">
+      Switch to foot routing
+    </button>
+    <button id="reset-button" type="button" class="geops-ui">
+      Clear route
+    </button>
+  </div>
+  <div id="copyright"></div>
+</div>

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

@@ -0,0 +1,59 @@
+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/components/examples/ol-routing.md

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

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

@@ -0,0 +1,15 @@
+<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/components/examples/ol-stop-finder.js

@@ -0,0 +1,31 @@
+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/components/examples/ol-stop-finder.md

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

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

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

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

@@ -0,0 +1,44 @@
+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/components/examples/ol-tracker.md

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

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

@@ -0,0 +1,5 @@
+<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/components/examples/ol-tralis.js

@@ -0,0 +1,57 @@
+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/components/examples/tralis-live-map.html

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

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

@@ -0,0 +1,51 @@
+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/components/examples/tralis-live-map.md

@@ -0,0 +1,3 @@
+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/assets/tralis-live-map/index.js

@@ -0,0 +1,11 @@
+import S1 from './s1kreis.svg';
+import S20 from './s20kreis.svg';
+import S2 from './s2kreis.svg';
+import S3 from './s3kreis.svg';
+import S4 from './s4kreis.svg';
+import S6 from './s6kreis.svg';
+import S7 from './s7kreis.svg';
+import S8 from './s8kreis.svg';
+import unknown from './unknown.svg';
+
+export default { S1, S20, S2, S3, S4, S6, S7, S8, unknown };