mobility-toolbox-js 2.3.9 → 2.3.10

package/doc/public/static/examples/ol-mapbox-style-layer.js

@@ -0,0 +1,48 @@
+import { Map, View } from 'ol';
+import {
+  MaplibreLayer,
+  MapboxStyleLayer,
+  CopyrightControl,
+} from 'mobility-toolbox-js/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.attachToMap(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.attachToMap(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.attachToMap(map);
+
+  // Toggle pois visibility
+  document.getElementById('button').addEventListener('click', (evt) => {
+    poiLayer.visible = !poiLayer.visible;
+    const { target } = evt;
+    target.innerHTML = `${poiLayer.visible ? 'Hide' : 'Show'} the POIs`;
+  });
+};

package/doc/public/static/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/doc/public/static/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 'mobility-toolbox-js/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.attachToMap(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.attachToMap(map);
+
+  const poiLayer = new MapboxStyleLayer({
+    visible: true,
+    mapboxLayer,
+    styleLayersFilter: ({ id }) => /^poi_named/.test(id),
+    onHover,
+    onClick,
+  });
+  poiLayer.attachToMap(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.attachToMap(map);
+};

package/doc/public/static/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/doc/public/static/examples/ol-routing.js

@@ -0,0 +1,65 @@
+import View from 'ol/View';
+import Map from 'ol/Map';
+import {
+  MaplibreLayer,
+  CopyrightControl,
+  RoutingControl,
+  RoutingAPI,
+} from 'mobility-toolbox-js/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`,
+    apiKey: window.apiKey,
+  });
+  mapboxLayer.attachToMap(map);
+
+  const copyright = new CopyrightControl();
+  copyright.attachToMap(map);
+
+  const control = new RoutingControl({
+    element: document.createElement('div'),
+    apiKey: window.apiKey,
+  });
+  control.attachToMap(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/doc/public/static/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/doc/public/static/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/doc/public/static/examples/ol-stop-finder.js

@@ -0,0 +1,35 @@
+import View from 'ol/View';
+import Map from 'ol/Map';
+import {
+  MapboxLayer,
+  CopyrightControl,
+  StopFinderControl,
+} from 'mobility-toolbox-js/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.attachToMap(map);
+
+  const stopFinder = new StopFinderControl({
+    apiKey: window.apiKey,
+  });
+  stopFinder.attachToMap(map);
+
+  const mapboxLayer = new MapboxLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+  mapboxLayer.attachToMap(map);
+
+  map.on('singleclick', () => stopFinder.clear());
+};

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

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

package/doc/public/static/examples/ol-tracker.js

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

package/doc/public/static/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/doc/public/static/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/doc/public/static/examples/ol-tralis.js

@@ -0,0 +1,62 @@
+import View from 'ol/View';
+import Map from 'ol/Map';
+import {
+  RealtimeLayer,
+  MapboxLayer,
+  CopyrightControl,
+} from 'mobility-toolbox-js/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.attachToMap(map);
+
+  const layer = new MapboxLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+  layer.attachToMap(map);
+
+  const tracker = new RealtimeLayer({
+    url: 'wss://api.geops.io/tracker-ws/v1/',
+    apiKey: window.apiKey,
+    // bbox: [1152072, 6048052, 1433666, 6205578],
+    generalizationLevelByZoom: [],
+    motsByZoom: [],
+    visible: true,
+    tenant: 'sbb',
+    // projection: 'EPSG:3857',
+    // regexPublishedLineName: '^(S|R$|RE|PE|D|IRE|RB|TER)',
+  });
+  tracker.attachToMap(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.detachFromMap();
+  };
+};

package/doc/public/static/examples/tralis-live-map.html

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

package/doc/public/static/examples/tralis-live-map.js

@@ -0,0 +1,67 @@
+import View from 'ol/View';
+import Map from 'ol/Map';
+import {
+  RealtimeLayer,
+  MapboxLayer,
+  CopyrightControl,
+} from 'mobility-toolbox-js/ol';
+import { fromLonLat } from 'ol/proj';
+import LINE_IMAGES from './assets/tralis-live-map';
+
+export default () => {
+  const map = new Map({
+    target: 'map',
+    view: new View({
+      // center: max,
+      // center: [831634, 5933959],
+      zoom: 10,
+      zoom: 13,
+      // center: fromLonLat([7.841148, 47.996542]), // freiburg
+      center: fromLonLat([11.55, 48.14]), // munich
+    }),
+    controls: [],
+  });
+
+  const control = new CopyrightControl();
+  control.attachToMap(map);
+
+  const layer = new MapboxLayer({
+    url: 'https://maps.geops.io/styles/travic_v2/style.json',
+    apiKey: window.apiKey,
+  });
+  layer.attachToMap(map);
+
+  const cache = {};
+  const tracker = new RealtimeLayer({
+    url: 'wss://api.geops.io/realtime-ws/v1/',
+    apiKey: window.apiKey,
+    version: '2',
+    tenant: 'sbm',
+    generalizationLevelByZoom: [],
+    motsByZoom: [],
+    // bbox: [1152072, 6048052, 1433666, 6205578],
+    style: (props) => {
+      let { name } = props.properties.line || {};
+      if (!name || !LINE_IMAGES[name]) {
+        name = 'unknown';
+      }
+      if (!cache[name]) {
+        const img = new Image();
+        img.src = LINE_IMAGES[name].src;
+        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.attachToMap(map);
+};

package/doc/public/static/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/doc/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

package/doc/src/components/CodeSandboxButton.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getParameters } from 'codesandbox/lib/api/define';
+import { Button, SvgIcon } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles({
+  button: {
+    padding: '5px 15px',
+  },
+});
+
+function CodeSandboxButton({ html, js, extraFiles, ...props }) {
+  const classes = useStyles();
+
+  if (!html || !js) {
+    return null;
+  }
+
+  const dataSB = {
+    files: {
+      'index.html': {
+        content: `${html}<script src="index.js"></script>`,
+      },
+      'index.js': {
+        content: js // eslint-disable-next-line no-template-curly-in-string
+          .replaceAll('${window.apiKey}', window.apiKey)
+          .replaceAll('window.apiKey', `'${window.apiKey}'`),
+      },
+      'package.json': {
+        content: {
+          name: 'vanilla',
+          version: '1.0.0',
+          description: 'Mobility example starter project',
+          main: 'index.html',
+          scripts: {
+            start: 'parcel index.html --open',
+            build: 'parcel build index.html',
+          },
+          dependencies: {
+            'mapbox-gl': '1',
+            'maplibre-gl': '2',
+            'mobility-toolbox-js': 'latest@beta',
+            ol: '6.3.1',
+          },
+          devDependencies: {
+            '@babel/core': '7.2.0',
+            'parcel-bundler': '^1.6.1',
+          },
+          keywords: [
+            'javascript',
+            'starter',
+            'mobility-toolbox-js',
+            'mobility',
+            'toolbox',
+          ],
+        },
+      },
+      ...extraFiles,
+    },
+  };
+  const dataSBStr = getParameters(dataSB);
+  return (
+    <form
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <input type="hidden" name="parameters" value={dataSBStr} />
+      <Button
+        type="submit"
+        className={classes.button}
+        startIcon={
+          <SvgIcon fontSize="large">
+            <path
+              d="M2 6l10.455-6L22.91 6L23 17.95L12.455 24L2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144l7.32-4.18l-3.871-2.197l-3.41 1.945l-3.43-1.968L5.133 6.6z"
+              fill="currentColor"
+            />
+          </SvgIcon>
+        }
+      >
+        Edit in Sandbox
+      </Button>
+    </form>
+  );
+}
+
+CodeSandboxButton.propTypes = {
+  html: PropTypes.string,
+  js: PropTypes.string,
+  extraFiles: PropTypes.shape(),
+};
+
+CodeSandboxButton.defaultProps = {
+  html: null,
+  js: null,
+  extraFiles: {},
+};
+
+export default React.memo(CodeSandboxButton);