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

package/src/doc/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/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/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/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/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/examples/ol-tracker.html

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

package/src/doc/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/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/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/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/examples/tralis-live-map.html

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

package/src/doc/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/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.js

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,21 @@
+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/iife.js

@@ -0,0 +1,7 @@
+import mbt from './index';
+
+if (typeof window !== 'undefined') {
+  window.mbt = mbt;
+}
+
+export default mbt;

package/src/index.js

@@ -0,0 +1,10 @@
+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/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as CopyrightControl } from './CopyrightControl';

package/src/mapbox/index.js

@@ -0,0 +1,4 @@
+export * from '../api';
+export * from '../common';
+export * from './controls';
+export * from './layers';

package/src/mapbox/layers/index.js

@@ -0,0 +1,2 @@
+export { default as Layer } from './Layer';
+export { default as TralisLayer } from './TralisLayer';

package/src/ol/controls/index.js

@@ -0,0 +1,3 @@
+export { default as CopyrightControl } from './CopyrightControl';
+export { default as RoutingControl } from './RoutingControl';
+export { default as StopFinderControl } from './StopFinderControl';

package/src/ol/index.js

@@ -0,0 +1,5 @@
+export * from '../api';
+export * from '../common';
+export * from './controls';
+export * from './layers';
+export * from './styles';

package/src/ol/layers/index.js

@@ -0,0 +1,8 @@
+export { default as Layer } from './Layer';
+export { default as MapboxLayer } from './MapboxLayer';
+export { default as MaplibreLayer } from './MaplibreLayer';
+export { default as MapboxStyleLayer } from './MapboxStyleLayer';
+export { default as RoutingLayer } from './RoutingLayer';
+export { default as TralisLayer } from './TralisLayer';
+export { default as VectorLayer } from './VectorLayer';
+export { default as WMSLayer } from './WMSLayer';

package/src/setupTests.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import 'jest-canvas-mock';
+import fetchTrajectoryByIdResponse from '../data/fetchTrajectoryById.json';
+import fetchTrajectoriesResponse from '../data/fetchTrajectories.json';
+import fetchTrajectoryStationsResponse from '../data/fetchTrajectoryStations.json';
+import stopsSearchResponse from '../data/stopsSearch.json';
+import fetchRouteResponse from '../data/fetchRoute.json';
+
+global.fetchTrajectoryByIdResponse = fetchTrajectoryByIdResponse;
+global.fetchTrajectoriesResponse = fetchTrajectoriesResponse;
+global.fetchTrajectoryStationsResponse = fetchTrajectoryStationsResponse;
+global.stopsSearchResponse = stopsSearchResponse;
+global.fetchRouteResponse = fetchRouteResponse;
+
+global.URL.createObjectURL = jest.fn(() => 'fooblob');

package/webpack.config.js

@@ -0,0 +1,6 @@
+// Whilst the configuration object can be modified here, the recommended way of making
+// changes is via the presets' options or Neutrino's API in `.neutrinorc.js` instead.
+// Neutrino's inspect feature can be used to view/export the generated configuration.
+const neutrino = require('neutrino');
+
+module.exports = neutrino().webpack();