mobility-toolbox-js 2.3.10 → 2.4.0

package/doc/public/static/examples/layers.js

@@ -1,97 +0,0 @@
-import { Map, View } from 'ol';
-import {
-  MaplibreLayer,
-  CopyrightControl,
-  realtimeDelayStyle,
-  sortByDelay,
-  Layer,
-} 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,
-    }),
-    controls: [],
-  });
-
-  const baseTravic = new MaplibreLayer({
-    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
-    group: 'baseLayer',
-    name: 'Base - Travic',
-    visible: false,
-  });
-
-  const baseDark = new MaplibreLayer({
-    url: `https://maps.geops.io/styles/base_dark_v2/style.json?key=${window.apiKey}`,
-    name: 'Base - Dark',
-    key: 'basedark.baselayer',
-    visible: true,
-    group: 'baseLayer',
-  });
-
-  const baseBright = new MaplibreLayer({
-    url: `https://maps.geops.io/styles/base_bright_v2/style.json?key=${window.apiKey}`,
-    name: 'Base - Bright',
-    visible: false,
-    group: 'baseLayer',
-  });
-  const group = new Layer({
-    name: 'Parent',
-    children: [
-      new Layer({
-        name: 'Paren - Travix',
-        visible: false,
-        children: [baseTravic],
-      }),
-      new Layer({
-        name: 'Paren - Dark',
-        children: [baseDark],
-      }),
-      new Layer({
-        name: 'Paren - Bright',
-        visible: false,
-        children: [baseBright],
-      }),
-    ],
-  });
-  group.attachToMap(map);
-
-  // Add example button to toggle the RoutingControl mot.
-  document.getElementById('baseTravic').addEventListener('click', (e) => {
-    console.log('CLICK');
-    baseTravic.visible = !baseTravic.visible;
-    console.log(group.name, group.visible);
-    group.children.forEach((layer) => {
-      console.log(layer.name, layer.visible);
-      layer.children.forEach((layerr) => {
-        console.log(layerr.name, layerr.visible);
-      });
-    });
-  });
-  document.getElementById('baseBright').addEventListener('click', (e) => {
-    console.log('CLICK');
-    baseBright.visible = !baseBright.visible;
-    console.log(group.name, group.visible);
-    group.children.forEach((layer) => {
-      console.log(layer.name, layer.visible);
-      layer.children.forEach((layerr) => {
-        console.log(layerr.name, layerr.visible);
-      });
-    });
-  });
-  document.getElementById('baseDark').addEventListener('click', (e) => {
-    console.log('CLICK');
-    baseDark.visible = !baseDark.visible;
-    console.log(group.name, group.visible);
-    group.children.forEach((layer) => {
-      console.log(layer.name, layer.visible);
-      layer.children.forEach((layerr) => {
-        console.log(layerr.name, layerr.visible);
-      });
-    });
-  });
-};

package/doc/public/static/examples/mb-copyright.html

@@ -1,26 +0,0 @@
-<style>
-  #button,
-  #copyright {
-    margin: 10px 10px;
-  }
-
-  #button {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-
-  #copyright {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.8);
-    padding: 0px 5px;
-  }
-</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">Toggle copyright</button>
-  <div id="copyright"></div>
-</div>

package/doc/public/static/examples/mb-copyright.js

@@ -1,37 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { CopyrightControl } from 'mobility-toolbox-js/mapbox';
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-export default () => {
-  // Define the map
-  const map = new Map({
-    container: 'map',
-    style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
-    center: [7.47, 46.95],
-    zoom: 12,
-    attributionControl: false,
-  });
-
-  // Define a custom copyright
-  const control = new CopyrightControl({
-    target: document.getElementById('copyright'),
-    element: document.createElement('div'),
-    render() {
-      this.element.innerHTML = this.active
-        ? this.getCopyrights().join(' | ')
-        : '';
-    },
-  });
-
-  // Attach the control to the map
-  control.attachToMap(map);
-
-  // Add example button to toggle the copyright control.
-  document.getElementById('button').addEventListener('click', () => {
-    if (control.map) {
-      control.detachFromMap();
-    } else {
-      control.attachToMap(map);
-    }
-  });
-};

package/doc/public/static/examples/mb-tracker.html

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

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

@@ -1,40 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { RealtimeLayer, CopyrightControl } from 'mobility-toolbox-js/mapbox';
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-export default () => {
-  // Define the map
-  const map = new Map({
-    container: 'map',
-    style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
-    center: [7.47, 46.95],
-    zoom: 12,
-    minZoom: 4,
-    touchPitch: false,
-    pitchWithRotate: false,
-    attributionControl: false,
-  });
-
-  const control = new CopyrightControl();
-  control.attachToMap(map);
-
-  // Define the layer
-  const tracker = new RealtimeLayer({
-    url: 'wss://api.geops.io/tracker-ws/v1/',
-    apiKey: window.apiKey,
-  });
-
-  // Add the layer to the map
-  tracker.attachToMap(map);
-
-  // Remove the layer from the map
-  // tracker.detachFromMap(map);
-
-  // Display informations on click in the console
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-};

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

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

package/doc/public/static/examples/mb-tralis.js

@@ -1,34 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { toLonLat } from 'ol/proj';
-import { RealtimeLayer, CopyrightControl } from 'mobility-toolbox-js/mapbox';
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-export default () => {
-  const map = new Map({
-    container: 'map',
-    style: 'https://maps.geops.io/styles/travic_v2/style.json',
-    apiKey: window.apiKey,
-    center: toLonLat([1282278, 6128615]),
-    zoom: 9,
-    attributionControl: false,
-  });
-
-  const control = new CopyrightControl();
-  control.attachToMap(map);
-
-  const tracker = new RealtimeLayer({
-    url: '',
-    apiKey: '',
-  });
-
-  map.on('load', () => {
-    tracker.attachToMap(map, 'waterway-name');
-  });
-
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-};

package/doc/public/static/examples/ol-copyright.html

@@ -1,26 +0,0 @@
-<style>
-  #button,
-  #copyright {
-    margin: 10px 10px;
-  }
-
-  #button {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-
-  #copyright {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.8);
-    padding: 0px 5px;
-  }
-</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">Toggle copyright</button>
-  <div id="copyright"></div>
-</div>

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

@@ -1,43 +0,0 @@
-import { Map, View } from 'ol';
-import { MaplibreLayer, 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: [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.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 Mapbox style on the map
-  mapboxLayer.attachToMap(map);
-
-  // Toggle the copyright control.
-  document.getElementById('button').addEventListener('click', () => {
-    control.map = control.map ? null : map;
-  });
-};

package/doc/public/static/examples/ol-mapbox-layer.html

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

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

@@ -1,28 +0,0 @@
-import { Map, View } from 'ol';
-import { MaplibreLayer, 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: [0, 0],
-      zoom: 1,
-    }),
-    controls: [],
-  });
-
-  // Add copyright control
-  const control = new CopyrightControl();
-  control.attachToMap(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.attachToMap(map);
-};

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

@@ -1,12 +0,0 @@
-<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/doc/public/static/examples/ol-mapbox-style-layer.js

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

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

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

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

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

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

@@ -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/doc/public/static/examples/ol-stop-finder.js

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

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

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