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

package/src/doc/examples/assets/tralis-live-map/s8kreis.svg

@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="s8kreis"
-   width="25.000002"
-   height="24.999996"
-   viewBox="0 0 25.000002 24.999996"
-   version="1.1"
-   sodipodi:docname="s8kreis.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
-  <metadata
-     id="metadata13">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs11" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="2149"
-     inkscape:window-height="1721"
-     id="namedview9"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:zoom="5.5333333"
-     inkscape:cx="38.800001"
-     inkscape:cy="37.9"
-     inkscape:window-x="2391"
-     inkscape:window-y="-9"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="Gruppe_150" />
-  <rect
-     id="Rechteck_40"
-     data-name="Rechteck 40"
-     width="150"
-     height="150"
-     fill="none"
-     x="-36.199997"
-     y="-37.099998" />
-  <g
-     id="Gruppe_150"
-     data-name="Gruppe 150"
-     opacity="0.85"
-     transform="translate(-36.199999,-37.1)">
-    <circle
-       id="Ellipse_24"
-       data-name="Ellipse 24"
-       cx="48.699997"
-       cy="49.599998"
-       r="12.499998"
-       style="stroke-width:0.322165" />
-  </g>
-  <path
-     id="Pfad_494"
-     data-name="Pfad 494"
-     d="M 12.499999,1.771907 A 10.695875,10.695875 0 1 1 1.8041241,12.467782 v 0 A 10.752254,10.752254 0 0 1 12.499999,1.771907 m 0,-1.771907 a 12.499998,12.499998 0 1 0 12.499999,12.499998 v 0 A 12.4913,12.4913 0 0 0 12.517719,0 Z"
-     style="stroke-width:0.322165" />
-  <path
-     id="Pfad_495"
-     data-name="Pfad 495"
-     d="m 3.2216501,14.400771 h 2.190721 c 0.193299,1.320877 0.837629,1.804124 2.448454,1.804124 1.127577,0 2.094072,-0.386598 2.094072,-1.417526 0,-1.030927 -1.030928,-1.224226 -2.641753,-1.610824 -1.900773,-0.483248 -3.704896,-0.934278 -3.704896,-3.221649 0,-2.190722 1.707474,-3.221649 4.155927,-3.221649 2.4484539,0 3.9948449,1.224226 4.1559279,3.414948 H 9.8260311 C 9.7293811,9.020617 8.8917521,8.53737 7.7319591,8.53737 c -1.159794,0 -1.997423,0.483247 -1.997423,1.224227 0,0.837629 0.773196,1.127577 2.384021,1.514175 2.0940719,0.483247 3.8981949,0.934278 3.8981949,3.318298 0,2.190722 -1.804123,3.414948 -4.2525769,3.414948 -2.835051,-0.03222 -4.542525,-1.353092 -4.542525,-3.608247 z"
-     fill="#f2b42c"
-     style="stroke-width:0.322165" />
-  <path
-     id="Pfad_496"
-     data-name="Pfad 496"
-     d="m 13.434278,14.755153 a 2.8701672,2.8701672 0 0 1 1.900773,-2.738402 v 0 A 2.0647549,2.0647549 0 0 1 13.917525,9.922679 c 0,-1.804123 1.514175,-2.738402 3.801546,-2.738402 2.287371,0 3.704896,0.934279 3.704896,2.738402 0,0.934278 -0.579896,1.610825 -1.417525,2.094072 v 0 a 2.7770615,2.7770615 0 0 1 1.900773,2.641752 c 0,2.190722 -1.804124,3.318299 -4.155927,3.318299 -2.416237,0 -4.31701,-1.127577 -4.31701,-3.221649 z m 6.282215,-0.09665 c 0,-1.030927 -0.773195,-1.804123 -1.997422,-1.804123 -1.224227,0 -2.094072,0.676546 -2.094072,1.804123 0,1.030928 0.773196,1.610825 2.094072,1.610825 1.127577,0 1.997422,-0.64433 1.997422,-1.610825 z m -0.289948,-4.542525 c 0,-0.837629 -0.676546,-1.320876 -1.707474,-1.320876 -1.127577,0 -1.707474,0.579897 -1.707474,1.320876 0,0.773196 0.676546,1.417526 1.707474,1.417526 1.030928,-0.09665 1.707474,-0.64433 1.707474,-1.417526 z"
-     fill="#f2b42c"
-     style="stroke-width:0.322165" />
-</svg>

package/src/doc/examples/assets/tralis-live-map/unknown.svg

@@ -1,107 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Ebene_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 25 25"
-   xml:space="preserve"
-   width="25"
-   height="25"
-   sodipodi:docname="unknown.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"><metadata
-   id="metadata29"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>unknown</dc:title></cc:Work></rdf:RDF></metadata><defs
-   id="defs27" /><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="2149"
-   inkscape:window-height="1712"
-   id="namedview25"
-   showgrid="false"
-   fit-margin-top="0"
-   fit-margin-left="0"
-   fit-margin-right="0"
-   fit-margin-bottom="0"
-   inkscape:zoom="5.5333333"
-   inkscape:cx="44.1"
-   inkscape:cy="44.1"
-   inkscape:window-x="2391"
-   inkscape:window-y="0"
-   inkscape:window-maximized="0"
-   inkscape:current-layer="g22" />
-<style
-   type="text/css"
-   id="style2">
-	.st0{fill:#E6E6E6;}
-	.st1{fill:#999999;}
-	.st2{fill:#666666;}
-	.st3{fill:#FFFFFF;}
-	.st4{fill:none;}
-</style>
-<title
-   id="title4">unknown</title>
-<g
-   id="g22"
-   transform="translate(-30.9,-30.9)">
-	<g
-   id="g10"
-   transform="matrix(0.28344671,0,0,0.28344671,22.141497,22.141497)">
-		<circle
-   class="st0"
-   cx="75"
-   cy="75"
-   r="42.599998"
-   id="circle6" />
-		<path
-   class="st1"
-   d="M 75,119.1 C 50.6,119.1 30.9,99.4 30.9,75 30.9,50.6 50.6,30.9 75,30.9 c 24.4,0 44.1,19.7 44.1,44.1 v 0 c 0,24.1 -19.7,43.8 -44.1,44.1 z m 0,-85.3 c -22.6,0 -41.2,18.5 -41.2,41.2 0,22.7 18.5,41.2 41.2,41.2 22.7,0 41.2,-18.5 41.2,-41.2 C 116.2,52.1 97.9,33.8 75,33.8 Z"
-   id="path8" />
-	</g>
-	<path
-   class="st2"
-   d="m 47.566667,35.491837 h -8.333334 c -1.162131,0 -2.097505,0.907029 -2.097505,2.097505 v 11.678005 c 0,1.162131 0.907029,2.097506 2.097505,2.097506 h 8.333334 c 1.162131,0 2.097505,-0.90703 2.097505,-2.097506 V 37.560998 c 0,-1.162132 -0.935374,-2.069161 -2.097505,-2.069161 z m -7.511338,14.172335 c -0.680272,0 -1.247166,-0.595238 -1.247166,-1.247165 0,-0.680272 0.595238,-1.247166 1.247166,-1.247166 0.680272,0 1.247165,0.595238 1.247165,1.247166 0,0.651927 -0.481859,1.247165 -1.247165,1.247165 z m 6.689342,0 c -0.680272,0 -1.247165,-0.595238 -1.247165,-1.247165 0,-0.680272 0.595238,-1.247166 1.247165,-1.247166 0.680272,0 1.247166,0.595238 1.247166,1.247166 0,0.651927 -0.510204,1.247165 -1.247166,1.247165 z m 1.247166,-6.774376 c 0,0.510204 -0.42517,0.907029 -0.90703,0.907029 h -7.426304 c -0.510204,0 -0.907029,-0.42517 -0.907029,-0.907029 v -4.903628 c 0,-0.510204 0.42517,-0.90703 0.907029,-0.90703 h 7.426304 c 0.510204,0 0.90703,0.42517 0.90703,0.90703 z"
-   id="path12"
-   style="stroke-width:0.283447" />
-	<circle
-   class="st3"
-   cx="40.055328"
-   cy="48.38866"
-   r="1.2471656"
-   id="circle14"
-   style="stroke-width:0.283447" />
-	<circle
-   class="st3"
-   cx="46.744671"
-   cy="48.38866"
-   r="1.2471656"
-   id="circle16"
-   style="stroke-width:0.283447" />
-	<path
-   class="st3"
-   d="m 39.743537,37.135828 h 7.426304 c 0.510204,0 0.90703,0.42517 0.90703,0.907029 v 4.931973 c 0,0.510204 -0.42517,0.907029 -0.90703,0.907029 h -7.426304 c -0.510204,0 -0.907029,-0.42517 -0.907029,-0.907029 v -4.903628 c -0.02835,-0.595238 0.396825,-0.935374 0.907029,-0.935374 z"
-   id="path18"
-   style="stroke-width:0.283447" />
-	<rect
-   class="st4"
-   width="150"
-   height="150"
-   id="rect20"
-   x="0"
-   y="0" />
-</g>
-</svg>

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

@@ -1,37 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { CopyrightControl } from '../../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.map = map;
-
-  // Add example button to toggle the copyright control.
-  document.getElementById('button').addEventListener('click', () => {
-    if (control.map) {
-      control.map = null;
-    } else {
-      control.map = map;
-    }
-  });
-};

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

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

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

@@ -1,39 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { TralisLayer, CopyrightControl } from '../../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,
-    touchPitch: false,
-    pitchWithRotate: false,
-    attributionControl: false,
-  });
-
-  const control = new CopyrightControl();
-  control.map = map;
-
-  // Define the layer
-  const tracker = new TralisLayer({
-    url: 'wss://api.geops.io/tracker-ws/v1/',
-    apiKey: window.apiKey,
-  });
-
-  // Add the layer to the map
-  tracker.init(map);
-
-  // Remove the layer from the map
-  // tracker.terminate(map);
-
-  // Display informations on click in the console
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(`trajectory: ${feature.getProperties()}`);
-    }
-  });
-};

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

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

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

@@ -1,34 +0,0 @@
-import { Map } from 'maplibre-gl';
-import { toLonLat } from 'ol/proj';
-import { TralisLayer, CopyrightControl } from '../../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.map = map;
-
-  const tracker = new TralisLayer({
-    url: '',
-    apiKey: '',
-  });
-
-  map.on('load', () => {
-    tracker.init(map, 'waterway-name');
-  });
-
-  tracker.onClick(([feature]) => {
-    if (feature) {
-      // eslint-disable-next-line no-console
-      console.log(feature.getProperties());
-    }
-  });
-};

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

@@ -1,43 +0,0 @@
-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/examples/ol-mapbox-layer.html

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

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

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

@@ -1,44 +0,0 @@
-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/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/src/doc/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 '../../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/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>