From ada7778eb3ed27904a2037ff92cc44afd1877593 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Mon, 30 Jan 2023 14:29:36 +0100
Subject: [PATCH] fixed mapboxgl references

---
 resources/assets/js/GpsManager.js             |  60 +-
 resources/assets/js/NavigationModule.js       | 290 +++++----
 resources/assets/js/Results.js                | 583 ++++++++++--------
 resources/assets/js/ReversePositionManager.js |  27 +-
 resources/assets/js/Route.js                  | 301 +++++----
 .../assets/js/RouteFinderSearchResults.js     | 381 +++++++-----
 resources/assets/js/Waypoint.js               |  71 ++-
 7 files changed, 933 insertions(+), 780 deletions(-)

diff --git a/resources/assets/js/GpsManager.js b/resources/assets/js/GpsManager.js
index 3f8cc83..5849f17 100644
--- a/resources/assets/js/GpsManager.js
+++ b/resources/assets/js/GpsManager.js
@@ -1,11 +1,11 @@
 function GpsManager(interactiveMap) {
   this.map = interactiveMap.map;
-  this.control = new mapboxgl.GeolocateControl({
+  this.control = new maplibregl.GeolocateControl({
     positionOptions: {
       enableHighAccuracy: true,
-      maximumAge: 3000
+      maximumAge: 3000,
     },
-    trackUserLocation: true
+    trackUserLocation: true,
   });
   this.controlAdded = false;
   this.interactiveMap = interactiveMap;
@@ -19,7 +19,7 @@ function GpsManager(interactiveMap) {
   this.circle = null; // Geometry of the accuracy of the user position
   this.options = {
     enableHighAccuracy: true,
-    maximumAge: 0
+    maximumAge: 0,
   };
   this.checkGps(); // This function will set the value of "this.gps" it check gps availability asynchronious
   // Be carefull we will not know if we have GPS or not directly after this constructor
@@ -28,17 +28,17 @@ function GpsManager(interactiveMap) {
 
 GpsManager.prototype.constructor = GpsManager;
 
-GpsManager.prototype.loadingGps = function () {
+GpsManager.prototype.loadingGps = function() {
   // Returns a boolean so you can check whether this Manager is finished loading Gps
   if (this.gps == null) return true;
   else return false;
 };
 
-GpsManager.prototype.getLocation = function () {
+GpsManager.prototype.getLocation = function() {
   var caller = this;
   return new Promise((resolve, reject) => {
     if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(position => {
+      navigator.geolocation.getCurrentPosition((position) => {
         caller.toggleGpsLocator(true);
         caller.location = [position.coords.longitude, position.coords.latitude];
         caller.accuracy = position.coords.accuracy;
@@ -53,11 +53,11 @@ GpsManager.prototype.getLocation = function () {
   });
 };
 
-GpsManager.prototype.checkGps = function () {
+GpsManager.prototype.checkGps = function() {
   if (navigator.geolocation) {
     var caller = this;
     navigator.geolocation.getCurrentPosition(
-      function (position) {
+      function(position) {
         caller.toggleGpsLocator(true);
         caller.location = [position.coords.longitude, position.coords.latitude];
         caller.accuracy = position.coords.accuracy;
@@ -65,7 +65,7 @@ GpsManager.prototype.checkGps = function () {
         caller.gps = true;
         caller.enableGpsFeatures();
       },
-      function (error) {
+      function(error) {
         caller.gps = false;
         caller.toggleGpsLocator(false);
         caller.toggleGpsWarning();
@@ -73,7 +73,7 @@ GpsManager.prototype.checkGps = function () {
       },
       {
         enableHighAccuracy: true,
-        maximumAge: 0
+        maximumAge: 0,
       }
     );
   } else {
@@ -86,18 +86,18 @@ GpsManager.prototype.checkGps = function () {
 
 // The GpsManager can call the predefined Functions of the current module
 // If it finishes too fast with fetching the position it can cause troubles thats why we add a timeout
-GpsManager.prototype.enableGpsFeatures = function () {
+GpsManager.prototype.enableGpsFeatures = function() {
   window.setTimeout(
-    $.proxy(function () {
+    $.proxy(function() {
       this.interactiveMap.module.enableGps();
     }, this),
     100
   );
   //setTimeout(this.interactiveMap.module.enableGps(), 10000);
 };
-GpsManager.prototype.disableGpsFeatures = function () {
+GpsManager.prototype.disableGpsFeatures = function() {
   window.setTimeout(
-    $.proxy(function () {
+    $.proxy(function() {
       this.interactiveMap.module.disableGps();
     }, this),
     100
@@ -108,10 +108,10 @@ GpsManager.prototype.disableGpsFeatures = function () {
  * It's a button on the map to display your own Position
  * @param visible - Boolean whether GPS is available or not
  **/
-GpsManager.prototype.toggleGpsLocator = function (visible) {
+GpsManager.prototype.toggleGpsLocator = function(visible) {
   if (visible) {
     if (!this.controlAdded) {
-      this.map.addControl(this.control, 'bottom-left');
+      this.map.addControl(this.control, "bottom-left");
       this.controlAdded = true;
     }
     $("#start-navigation > a").attr("href", "/route/start/foot/gps;");
@@ -127,16 +127,16 @@ GpsManager.prototype.toggleGpsLocator = function (visible) {
  * If the retrieval of GPS Position fails on mobile devices we will show a small warning for a
  * period of time.
  **/
-GpsManager.prototype.toggleGpsWarning = function () {
+GpsManager.prototype.toggleGpsWarning = function() {
   $("#gps-error").addClass("visible-xs");
   $("#gps-error").removeClass("hidden");
-  setTimeout(function () {
+  setTimeout(function() {
     $("#gps-error").addClass("hidden");
     $("#gps-error").removeClass("visible-xs");
   }, 5000);
 };
 
-GpsManager.prototype.stopWatch = function () {
+GpsManager.prototype.stopWatch = function() {
   if (typeof this.followId != "undefined") {
     navigator.geolocation.clearWatch(this.followId);
     this.followId = undefined;
@@ -144,22 +144,22 @@ GpsManager.prototype.stopWatch = function () {
   }
 };
 
-GpsManager.prototype.watchPosition = function (callback, options) {
+GpsManager.prototype.watchPosition = function(callback, options) {
   if (typeof options == "undefined") {
     var options = {
       enableHighAccuracy: true,
-      maximumAge: 3000
+      maximumAge: 3000,
     };
   }
   if (typeof callback != "function") return;
   this.followId = navigator.geolocation.watchPosition(
-    $.proxy(function (position) {
+    $.proxy(function(position) {
       // We have a new Position
       var long = parseFloat(position.coords.longitude);
       var lat = parseFloat(position.coords.latitude);
       this.location[0] = long;
       this.location[1] = lat;
-      this.accuracy = 20;// parseFloat(position.coords.accuracy); TODO REMOVE
+      this.accuracy = 20; // parseFloat(position.coords.accuracy); TODO REMOVE
       this.timestamp = Math.floor(position.timestamp / 1000);
       // We can calculate the possible Heading if this is not the first Position we retrieve
       if (
@@ -175,7 +175,7 @@ GpsManager.prototype.watchPosition = function (callback, options) {
       }
       callback(position);
     }, this),
-    function (error) {
+    function(error) {
       // Follow Location couldn't be started. Abort now
       deinitAssistent();
     },
@@ -183,7 +183,7 @@ GpsManager.prototype.watchPosition = function (callback, options) {
   );
 };
 
-GpsManager.prototype.getBearing = function (p1, p2) {
+GpsManager.prototype.getBearing = function(p1, p2) {
   var point1 = turf.point(p1);
   var point2 = turf.point(p2);
   var bearing = turf.bearing(point1, point2);
@@ -193,17 +193,17 @@ GpsManager.prototype.getBearing = function (p1, p2) {
   return bearing;
 };
 
-GpsManager.prototype.toRadians = function (angle) {
+GpsManager.prototype.toRadians = function(angle) {
   return angle * (Math.PI / 180);
 };
 
-GpsManager.prototype.toDegrees = function (radians) {
+GpsManager.prototype.toDegrees = function(radians) {
   return (radians * 180) / Math.PI;
 };
 
-GpsManager.prototype.getDistance = function (p1, p2) {
+GpsManager.prototype.getDistance = function(p1, p2) {
   var point1 = turf.point(p1);
   var point2 = turf.point(p2);
-  var dist = turf.distance(point1, point2, { units: 'kilometers' }) * 1000;
+  var dist = turf.distance(point1, point2, { units: "kilometers" }) * 1000;
   return dist;
 };
diff --git a/resources/assets/js/NavigationModule.js b/resources/assets/js/NavigationModule.js
index b521b7a..0dc1404 100644
--- a/resources/assets/js/NavigationModule.js
+++ b/resources/assets/js/NavigationModule.js
@@ -6,25 +6,27 @@ function NavigationModule(interactiveMap, route) {
   // Find the index of the first symbol layer in the map style
   this.firstSymbolId;
   for (var i = 0; i < layers.length; i++) {
-    if (layers[i].type === 'symbol') {
+    if (layers[i].type === "symbol") {
       this.firstSymbolId = layers[i].id;
       break;
     }
   }
 
-  $("#navigation .leg-finish").hide("", function () {
+  $("#navigation .leg-finish").hide("", function() {
     $(this).css("visibility", "visible");
   });
   this.running = false;
   // Initialize empty driven Route ( With First Point already added)
   this.route.drivenRoute = {
     coordinates: [this.route.getFirstPoint()],
-    type: "LineString"
+    type: "LineString",
   };
   this.prepareInterface();
   // Disable the Display Timeout
-  if (typeof android !== "undefined" &&
-    typeof android["toggleDisplayTimeout"] == "function") {
+  if (
+    typeof android !== "undefined" &&
+    typeof android["toggleDisplayTimeout"] == "function"
+  ) {
     android.toggleDisplayTimeout(false);
   }
   this.printRoute();
@@ -40,7 +42,7 @@ function NavigationModule(interactiveMap, route) {
   this.startLocationFollowing();
 }
 
-NavigationModule.prototype.prepareInterface = function () {
+NavigationModule.prototype.prepareInterface = function() {
   // Disable The Zoom Bar. We won't need it now
   $(".ol-zoom, .ol-zoomslider").hide();
   // Disable The Location tool it'll be active anyways
@@ -54,35 +56,37 @@ NavigationModule.prototype.prepareInterface = function () {
   this.updateRouteStats();
 };
 
-NavigationModule.prototype.addListeners = function () {
+NavigationModule.prototype.addListeners = function() {
   // Listener for the exit navigation Button
   $(
     "#navigation .leg-finish .options .abort, #navigation #general-information .exit"
   ).click(
-    $.proxy(function (event) {
+    $.proxy(function(event) {
       this.cancelNavigation();
     }, this)
   );
   // Listener for the continue navigation Button
   $("#navigation .leg-finish .options .continue").click(
-    $.proxy(function (event) {
+    $.proxy(function(event) {
       $("#navigation .leg-finish").hide("slow");
       this.startLocationFollowing();
     }, this)
   );
 };
 
-NavigationModule.prototype.removeListeners = function () {
+NavigationModule.prototype.removeListeners = function() {
   $(
     "#navigation .leg-finish .options .abort, #navigation #general-information .exit"
   ).off();
   $("#navigation .leg-finish .options .continue").off();
 };
 
-NavigationModule.prototype.cancelNavigation = function () {
+NavigationModule.prototype.cancelNavigation = function() {
   // Enable Display Timeout
-  if (typeof android !== "undefined" &&
-    typeof android["toggleDisplayTimeout"] == "function") {
+  if (
+    typeof android !== "undefined" &&
+    typeof android["toggleDisplayTimeout"] == "function"
+  ) {
     android.toggleDisplayTimeout(true);
   }
 
@@ -96,7 +100,7 @@ NavigationModule.prototype.cancelNavigation = function () {
     var waypoints = [];
     $.each(
       this.route.route.waypoints,
-      $.proxy(function (index, value) {
+      $.proxy(function(index, value) {
         if (index == 0) {
           waypoints.push(["gps"]);
         } else {
@@ -107,7 +111,7 @@ NavigationModule.prototype.cancelNavigation = function () {
     var vehicle = this.route.vehicle;
     this.interactiveMap.switchModule("route-finding", {
       waypoints: waypoints,
-      vehicle: vehicle
+      vehicle: vehicle,
     });
   } else if (this.route.route.waypoints.length == 1) {
     // There is only one Waypoint Left that will be the desired destination for the user
@@ -116,7 +120,7 @@ NavigationModule.prototype.cancelNavigation = function () {
   }
 };
 
-NavigationModule.prototype.updateCurrentStep = function (distTraveled) {
+NavigationModule.prototype.updateCurrentStep = function(distTraveled) {
   var traveled = 0;
   if (typeof distTraveled != "undefined") traveled = distTraveled;
 
@@ -145,21 +149,24 @@ NavigationModule.prototype.updateCurrentStep = function (distTraveled) {
       $("#navigation #next-step .step .image img").remove();
     } else {
       // Update Image
-      var currentImage = $("#navigation #next-step .step .image img").attr("src");
+      var currentImage = $("#navigation #next-step .step .image img").attr(
+        "src"
+      );
       if (currentImage != image) {
         $("#navigation #next-step .step .image img").attr("src", image);
       }
     }
   } else if (image.length > 0) {
-    $("#navigation #next-step .step .image").html("<img src='" + image + "' alt='no-image' />");
+    $("#navigation #next-step .step .image").html(
+      "<img src='" + image + "' alt='no-image' />"
+    );
   }
 
   $("#navigation #next-step .step .step-string").html(stepString);
   $("#navigation #next-step .step .step-length").html(distanceString);
-
 };
 
-NavigationModule.prototype.updateRouteStats = function (
+NavigationModule.prototype.updateRouteStats = function(
   distTraveled,
   durTraveled
 ) {
@@ -182,7 +189,7 @@ NavigationModule.prototype.updateRouteStats = function (
   );
 };
 
-NavigationModule.prototype.distanceString = function (length) {
+NavigationModule.prototype.distanceString = function(length) {
   var result = "";
   length = Math.floor(length);
 
@@ -213,7 +220,7 @@ NavigationModule.prototype.distanceString = function (length) {
   return result;
 };
 
-NavigationModule.prototype.finishLeg = function () {
+NavigationModule.prototype.finishLeg = function() {
   this.running = false;
   this.route.removeLeg();
   this.normalizeView(); // Puts the rotation back to 0
@@ -283,7 +290,7 @@ NavigationModule.prototype.finishLeg = function () {
   $("#navigation .leg-finish").show("slow");
 };
 
-NavigationModule.prototype.durationString = function (duration) {
+NavigationModule.prototype.durationString = function(duration) {
   duration = Math.abs(duration);
   duration = Math.floor(duration);
   var result = "";
@@ -300,11 +307,11 @@ NavigationModule.prototype.durationString = function (duration) {
   return result;
 };
 
-NavigationModule.prototype.startLocationFollowing = function () {
+NavigationModule.prototype.startLocationFollowing = function() {
   if (this.followingId == null) {
     var options = {
       enableHighAccuracy: true,
-      maximumAge: 3000
+      maximumAge: 3000,
     };
     this.running = true;
 
@@ -318,7 +325,7 @@ NavigationModule.prototype.startLocationFollowing = function () {
   }
 };
 
-NavigationModule.prototype.newPosition = function (position) {
+NavigationModule.prototype.newPosition = function(position) {
   // We will define an update Interval manually since the maximumAge Paramter doesn't seem to work
   if (
     this.lastUpdate !== null &&
@@ -330,14 +337,18 @@ NavigationModule.prototype.newPosition = function (position) {
     // We should not come to this case again because the watch should've been cleared
     // Let's clear it again
     this.interactiveMap.GpsManager.stopWatch();
-    if (typeof this.interactiveMap.map.getLayer('route-active') != "undefined") {
-      this.interactiveMap.map.removeLayer('route-active');
-      this.interactiveMap.map.removeSource('route-active');
+    if (
+      typeof this.interactiveMap.map.getLayer("route-active") != "undefined"
+    ) {
+      this.interactiveMap.map.removeLayer("route-active");
+      this.interactiveMap.map.removeSource("route-active");
     }
 
-    if (typeof this.interactiveMap.map.getLayer('route-driven') != "undefined") {
-      this.interactiveMap.map.removeLayer('route-driven');
-      this.interactiveMap.map.removeSource('route-driven');
+    if (
+      typeof this.interactiveMap.map.getLayer("route-driven") != "undefined"
+    ) {
+      this.interactiveMap.map.removeLayer("route-driven");
+      this.interactiveMap.map.removeSource("route-driven");
     }
     this.removeWaypoints();
     this.removeUserPosition();
@@ -388,7 +399,6 @@ NavigationModule.prototype.newPosition = function (position) {
       i--;
     }
 
-
     // Now we for sure have the current step at position 0
     // Every step has a geometry Object describing the line we need to take.
     // If we can find out at which point of that line we are we can adjust the bearing of the map to
@@ -430,7 +440,10 @@ NavigationModule.prototype.newPosition = function (position) {
       pointOnRoute.point,
       this.route.getFirstPoint()
     );
-    if (typeof this.distTraveled == "undefined" || distTraveled > this.distTraveled) {
+    if (
+      typeof this.distTraveled == "undefined" ||
+      distTraveled > this.distTraveled
+    ) {
       this.distTraveled = distTraveled;
     } else {
       return;
@@ -438,8 +451,8 @@ NavigationModule.prototype.newPosition = function (position) {
 
     if (
       this.route.route.routes[this.route.route.activeRoute].legs[0].distance -
-      distTraveled -
-      accuracy <=
+        distTraveled -
+        accuracy <=
       0
     ) {
       this.finishLeg();
@@ -480,7 +493,7 @@ NavigationModule.prototype.newPosition = function (position) {
     var pos = position.coords;
     pos = [parseFloat(pos.longitude), parseFloat(pos.latitude)];
     var pointString = "";
-    $.each(this.route.route.waypoints, function (index, value) {
+    $.each(this.route.route.waypoints, function(index, value) {
       if (index === 0) {
         // The first waypoint always is the gpsLocation
         pointString += pos.toString() + ";";
@@ -513,15 +526,10 @@ NavigationModule.prototype.newPosition = function (position) {
     $("#navigation #next-step").css("background-color", "rgb(154,154,154)");
     // Also we will Update the User Position to the GPS Point and if available update the Bearing of the Map
     // That way the user will of course recognize that he is heading to the wrong direction
-    this.updateUserPosition(
-      pos
-    );
+    this.updateUserPosition(pos);
     // We might have a Bearing based on the last two Position Updates in that case we will rotate the map
     if (this.interactiveMap.GpsManager.bearing != null) {
-      this.updateMapView(
-        pos,
-        this.interactiveMap.GpsManager.bearing
-      );
+      this.updateMapView(pos, this.interactiveMap.GpsManager.bearing);
     }
 
     this.loadNewRoute(url, position);
@@ -529,26 +537,26 @@ NavigationModule.prototype.newPosition = function (position) {
 };
 
 /*
-* This function will try to retrieve a new Route
-* Mostly this happens when the user has left the calculated Route
-* This function won't load two new routes at the same time
-* It'll try to download with a timeout of 10 seconds, after that the next Position update will trigger a new download 
-* until one of it suceeds
-*/
-NavigationModule.prototype.loadNewRoute = function (url, position) {
+ * This function will try to retrieve a new Route
+ * Mostly this happens when the user has left the calculated Route
+ * This function won't load two new routes at the same time
+ * It'll try to download with a timeout of 10 seconds, after that the next Position update will trigger a new download
+ * until one of it suceeds
+ */
+NavigationModule.prototype.loadNewRoute = function(url, position) {
   if (this.routeRequest == undefined) {
     var timeout = 10; // 10 seconds Timeout for this request
     $.ajax({
       url: url,
       dataType: "json",
-      success: $.proxy(function (response) {
+      success: $.proxy(function(response) {
         this.routeLoadingerror = undefined;
         this.route.route = response;
         this.route.route.activeRoute = 0;
         this.route.legs = this.route.extractLegs();
         this.route.drivenRoute = {
           coordinates: [this.route.getFirstPoint()],
-          type: "LineString"
+          type: "LineString",
         };
         $("#navigation #next-step").css("background-color", "#ff8000");
         this.updateRouteStats();
@@ -559,11 +567,11 @@ NavigationModule.prototype.loadNewRoute = function (url, position) {
         this.newPosition(position);
       }, this),
       timeout: timeout * 1000,
-      error: $.proxy(function () {
+      error: $.proxy(function() {
         this.routeLoadingerror = true;
-      }, this)
+      }, this),
     }).always(
-      $.proxy(function () {
+      $.proxy(function() {
         this.routeRequest = undefined;
       }, this)
     );
@@ -571,31 +579,31 @@ NavigationModule.prototype.loadNewRoute = function (url, position) {
 };
 
 /*
-* This Function updates the view of the map so that:
-* 1. The given Point (in Map Coordinates) is in the center
-* 2. The given Bearing is set
-* The new rotation animation will take the shortest direction
-*/
-NavigationModule.prototype.updateMapView = function (point, bearing) {
+ * This Function updates the view of the map so that:
+ * 1. The given Point (in Map Coordinates) is in the center
+ * 2. The given Bearing is set
+ * The new rotation animation will take the shortest direction
+ */
+NavigationModule.prototype.updateMapView = function(point, bearing) {
   var padding = {
     top: $("#navigation #next-step").outerHeight() + 50,
     right: 0,
     bottom: $("#navigation #general-information").outerHeight() + 50,
-    left: 0
-  }
-  var offset = ($(window).height() / 2) * .6;
+    left: 0,
+  };
+  var offset = ($(window).height() / 2) * 0.6;
   this.interactiveMap.map.easeTo({
     center: point,
     bearing: bearing,
     padding: padding,
     offset: {
       x: 0,
-      y: offset
-    }
+      y: offset,
+    },
   });
 };
 
-NavigationModule.prototype.isBetween = function (point, p1, p2) {
+NavigationModule.prototype.isBetween = function(point, p1, p2) {
   // To determine if a point is on a route we compare min and max lat/lon values with the point
   var minLon = Math.min(p1[0], p2[0]);
   var maxLon = Math.max(p1[0], p2[0]);
@@ -614,7 +622,7 @@ NavigationModule.prototype.isBetween = function (point, p1, p2) {
   }
 };
 
-NavigationModule.prototype.updateView = function (point, bearing) {
+NavigationModule.prototype.updateView = function(point, bearing) {
   var route = this.route.route.routes[this.route.route.activeRoute];
   var geometry = route.legs[0].steps[0];
 
@@ -622,13 +630,16 @@ NavigationModule.prototype.updateView = function (point, bearing) {
     top: $("#navigation #next-step").outerHeight() + 50,
     right: 0,
     bottom: $("#navigation #general-information").outerHeight() + 50,
-    left: 0
-  }
+    left: 0,
+  };
 
-  var offset = ($(window).height() / 2) * .6;
+  var offset = ($(window).height() / 2) * 0.6;
 
   var zoom = 20;
-  var distance = this.getDistance(point, geometry.geometry.coordinates[geometry.geometry.coordinates.length - 1]);
+  var distance = this.getDistance(
+    point,
+    geometry.geometry.coordinates[geometry.geometry.coordinates.length - 1]
+  );
   if (distance > 30) {
     zoom = 19.5;
   }
@@ -676,28 +687,28 @@ NavigationModule.prototype.updateView = function (point, bearing) {
     center: point,
     offset: {
       x: 0,
-      y: offset
+      y: offset,
     },
     zoom: zoom,
     pitch: 50,
     bearing: bearing,
     padding: padding,
-    duration: this.frequency
+    duration: this.frequency,
   });
 };
 
 /*
-* This Function sets the rotation of the Map back to 0 with an animation
-* It'll calculate the shortest rotation direction to do so.
-*/
-NavigationModule.prototype.normalizeView = function () {
+ * This Function sets the rotation of the Map back to 0 with an animation
+ * It'll calculate the shortest rotation direction to do so.
+ */
+NavigationModule.prototype.normalizeView = function() {
   this.interactiveMap.map.easeTo({
     bearing: 0,
-    pitch: 0
+    pitch: 0,
   });
 };
 
-NavigationModule.prototype.printRoute = function (point) {
+NavigationModule.prototype.printRoute = function(point) {
   // Geometry of the active route
   var geojson = this.route.route.routes[this.route.route.activeRoute].geometry;
   var geojsonDriven = this.route.drivenRoute;
@@ -713,53 +724,61 @@ NavigationModule.prototype.printRoute = function (point) {
     coordinates[0] = point;
     geojson.coordinates = coordinates;
   }
-  if (typeof this.interactiveMap.map.getLayer('route-active') == "undefined") {
-    this.interactiveMap.map.addLayer({
-      'id': 'route-active',
-      'type': 'line',
-      'source': {
-        'type': 'geojson',
-        'data': {
-          'type': 'Feature',
-          'geometry': geojson
-        }
+  if (typeof this.interactiveMap.map.getLayer("route-active") == "undefined") {
+    this.interactiveMap.map.addLayer(
+      {
+        id: "route-active",
+        type: "line",
+        source: {
+          type: "geojson",
+          data: {
+            type: "Feature",
+            geometry: geojson,
+          },
+        },
+        layout: {},
+        paint: {
+          "line-color": "rgb(255,128,0)",
+          "line-width": 5,
+        },
       },
-      'layout': {},
-      'paint': {
-        'line-color': 'rgb(255,128,0)',
-        'line-width': 5
-      }
-    }, this.firstSymbolId);
+      this.firstSymbolId
+    );
   } else {
-    this.interactiveMap.map.getSource('route-active').setData({
-      'type': 'Feature',
-      'geometry': geojson
+    this.interactiveMap.map.getSource("route-active").setData({
+      type: "Feature",
+      geometry: geojson,
     });
   }
 
   if (geojsonDriven.coordinates.length > 1) {
     // Add the driven route, too
-    if (typeof this.interactiveMap.map.getLayer('route-driven') == "undefined") {
-      this.interactiveMap.map.addLayer({
-        'id': 'route-driven',
-        'type': 'line',
-        'source': {
-          'type': 'geojson',
-          'data': {
-            'type': 'Feature',
-            'geometry': geojsonDriven
-          }
+    if (
+      typeof this.interactiveMap.map.getLayer("route-driven") == "undefined"
+    ) {
+      this.interactiveMap.map.addLayer(
+        {
+          id: "route-driven",
+          type: "line",
+          source: {
+            type: "geojson",
+            data: {
+              type: "Feature",
+              geometry: geojsonDriven,
+            },
+          },
+          layout: {},
+          paint: {
+            "line-color": "rgb(199,199,199)",
+            "line-width": 5,
+          },
         },
-        'layout': {},
-        'paint': {
-          'line-color': 'rgb(199,199,199)',
-          'line-width': 5
-        }
-      }, this.firstSymbolId);
+        this.firstSymbolId
+      );
     } else {
-      this.interactiveMap.map.getSource('route-driven').setData({
-        'type': 'Feature',
-        'geometry': geojsonDriven
+      this.interactiveMap.map.getSource("route-driven").setData({
+        type: "Feature",
+        geometry: geojsonDriven,
       });
     }
   }
@@ -768,7 +787,7 @@ NavigationModule.prototype.printRoute = function (point) {
   if (typeof this.waypointsAdded == "undefined") {
     $.each(
       this.route.waypoints,
-      $.proxy(function (index, value) {
+      $.proxy(function(index, value) {
         if (index == 0) return 1;
         value.marker.addTo(this.interactiveMap.map);
       }, this)
@@ -777,16 +796,15 @@ NavigationModule.prototype.printRoute = function (point) {
   }
 };
 
-NavigationModule.prototype.updateUserPosition = function (point) {
-  if (typeof point == "undefined")
-    return;
+NavigationModule.prototype.updateUserPosition = function(point) {
+  if (typeof point == "undefined") return;
   // Add the User Position
   if (
     typeof this.userPosOverlay == "undefined" ||
     this.userPosOverlay == null
   ) {
     var el = $('<img src="/img/navigation-arrow.svg" width="30px" />');
-    this.userPosOverlay = new mapboxgl.Marker(el.get(0))
+    this.userPosOverlay = new maplibregl.Marker(el.get(0))
       .setLngLat(point)
       .addTo(this.interactiveMap.map);
   } else {
@@ -795,7 +813,7 @@ NavigationModule.prototype.updateUserPosition = function (point) {
   }
 };
 
-NavigationModule.prototype.calcFrequency = function (durTraveled) {
+NavigationModule.prototype.calcFrequency = function(durTraveled) {
   // We decide in which Frequency we gonna update the Map.
   // It depends of the duration the current step will take to Finish:
   // 1s   =>  The Last 15 Seconds of a step will be updated the most frequent
@@ -819,7 +837,7 @@ NavigationModule.prototype.calcFrequency = function (durTraveled) {
   }
 };
 
-NavigationModule.prototype.getBearing = function (p1, p2) {
+NavigationModule.prototype.getBearing = function(p1, p2) {
   var point1 = turf.point(p1);
   var point2 = turf.point(p2);
   var bearing = turf.bearing(point1, point2);
@@ -829,26 +847,26 @@ NavigationModule.prototype.getBearing = function (p1, p2) {
   return bearing;
 };
 
-NavigationModule.prototype.toRadians = function (angle) {
+NavigationModule.prototype.toRadians = function(angle) {
   return angle * (Math.PI / 180);
 };
 
-NavigationModule.prototype.toDegrees = function (radians) {
+NavigationModule.prototype.toDegrees = function(radians) {
   return (radians * 180) / Math.PI;
 };
 
-NavigationModule.prototype.getDistance = function (p1, p2) {
+NavigationModule.prototype.getDistance = function(p1, p2) {
   var point1 = turf.point(p1);
   var point2 = turf.point(p2);
-  var dist = turf.distance(point1, point2, { units: 'kilometers' }) * 1000;
+  var dist = turf.distance(point1, point2, { units: "kilometers" }) * 1000;
   return dist;
 };
 
-NavigationModule.prototype.removeWaypoints = function () {
+NavigationModule.prototype.removeWaypoints = function() {
   if (typeof this.waypointsAdded != "undefined") {
     $.each(
       this.route.waypoints,
-      $.proxy(function (index, value) {
+      $.proxy(function(index, value) {
         if (index == 0) return 1;
         value.marker.remove();
       }, this)
@@ -857,13 +875,13 @@ NavigationModule.prototype.removeWaypoints = function () {
   }
 };
 
-NavigationModule.prototype.removeUserPosition = function () {
+NavigationModule.prototype.removeUserPosition = function() {
   if (typeof this.userPosOverlay != "undefined") {
     this.userPosOverlay.remove();
   }
 };
 
-NavigationModule.prototype.exit = function () {
+NavigationModule.prototype.exit = function() {
   // If we're currently following the Location we need to disable that
   this.interactiveMap.GpsManager.stopWatch();
   // Hide the finish screen if visible
@@ -888,5 +906,7 @@ NavigationModule.prototype.exit = function () {
   this.interactiveMap.GpsManager.toggleGpsLocator(true);
   $("#map .ol-scale-line, #map .ol-attribution").show();
   $("#navigation").hide("slow");
-  $("#navigation #next-step .image, #navigation #next-step .step-string, #navigation #next-step .step-length").html("");
+  $(
+    "#navigation #next-step .image, #navigation #next-step .step-string, #navigation #next-step .step-length"
+  ).html("");
 };
diff --git a/resources/assets/js/Results.js b/resources/assets/js/Results.js
index 78a0c0e..cc91c70 100644
--- a/resources/assets/js/Results.js
+++ b/resources/assets/js/Results.js
@@ -1,300 +1,343 @@
-
 function Results(map, data, query, moveMap, resultsHistory) {
-	this.interactiveMap = map;
-	this.results = data;
-	this.query = query;
-	this.resultsHistory = resultsHistory;
-	if (typeof moveMap == "boolean") {
-		this.moveMap = moveMap;
-	} else {
-		this.moveMap = true;
-	}
-	this.marker = [];
-	this.updateInterface();
+  this.interactiveMap = map;
+  this.results = data;
+  this.query = query;
+  this.resultsHistory = resultsHistory;
+  if (typeof moveMap == "boolean") {
+    this.moveMap = moveMap;
+  } else {
+    this.moveMap = true;
+  }
+  this.marker = [];
+  this.updateInterface();
 }
 
-Results.prototype.deleteSearch = function (animationSpeed) {
-	// Activate Reverse Geocoding
-	this.interactiveMap.reversePositionManager.setActive(true);
-	if (animationSpeed === null) {
-		animationSpeed = "slow";
-	}
+Results.prototype.deleteSearch = function(animationSpeed) {
+  // Activate Reverse Geocoding
+  this.interactiveMap.reversePositionManager.setActive(true);
+  if (animationSpeed === null) {
+    animationSpeed = "slow";
+  }
 
-	$("#search-addon .results .results-container").hide(animationSpeed, function () {
-		$("#search-addon .results .results-container").html("");
-	});
-	$("#search-addon #delete-search").remove();
-	$("#search-addon #search input[name=q]").val("");
+  $("#search-addon .results .results-container").hide(
+    animationSpeed,
+    function() {
+      $("#search-addon .results .results-container").html("");
+    }
+  );
+  $("#search-addon #delete-search").remove();
+  $("#search-addon #search input[name=q]").val("");
 
-	if ($(window).outerWidth() <= 767) {
-		$("#search-addon .results .mobiles-window").remove();
-		$("#search-addon #show-list").remove();
-		// The Search box got focussed on a mobile Let's get more Space
-		var anim = {
-			"margin": "15px 15px 0 15px",
-		}
-		if (this.addonWidth) {
-			anim.width = this.addonWidth;
-		}
-		$("#search-addon").animate(anim, 'slow', function () {
-			$("#search-addon").css("width", "");
-		});
-		$("#search-addon .results").css("border-radius", "0 0 15px 15px");
-		$("#search-addon .results").css("max-height", "91vh");
-		$("#search-addon .results").css("background-color", "white");
-		// Show Zoombar on mobiles in results view
-		$(".ol-zoom, .ol-zoomslider").show();
-	}
-	this.removeResultMarker();
-}
+  if ($(window).outerWidth() <= 767) {
+    $("#search-addon .results .mobiles-window").remove();
+    $("#search-addon #show-list").remove();
+    // The Search box got focussed on a mobile Let's get more Space
+    var anim = {
+      margin: "15px 15px 0 15px",
+    };
+    if (this.addonWidth) {
+      anim.width = this.addonWidth;
+    }
+    $("#search-addon").animate(anim, "slow", function() {
+      $("#search-addon").css("width", "");
+    });
+    $("#search-addon .results").css("border-radius", "0 0 15px 15px");
+    $("#search-addon .results").css("max-height", "91vh");
+    $("#search-addon .results").css("background-color", "white");
+    // Show Zoombar on mobiles in results view
+    $(".ol-zoom, .ol-zoomslider").show();
+  }
+  this.removeResultMarker();
+};
 
-Results.prototype.removeResultMarker = function () {
-	$.each(this.marker, function (index, value) {
-		value.remove();
-	});
-	this.marker = [];
-}
+Results.prototype.removeResultMarker = function() {
+  $.each(this.marker, function(index, value) {
+    value.remove();
+  });
+  this.marker = [];
+};
 
 /**
  * Updates the User Interface if there are any Search results saved in this Module
  * It prints all Markers and geometries for the search results and updates the results list
-**/
-Results.prototype.updateInterface = function () {
-	if (this.results.length > 0) {
-		this.deleteSearch(0);
-		$("#search input[name=q]").val(this.query);
-		// Disable Reverse Geocoding on click
-		this.interactiveMap.reversePositionManager.setActive(false);
-		// First add those Results to the Results List
-		$("#search-addon .results .results-container").html("");
-		$("#search-addon .results .mobiles-window").remove();
-		var caller = this;
-		$.each(this.results, function (index, value) {
-			var res = (new NominatimParser(value)).getHTMLResult().html();
-			var resHtml = $('\
-							<div class="container-fluid suggestion" data-resultNumber="'+ index + '">\
+ **/
+Results.prototype.updateInterface = function() {
+  if (this.results.length > 0) {
+    this.deleteSearch(0);
+    $("#search input[name=q]").val(this.query);
+    // Disable Reverse Geocoding on click
+    this.interactiveMap.reversePositionManager.setActive(false);
+    // First add those Results to the Results List
+    $("#search-addon .results .results-container").html("");
+    $("#search-addon .results .mobiles-window").remove();
+    var caller = this;
+    $.each(this.results, function(index, value) {
+      var res = new NominatimParser(value).getHTMLResult().html();
+      var resHtml = $(
+        '\
+							<div class="container-fluid suggestion" data-resultNumber="' +
+          index +
+          '">\
 	                            <div class="flex-container">\
 	                                <div class="item history">\
-	                                    <span class="marker" style="filter: hue-rotate(' + value["huerotate"] + 'deg); font-size: 16px;">' + (index + 1) + '</span>\
+	                                    <span class="marker" style="filter: hue-rotate(' +
+          value["huerotate"] +
+          'deg); font-size: 16px;">' +
+          (index + 1) +
+          '</span>\
 	                                </div>\
 	                                <div class="item result">\
-	                                    ' + res + '\
+	                                    ' +
+          res +
+          "\
 	                                </div>\
 	                            </div>\
 	                        </div>\
-							');
-			$("#search-addon .results .results-container").append(resHtml);
-			if (caller.results.length > 1) {
-				$(resHtml).click({ caller: caller }, function (event) {
-					event.data.caller.focusResult($(this).attr("data-resultNumber"));
-				});
-			}
-		});
-		$("#search-addon .results .results-container .start-route-service").each($.proxy(function (index, value) {
-			$(value).click($.proxy(function (event) {
-				this.resultsHistory.addItem(this.results[index]);
-			}, this));
-		}, this));
-		$("#search-addon .results .results-container .start-route-service").click({ caller: caller }, function () {
-			// We will add this result to the Local History 
-			caller.interactiveMap.switchModule("route-finding", { waypoints: [[parseFloat($(this).attr("data-lon")), parseFloat($(this).attr("data-lat"))]] });
-		});
-		$("#search-addon .results .results-container").show('slow', function () {
-			$("#search-addon .results .results-container").attr("data-status", "out");
-			if ($(window).outerWidth() <= 767) {
-				// On Mobiles we need a window to look through to the map
-				$("#search-addon .results .results-container").before("<div class=\"mobiles-window\"></div>");
-				$("#search-addon .results .mobiles-window").click({ caller: caller }, function (event) {
-					event.data.caller.mobilesWindowClick();
-				});
-				// The Search box got focussed on a mobile Let's get more Space
-				caller.addonWidth = $("#search-addon").outerWidth(true);
-				$("#search-addon").animate({ "margin": 0, "width": "100%" }, 'slow', $.proxy(function () {
-					$("#search-addon .results").css("border-radius", 0);
-					$("#search-addon .results").css("max-height", "95vh");
-					$("#search-addon .results").css("background-color", "transparent");
-					// Hide Zoombar on mobiles in results view
-					$(".ol-zoom, .ol-zoomslider").hide();
+							"
+      );
+      $("#search-addon .results .results-container").append(resHtml);
+      if (caller.results.length > 1) {
+        $(resHtml).click({ caller: caller }, function(event) {
+          event.data.caller.focusResult($(this).attr("data-resultNumber"));
+        });
+      }
+    });
+    $("#search-addon .results .results-container .start-route-service").each(
+      $.proxy(function(index, value) {
+        $(value).click(
+          $.proxy(function(event) {
+            this.resultsHistory.addItem(this.results[index]);
+          }, this)
+        );
+      }, this)
+    );
+    $("#search-addon .results .results-container .start-route-service").click(
+      { caller: caller },
+      function() {
+        // We will add this result to the Local History
+        caller.interactiveMap.switchModule("route-finding", {
+          waypoints: [
+            [
+              parseFloat($(this).attr("data-lon")),
+              parseFloat($(this).attr("data-lat")),
+            ],
+          ],
+        });
+      }
+    );
+    $("#search-addon .results .results-container").show("slow", function() {
+      $("#search-addon .results .results-container").attr("data-status", "out");
+      if ($(window).outerWidth() <= 767) {
+        // On Mobiles we need a window to look through to the map
+        $("#search-addon .results .results-container").before(
+          '<div class="mobiles-window"></div>'
+        );
+        $("#search-addon .results .mobiles-window").click(
+          { caller: caller },
+          function(event) {
+            event.data.caller.mobilesWindowClick();
+          }
+        );
+        // The Search box got focussed on a mobile Let's get more Space
+        caller.addonWidth = $("#search-addon").outerWidth(true);
+        $("#search-addon").animate(
+          { margin: 0, width: "100%" },
+          "slow",
+          $.proxy(function() {
+            $("#search-addon .results").css("border-radius", 0);
+            $("#search-addon .results").css("max-height", "95vh");
+            $("#search-addon .results").css("background-color", "transparent");
+            // Hide Zoombar on mobiles in results view
+            $(".ol-zoom, .ol-zoomslider").hide();
 
-					var height = $(window).outerHeight() - $(".results").outerHeight() - $("#search").outerHeight();
-					height = Math.max(height, 175);
-					$(".results .mobiles-window").css("height", height + "px");
-					this.updateResultMarker();
-					this.updateMapExtent();
-				}, caller));
-			} else {
-				caller.updateResultMarker();
-				caller.updateMapExtent();
-			}
-			// Let's make a new input-group-addon to cancel the search if it takes too long
-			var cancelSearch = $('\
+            var height =
+              $(window).outerHeight() -
+              $(".results").outerHeight() -
+              $("#search").outerHeight();
+            height = Math.max(height, 175);
+            $(".results .mobiles-window").css("height", height + "px");
+            this.updateResultMarker();
+            this.updateMapExtent();
+          }, caller)
+        );
+      } else {
+        caller.updateResultMarker();
+        caller.updateMapExtent();
+      }
+      // Let's make a new input-group-addon to cancel the search if it takes too long
+      var cancelSearch = $(
+        '\
 			    <div class="input-group-addon" id="delete-search" title="Suche abbrechen">\
 			        X\
 			    </div> \
-			');
-			$("#search input[name=q]").after(cancelSearch);
-			$(cancelSearch).click({ caller: caller }, function (event) {
-				event.data.caller.deleteSearch();
-				event.data.caller.interactiveMap.module.results = undefined;
-				event.data.caller.interactiveMap.module.results = undefined;
-				event.data.caller.interactiveMap.module.updateURL();
-			});
-		});
-	}
-}
+			'
+      );
+      $("#search input[name=q]").after(cancelSearch);
+      $(cancelSearch).click({ caller: caller }, function(event) {
+        event.data.caller.deleteSearch();
+        event.data.caller.interactiveMap.module.results = undefined;
+        event.data.caller.interactiveMap.module.results = undefined;
+        event.data.caller.interactiveMap.module.updateURL();
+      });
+    });
+  }
+};
 
-Results.prototype.focusResult = function (index) {
-	var results = this.results;
-	if (typeof results[index] !== "undefined") {
-		var newResults = results[index];
-		this.results = [newResults];
-		this.updateInterface();
-	}
-}
+Results.prototype.focusResult = function(index) {
+  var results = this.results;
+  if (typeof results[index] !== "undefined") {
+    var newResults = results[index];
+    this.results = [newResults];
+    this.updateInterface();
+  }
+};
 
-Results.prototype.updateResultMarker = function () {
-	var caller = this;
-	if (this.marker.length > 0) {
-		$.each(this.marker, function (index, value) {
-			value.remove();
-		});
-		this.marker = [];
-	}
-
-	$.each(this.results, function (index, value) {
-		var el = document.createElement('span');
-		el.id = index;
-		el.className = "marker";
-		el.setAttribute("data-resultNumber", index);
-		el.style.filter = "hue-rotate(" + value["huerotate"] + "deg)";
-		el.innerHTML = (index + 1);
-		//$('<span id="index" class="marker" data-resultNumber="' + index + '" style="filter: hue-rotate(' + value["huerotate"] + 'deg)">' + (index + 1) + '</span>');
-		if (caller.results.length > 1) {
-			$(el).click({ caller: caller }, function (event) {
-				event.data.caller.focusResult($(this).attr("data-resultNumber"));
-			});
-		}
-		caller.marker.push(new mapboxgl.Marker(el)
-			.setLngLat([value.lon, value.lat])
-			.addTo(caller.interactiveMap.map));
-	});
-}
+Results.prototype.updateResultMarker = function() {
+  var caller = this;
+  if (this.marker.length > 0) {
+    $.each(this.marker, function(index, value) {
+      value.remove();
+    });
+    this.marker = [];
+  }
 
+  $.each(this.results, function(index, value) {
+    var el = document.createElement("span");
+    el.id = index;
+    el.className = "marker";
+    el.setAttribute("data-resultNumber", index);
+    el.style.filter = "hue-rotate(" + value["huerotate"] + "deg)";
+    el.innerHTML = index + 1;
+    //$('<span id="index" class="marker" data-resultNumber="' + index + '" style="filter: hue-rotate(' + value["huerotate"] + 'deg)">' + (index + 1) + '</span>');
+    if (caller.results.length > 1) {
+      $(el).click({ caller: caller }, function(event) {
+        event.data.caller.focusResult($(this).attr("data-resultNumber"));
+      });
+    }
+    caller.marker.push(
+      new maplibregl.Marker(el)
+        .setLngLat([value.lon, value.lat])
+        .addTo(caller.interactiveMap.map)
+    );
+  });
+};
 
-
-Results.prototype.mobilesWindowClick = function () {
-	// Hide the Results Panel
-	$(".results .results-container").hide("fast");
-	var caller = this;
-	$(".results .mobiles-window").hide("fast", function () {
-		// Add the Possibility to come back to the list
-		var showList = $('\
+Results.prototype.mobilesWindowClick = function() {
+  // Hide the Results Panel
+  $(".results .results-container").hide("fast");
+  var caller = this;
+  $(".results .mobiles-window").hide("fast", function() {
+    // Add the Possibility to come back to the list
+    var showList = $(
+      '\
 			<div id="show-list" class="container">\
 				Liste anzeigen\
-			</div>');
-		$("#search-addon .results").append(showList);
-		$(showList).click({ caller: caller }, function (event) {
-			$("#show-list").hide('fast', function () {
-				$("#show-list").remove();
-			});
-			$(".results .results-container").show("fast");
-			$(".results .mobiles-window").show("fast", function () {
-				event.data.caller.updateMapExtent();
-			});
-		});
-		var padding = [
-			$("#search-addon").outerHeight(true) + 25,
-			25,
-			25,
-			25
-		];
-		caller.updateMapExtent(padding);
-	});
-}
+			</div>'
+    );
+    $("#search-addon .results").append(showList);
+    $(showList).click({ caller: caller }, function(event) {
+      $("#show-list").hide("fast", function() {
+        $("#show-list").remove();
+      });
+      $(".results .results-container").show("fast");
+      $(".results .mobiles-window").show("fast", function() {
+        event.data.caller.updateMapExtent();
+      });
+    });
+    var padding = [$("#search-addon").outerHeight(true) + 25, 25, 25, 25];
+    caller.updateMapExtent(padding);
+  });
+};
 
-Results.prototype.updateMapExtent = function (initPadding) {
-	if (this.results.length <= 0 || !this.moveMap) {
-		return;
-	}
-	var caller = this;
-	var extent = [null, null, null, null];
-	var valid = undefined;
-	// 1. We try to only zoom into Matching results
-	// 2. If no mathing result was found we zoom into all results
-	$.each(this.results, function (index, res) {
-		// We just focus on those results that have all the terms in the search query in it
-		var valid = true;
-		var words = caller.query.split(/\W+/);
-		$.each(words, function (index, value) {
-			if (res.display_name.toLowerCase().indexOf(value.toLowerCase()) === -1) {
-				valid = false;
-			}
-		});
-		if (!valid) return true;
-		var lon = parseFloat(res.lon);
-		var lat = parseFloat(res.lat);
-		if (extent[0] === null || extent[0] > lon) {
-			extent[0] = lon;
-		}
-		if (extent[1] === null || extent[1] > lat) {
-			extent[1] = lat;
-		}
-		if (extent[2] === null || extent[2] < lon) {
-			extent[2] = lon;
-		}
-		if (extent[3] === null || extent[3] < lat) {
-			extent[3] = lat;
-		}
-	});
-	if (extent[0] == null) {
-		// There is no Result which matches every search term
-		// So we will Zoom into every result
-		$.each(this.results, function (index, res) {
-			var lon = parseFloat(res.lon);
-			var lat = parseFloat(res.lat);
-			if (extent[0] === null || extent[0] > lon) {
-				extent[0] = lon;
-			}
-			if (extent[1] === null || extent[1] > lat) {
-				extent[1] = lat;
-			}
-			if (extent[2] === null || extent[2] < lon) {
-				extent[2] = lon;
-			}
-			if (extent[3] === null || extent[3] < lat) {
-				extent[3] = lat;
-			}
-		});
-	}
+Results.prototype.updateMapExtent = function(initPadding) {
+  if (this.results.length <= 0 || !this.moveMap) {
+    return;
+  }
+  var caller = this;
+  var extent = [null, null, null, null];
+  var valid = undefined;
+  // 1. We try to only zoom into Matching results
+  // 2. If no mathing result was found we zoom into all results
+  $.each(this.results, function(index, res) {
+    // We just focus on those results that have all the terms in the search query in it
+    var valid = true;
+    var words = caller.query.split(/\W+/);
+    $.each(words, function(index, value) {
+      if (res.display_name.toLowerCase().indexOf(value.toLowerCase()) === -1) {
+        valid = false;
+      }
+    });
+    if (!valid) return true;
+    var lon = parseFloat(res.lon);
+    var lat = parseFloat(res.lat);
+    if (extent[0] === null || extent[0] > lon) {
+      extent[0] = lon;
+    }
+    if (extent[1] === null || extent[1] > lat) {
+      extent[1] = lat;
+    }
+    if (extent[2] === null || extent[2] < lon) {
+      extent[2] = lon;
+    }
+    if (extent[3] === null || extent[3] < lat) {
+      extent[3] = lat;
+    }
+  });
+  if (extent[0] == null) {
+    // There is no Result which matches every search term
+    // So we will Zoom into every result
+    $.each(this.results, function(index, res) {
+      var lon = parseFloat(res.lon);
+      var lat = parseFloat(res.lat);
+      if (extent[0] === null || extent[0] > lon) {
+        extent[0] = lon;
+      }
+      if (extent[1] === null || extent[1] > lat) {
+        extent[1] = lat;
+      }
+      if (extent[2] === null || extent[2] < lon) {
+        extent[2] = lon;
+      }
+      if (extent[3] === null || extent[3] < lat) {
+        extent[3] = lat;
+      }
+    });
+  }
 
-	extent = [[extent[0], extent[1]], [extent[2], extent[3]]];
+  extent = [
+    [extent[0], extent[1]],
+    [extent[2], extent[3]],
+  ];
 
-	// Let's find out in what space of the map we need to fit this in:
-	// If Screen is not mobile the search results are 
-	var padding = {
-		top: 25,
-		right: 25,
-		bottom: 25,
-		left: 25
-	};
-	if (initPadding != undefined) {
-		padding = {
-			top: initPadding[0],
-			right: initPadding[1],
-			bottom: initPadding[2],
-			left: initPadding[3]
-		};
-	} else if ($(window).outerWidth() <= 767) {
-		// Padding Top:
-		padding.top = $("#search").outerHeight(true) + 15;
-		// Padding Bottom:
-		padding.bottom = $(window).outerHeight(true) - $("#search").outerHeight(true) - $(".results .mobiles-window").outerHeight(true);
-	} else {
-		padding.right += $("#search-addon").outerWidth(true);
-	}
-	caller.interactiveMap.map.fitBounds(extent, {
-		padding: padding,
-		duration: 600,
-		maxZoom: 18
-	});
-}
\ No newline at end of file
+  // Let's find out in what space of the map we need to fit this in:
+  // If Screen is not mobile the search results are
+  var padding = {
+    top: 25,
+    right: 25,
+    bottom: 25,
+    left: 25,
+  };
+  if (initPadding != undefined) {
+    padding = {
+      top: initPadding[0],
+      right: initPadding[1],
+      bottom: initPadding[2],
+      left: initPadding[3],
+    };
+  } else if ($(window).outerWidth() <= 767) {
+    // Padding Top:
+    padding.top = $("#search").outerHeight(true) + 15;
+    // Padding Bottom:
+    padding.bottom =
+      $(window).outerHeight(true) -
+      $("#search").outerHeight(true) -
+      $(".results .mobiles-window").outerHeight(true);
+  } else {
+    padding.right += $("#search-addon").outerWidth(true);
+  }
+  caller.interactiveMap.map.fitBounds(extent, {
+    padding: padding,
+    duration: 600,
+    maxZoom: 18,
+  });
+};
diff --git a/resources/assets/js/ReversePositionManager.js b/resources/assets/js/ReversePositionManager.js
index 8b461ab..d758528 100644
--- a/resources/assets/js/ReversePositionManager.js
+++ b/resources/assets/js/ReversePositionManager.js
@@ -16,7 +16,7 @@ ReversePositionManager.prototype.constructor = ReversePositionManager;
  * @param {Float} lat
  * @return {Array} adress
  */
-ReversePositionManager.prototype.getNearest = function (evt) {
+ReversePositionManager.prototype.getNearest = function(evt) {
   var pos = evt.lngLat;
   var url =
     "https://maps.metager.de/nominatim/reverse.php?format=json&lat=" +
@@ -29,38 +29,35 @@ ReversePositionManager.prototype.getNearest = function (evt) {
   var interactiveMap = this.interactiveMap;
   var caller = this;
   // Send the Request
-  $.get(url, function (data) {
+  $.get(url, function(data) {
     var popup = new NominatimParser(data).getHTMLResult();
     $(popup).addClass("reverse-popup");
     $(popup)
       .find("a.start-route-service")
-      .attr("onclick", "map.switchModule('route-finding', {waypoints: [[$(this).attr('data-lon'), $(this).attr('data-lat')]]}); $('.reverse-popup').parent().find('.mapboxgl-popup-close-button').click(); return false;");
+      .attr(
+        "onclick",
+        "map.switchModule('route-finding', {waypoints: [[$(this).attr('data-lon'), $(this).attr('data-lat')]]}); $('.reverse-popup').parent().find('.maplibregl-popup-close-button').click(); return false;"
+      );
     /*click({ caller: caller }, function (event) {
       event.data.caller.interactiveMap.switchModule("route-finding", {
         waypoints: [[data["lon"], data["lat"]]]
       });
     });*/
-    caller.createPopup(
-      pos,
-      popup
-    );
+    caller.createPopup(pos, popup);
   });
 };
 
-ReversePositionManager.prototype.createPopup = function (pos, html) {
-  new mapboxgl.Popup({ className: 'reverse-popup', maxWidth: "500px" })
+ReversePositionManager.prototype.createPopup = function(pos, html) {
+  new maplibregl.Popup({ className: "reverse-popup", maxWidth: "500px" })
     .setLngLat(pos)
     .setHTML(html.get(0).outerHTML)
     .addTo(this.interactiveMap.map);
 };
 
-ReversePositionManager.prototype.setActive = function (bool) {
+ReversePositionManager.prototype.setActive = function(bool) {
   this.interactiveMap.map.off("click", this.reverseClick);
   if (bool) {
     this.reverseClick = $.proxy(this.getNearest, this);
-    this.interactiveMap.map.on(
-      "click",
-      this.reverseClick
-    );
+    this.interactiveMap.map.on("click", this.reverseClick);
   }
-};
\ No newline at end of file
+};
diff --git a/resources/assets/js/Route.js b/resources/assets/js/Route.js
index 2530150..e277276 100644
--- a/resources/assets/js/Route.js
+++ b/resources/assets/js/Route.js
@@ -14,15 +14,15 @@ function Route(waypoints, vehicle, interactiveMap, callback, route) {
   this.addVehicleChangedEvent();
 }
 
-Route.prototype.switchActiveRoute = function (index) {
+Route.prototype.switchActiveRoute = function(index) {
   this.route.activeRoute = index;
   this.legs = this.extractLegs();
 };
 
-Route.prototype.extractLegs = function () {
+Route.prototype.extractLegs = function() {
   var result = [];
   var caller = this;
-  $.each(this.route.routes[this.route.activeRoute].legs, function (
+  $.each(this.route.routes[this.route.activeRoute].legs, function(
     index,
     value
   ) {
@@ -38,10 +38,10 @@ Route.prototype.extractLegs = function () {
   return result;
 };
 
-Route.prototype.addVehicleChangedEvent = function () {
+Route.prototype.addVehicleChangedEvent = function() {
   $("#route-finder-addon #vehicle-chooser input").change(
     { caller: this },
-    function (event) {
+    function(event) {
       event.data.caller.vehicle = $(this).attr("value");
       event.data.caller.deleteRoute();
       event.data.caller.interactiveMap.module.calculateRoute(
@@ -51,7 +51,7 @@ Route.prototype.addVehicleChangedEvent = function () {
   );
 };
 
-Route.prototype.estimateVehicle = function () {
+Route.prototype.estimateVehicle = function() {
   // This Function estimates the required vehicle for the route
   // All Distances < 2km will be by foot
   // All Distances < 10km by bike
@@ -63,15 +63,15 @@ Route.prototype.estimateVehicle = function () {
   else return "car";
 };
 
-Route.prototype.estimateRouteDistance = function () {
+Route.prototype.estimateRouteDistance = function() {
   var geojson = {
-    "type": "FeatureCollection",
-    "features": []
+    type: "FeatureCollection",
+    features: [],
   };
   // We will calculate the distance between every two waypoints
   var caller = this;
   var distance = 0;
-  $.each(this.waypoints, function (index, value) {
+  $.each(this.waypoints, function(index, value) {
     if (caller.waypoints[index + 1] === undefined) return 0;
     var c1 = [value.lon, value.lat];
     var c2 = [caller.waypoints[index + 1].lon, caller.waypoints[index + 1].lat];
@@ -81,50 +81,55 @@ Route.prototype.estimateRouteDistance = function () {
   return distance;
 };
 
-Route.prototype.pointDistance = function (p1, p2) {
+Route.prototype.pointDistance = function(p1, p2) {
   var unit = "K";
   var lat1 = p1[0];
   var lat2 = p2[0];
   var lon1 = p1[1];
   var lon2 = p2[1];
-  if ((lat1 == lat2) && (lon1 == lon2)) {
+  if (lat1 == lat2 && lon1 == lon2) {
     return 0;
-  }
-  else {
-    var radlat1 = Math.PI * lat1 / 180;
-    var radlat2 = Math.PI * lat2 / 180;
+  } else {
+    var radlat1 = (Math.PI * lat1) / 180;
+    var radlat2 = (Math.PI * lat2) / 180;
     var theta = lon1 - lon2;
-    var radtheta = Math.PI * theta / 180;
-    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
+    var radtheta = (Math.PI * theta) / 180;
+    var dist =
+      Math.sin(radlat1) * Math.sin(radlat2) +
+      Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
     if (dist > 1) {
       dist = 1;
     }
     dist = Math.acos(dist);
-    dist = dist * 180 / Math.PI;
+    dist = (dist * 180) / Math.PI;
     dist = dist * 60 * 1.1515;
-    if (unit == "K") { dist = dist * 1.609344 }
-    if (unit == "N") { dist = dist * 0.8684 }
+    if (unit == "K") {
+      dist = dist * 1.609344;
+    }
+    if (unit == "N") {
+      dist = dist * 0.8684;
+    }
     // Return it in meters instead kilometers
     return dist * 1000;
   }
-}
+};
 
-Route.prototype.calculateRoute = function () {
+Route.prototype.calculateRoute = function() {
   if (this.waypoints.length >= 2) {
     var p = true;
     if (typeof print == "bolean") p = print;
     var url = "";
-    $.each(this.waypoints, function (index, value) {
+    $.each(this.waypoints, function(index, value) {
       url += value.lon + "," + value.lat + ";";
     });
     url = url.replace(/;+$/, "");
     url = "/route/find/" + this.vehicle + "/" + url;
 
     /*
-		* We start calculating the route. Since an internet connection is mandatory for that task
-		* We will show the user the information that we currently calculate the route.
-		* If the network takes too long or throws an error we show that to the user and retry
-		*/
+     * We start calculating the route. Since an internet connection is mandatory for that task
+     * We will show the user the information that we currently calculate the route.
+     * If the network takes too long or throws an error we show that to the user and retry
+     */
     // Show the loading text
     $("#route-finder-addon #waypoint-list-container .wait-for-search").show(
       "fast"
@@ -139,7 +144,7 @@ Route.prototype.calculateRoute = function () {
     this.searching = $.ajax({
       url: url,
       dataType: "json",
-      success: $.proxy(function (data) {
+      success: $.proxy(function(data) {
         this.route = data;
         this.route.activeRoute = 0;
         this.printRoute();
@@ -163,7 +168,7 @@ Route.prototype.calculateRoute = function () {
         ).attr("disabled", false);
       }, this),
       timeout: timeout * 1000,
-      error: $.proxy(function (jqxr) {
+      error: $.proxy(function(jqxr) {
         // We encountered an error while trying to fetch the search results.
         // It can be an abortion error in case the user clicked abort, or a timeout/connection error
         // Only in the latter case we'll retry the search
@@ -172,24 +177,23 @@ Route.prototype.calculateRoute = function () {
             "#route-finder-addon #waypoint-list-container .wait-for-search .no-internet"
           ).show("slow");
           this.retrySearch = window.setTimeout(
-            $.proxy(function () {
+            $.proxy(function() {
               this.retrySearch = undefined;
               this.calculateRoute();
             }, this),
             1000
           );
         }
-      }, this)
+      }, this),
     }).always(
-      $.proxy(function () {
+      $.proxy(function() {
         this.searching = undefined;
       }, this)
     );
   }
 };
 
-Route.prototype.updateMapExtent = function (initPadding) {
-
+Route.prototype.updateMapExtent = function(initPadding) {
   if (this.geom !== undefined) {
     var padding = [66, 25, 25, 25];
     if (initPadding !== undefined) {
@@ -217,19 +221,19 @@ Route.prototype.updateMapExtent = function (initPadding) {
       top: padding[0],
       right: padding[1],
       bottom: padding[2],
-      left: padding[3]
-    }
+      left: padding[3],
+    };
     var coordinates = this.geom.coordinates;
-    var bounds = coordinates.reduce(function (bounds, coord) {
+    var bounds = coordinates.reduce(function(bounds, coord) {
       return bounds.extend(coord);
-    }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[1]));
+    }, new maplibregl.LngLatBounds(coordinates[0], coordinates[1]));
     this.interactiveMap.map.fitBounds(bounds, {
-      padding: padding
+      padding: padding,
     });
   }
 };
 
-Route.prototype.updateRouteInformation = function () {
+Route.prototype.updateRouteInformation = function() {
   var length = this.route.routes[this.route.activeRoute].distance;
   var distanceString = this.distanceString(length);
   $(
@@ -245,7 +249,7 @@ Route.prototype.updateRouteInformation = function () {
   this.interactiveMap.module.updateMobilesWindow();
 };
 
-Route.prototype.distanceString = function (length) {
+Route.prototype.distanceString = function(length) {
   var result = "";
   length = Math.floor(length);
 
@@ -276,7 +280,7 @@ Route.prototype.distanceString = function (length) {
   return result;
 };
 
-Route.prototype.durationString = function (duration) {
+Route.prototype.durationString = function(duration) {
   duration = Math.abs(duration);
   duration = Math.floor(duration);
   var result = "";
@@ -293,21 +297,21 @@ Route.prototype.durationString = function (duration) {
   return result;
 };
 
-Route.prototype.updateVehicle = function () {
+Route.prototype.updateVehicle = function() {
   // Uncheck the current vehicle
   $("#vehicle-chooser input[checked]").prop("checked", false);
   // Check the new one
   $("#vehicle-chooser input[value=" + this.vehicle + "]").prop("checked", true);
 };
 
-Route.prototype.printRoute = function () {
+Route.prototype.printRoute = function() {
   this.deleteRoute();
 
   var layers = this.interactiveMap.map.getStyle().layers;
   // Find the index of the first symbol layer in the map style
   var firstSymbolId;
   for (var i = 0; i < layers.length; i++) {
-    if (layers[i].type === 'symbol') {
+    if (layers[i].type === "symbol") {
       firstSymbolId = layers[i].id;
       break;
     }
@@ -320,28 +324,34 @@ Route.prototype.printRoute = function () {
     var altRouteColor = "#797979";
     var altRouteHoverColor = "#FF0000";
     for (var i = 0; i < this.route.routes.length; i++) {
-      if (i == this.route.activeRoute ||
-        (typeof this.route.routes[i]["available"] == "boolean" && !this.route.routes[i]["available"]))
+      if (
+        i == this.route.activeRoute ||
+        (typeof this.route.routes[i]["available"] == "boolean" &&
+          !this.route.routes[i]["available"])
+      )
         continue;
       var altgeojson = this.route.routes[i].geometry;
-      this.interactiveMap.map.addLayer({
-        'id': 'alt-route-' + i,
-        'type': 'line',
-        'source': {
-          'type': 'geojson',
-          'data': {
-            'type': 'Feature',
-            'geometry': altgeojson
-          }
+      this.interactiveMap.map.addLayer(
+        {
+          id: "alt-route-" + i,
+          type: "line",
+          source: {
+            type: "geojson",
+            data: {
+              type: "Feature",
+              geometry: altgeojson,
+            },
+          },
+          layout: {},
+          paint: {
+            "line-color": "#797979",
+            "line-opacity": 0.5,
+            "line-width": 5,
+          },
         },
-        'layout': {},
-        'paint': {
-          'line-color': '#797979',
-          'line-opacity': .5,
-          'line-width': 5
-        }
-      }, firstSymbolId);
-      this.previewRoutes.push('alt-route-' + i);
+        firstSymbolId
+      );
+      this.previewRoutes.push("alt-route-" + i);
       // For each alternative Route we will create a popup saying how much longer that route
       // would need to drive
       // The most complicated part about that is to calculate the correct position for this information
@@ -354,22 +364,26 @@ Route.prototype.printRoute = function () {
       var timeString = this.durationString(time);
       var popup = $(
         '\
-		    		<div id="popup-alt-route-' + i + '" class="ol-popup alternative-route" data-index="' + i + '" title="Klicken zum Auswählen der Alternativroute.">\
+		    		<div id="popup-alt-route-' +
+          i +
+          '" class="ol-popup alternative-route" data-index="' +
+          i +
+          '" title="Klicken zum Auswählen der Alternativroute.">\
 		    			<div id="popup-content">\
 		    				<font color="' +
-        (time > 0 ? "red" : "green") +
-        '">' +
-        (time > 0 ? "+" : "-") +
-        timeString +
-        "</font> <br /> <nobr>" +
-        this.route.routes[i].legs[0].summary +
-        "</nobr>\
+          (time > 0 ? "red" : "green") +
+          '">' +
+          (time > 0 ? "+" : "-") +
+          timeString +
+          "</font> <br /> <nobr>" +
+          this.route.routes[i].legs[0].summary +
+          "</nobr>\
 		    			</div>\
 		    		</div>"
       ).get(0).outerHTML;
-      var tmppopup = new mapboxgl.Popup({
-        'closeButton': true,
-        'closeOnClick': false
+      var tmppopup = new maplibregl.Popup({
+        closeButton: true,
+        closeOnClick: false,
       })
         .setLngLat(pos)
         .setHTML(popup)
@@ -378,21 +392,37 @@ Route.prototype.printRoute = function () {
       var caller = this;
 
       if (typeof this.popupCloseEvent == "undefined") {
-        this.popupCloseEvent = function (event) {
-          var tmpI = $($(this)[0]._content).find(".alternative-route").attr("data-index")
+        this.popupCloseEvent = function(event) {
+          var tmpI = $($(this)[0]._content)
+            .find(".alternative-route")
+            .attr("data-index");
           caller.route.routes[tmpI]["available"] = false;
           caller.printRoute();
-        }
+        };
       }
-      tmppopup.on('close', this.popupCloseEvent);
-      $("#popup-alt-route-" + i).mouseover({ caller: this, index: i }, function (event) {
-        event.data.caller.interactiveMap.map.setPaintProperty("alt-route-" + event.data.index, "line-color", altRouteHoverColor);
+      tmppopup.on("close", this.popupCloseEvent);
+      $("#popup-alt-route-" + i).mouseover({ caller: this, index: i }, function(
+        event
+      ) {
+        event.data.caller.interactiveMap.map.setPaintProperty(
+          "alt-route-" + event.data.index,
+          "line-color",
+          altRouteHoverColor
+        );
       });
-      $("#popup-alt-route-" + i).mouseout({ caller: this, index: i }, function (event) {
-        event.data.caller.interactiveMap.map.setPaintProperty("alt-route-" + event.data.index, "line-color", altRouteColor);
+      $("#popup-alt-route-" + i).mouseout({ caller: this, index: i }, function(
+        event
+      ) {
+        event.data.caller.interactiveMap.map.setPaintProperty(
+          "alt-route-" + event.data.index,
+          "line-color",
+          altRouteColor
+        );
       });
 
-      $("#popup-alt-route-" + i).click({ caller: this, index: i }, function (event) {
+      $("#popup-alt-route-" + i).click({ caller: this, index: i }, function(
+        event
+      ) {
         event.data.caller.switchActiveRoute(event.data.index);
         event.data.caller.printRoute();
         event.data.caller.updateRouteInformation();
@@ -401,24 +431,27 @@ Route.prototype.printRoute = function () {
     }
   }
   // This is gonna be the main route
-  this.interactiveMap.map.addLayer({
-    'id': 'route',
-    'type': 'line',
-    'source': {
-      'type': 'geojson',
-      'data': {
-        'type': 'Feature',
-        'geometry': this.geom
-      }
+  this.interactiveMap.map.addLayer(
+    {
+      id: "route",
+      type: "line",
+      source: {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          geometry: this.geom,
+        },
+      },
+      layout: {},
+      paint: {
+        "line-color": "rgb(255,128,0)",
+        "line-width": 5,
+        "line-opacity": 0.7,
+      },
     },
-    'layout': {},
-    'paint': {
-      'line-color': 'rgb(255,128,0)',
-      'line-width': 5,
-      'line-opacity': .7,
-    }
-  }, firstSymbolId);
-  this.previewRoutes.push('route');
+    firstSymbolId
+  );
+  this.previewRoutes.push("route");
 };
 
 /**
@@ -430,7 +463,7 @@ Route.prototype.printRoute = function () {
  * that is exactly in the center of that route part.
  * This will be the Position where we will display the Information for this alternative Route
  **/
-Route.prototype.calculateAlternativeRoutePopupPosition = function (
+Route.prototype.calculateAlternativeRoutePopupPosition = function(
   alternativeRoute
 ) {
   var parts = [];
@@ -441,16 +474,16 @@ Route.prototype.calculateAlternativeRoutePopupPosition = function (
   var ar1 = alternativeRoute.geometry.coordinates.slice();
   var caller = this;
   var pos = [];
-  $.each(ar1, function (index, value) {
+  $.each(ar1, function(index, value) {
     if (
       value[0] !==
-      caller.route.routes[caller.route.activeRoute].geometry.coordinates[
-      index
-      ][0] ||
+        caller.route.routes[caller.route.activeRoute].geometry.coordinates[
+          index
+        ][0] ||
       value[1] !==
-      caller.route.routes[caller.route.activeRoute].geometry.coordinates[
-      index
-      ][1]
+        caller.route.routes[caller.route.activeRoute].geometry.coordinates[
+          index
+        ][1]
     ) {
       pos = value.slice();
       return false;
@@ -460,7 +493,7 @@ Route.prototype.calculateAlternativeRoutePopupPosition = function (
   return pos;
 };
 
-Route.prototype.deleteRoute = function () {
+Route.prototype.deleteRoute = function() {
   // If there is a route calculation pending we need to abort it
   if (this.searching != undefined) {
     this.searching.abort();
@@ -472,7 +505,7 @@ Route.prototype.deleteRoute = function () {
   }
 
   var caller = this;
-  $.each(this.previewRoutes, function (index, value) {
+  $.each(this.previewRoutes, function(index, value) {
     caller.interactiveMap.map.removeLayer(value);
     caller.interactiveMap.map.removeSource(value);
   });
@@ -480,7 +513,7 @@ Route.prototype.deleteRoute = function () {
   this.previewRoutes = [];
   this.geom = undefined;
 
-  $.each(this.informationOverlays, function (index, value) {
+  $.each(this.informationOverlays, function(index, value) {
     if (typeof caller.popupCloseEvent != "undefined") {
       value.off("close", caller.popupCloseEvent);
     }
@@ -492,11 +525,11 @@ Route.prototype.deleteRoute = function () {
 
 /*
  * This Function does a whole lot of work for the Navigation Module
- * It'll read out the users current Position from the GpsManager 
+ * It'll read out the users current Position from the GpsManager
  * Then it'll commpare that Position to every Step the user has to take on the route to reach his destination.
  * The first Step that Matches the current Gps Location enough to be sure that the user is at that step will be returned.
-*/
-Route.prototype.calcPointOnRoute = function () {
+ */
+Route.prototype.calcPointOnRoute = function() {
   var r = this.route.routes[this.route.activeRoute];
   // Wir Ziehen einen Punkt auf den nächsten 4 Schritten in betracht
   // Wenn der Punkt dort nicht zu finden ist, müssen wir neu berechnen
@@ -506,18 +539,21 @@ Route.prototype.calcPointOnRoute = function () {
   var accuracy = this.interactiveMap.GpsManager.accuracy;
   $.each(
     r.legs,
-    $.proxy(function (legIndex, leg) {
+    $.proxy(function(legIndex, leg) {
       if (stepCounter >= 5) {
         return;
       }
       $.each(
         leg.steps,
-        $.proxy(function (stepIndex, step) {
+        $.proxy(function(stepIndex, step) {
           var stepGeom = turf.lineString(step.geometry.coordinates);
           var pt = turf.point(gpsPoint);
-          var pointOnStep = turf.nearestPointOnLine(stepGeom, pt, { units: 'kilometers' });
+          var pointOnStep = turf.nearestPointOnLine(stepGeom, pt, {
+            units: "kilometers",
+          });
           // We need to calculate the distance between the GPS-Point and the Point on the Route:
-          var distance = turf.distance(pt, pointOnStep, { units: 'kilometers' }) * 1000;
+          var distance =
+            turf.distance(pt, pointOnStep, { units: "kilometers" }) * 1000;
           if (distance > Math.max(accuracy, 30)) {
             // The Distance of the Point is too high to be on this route step
             stepCounter++;
@@ -532,14 +568,21 @@ Route.prototype.calcPointOnRoute = function () {
                 legIndex: legIndex,
                 stepIndex: stepIndex,
                 point: pointOnStep.geometry.coordinates,
-                distance: distance
+                distance: distance,
               };
             }
 
             // We need to know the distance to the end of the step to decide whether we check the next step, too
-            var lastPointOnStep = r.legs[legIndex].steps[stepIndex].geometry.coordinates[r.legs[legIndex].steps[stepIndex].geometry.coordinates.length - 1];
+            var lastPointOnStep =
+              r.legs[legIndex].steps[stepIndex].geometry.coordinates[
+                r.legs[legIndex].steps[stepIndex].geometry.coordinates.length -
+                  1
+              ];
             lastPointOnStep = turf.point(lastPointOnStep);
-            var d = turf.distance(pointOnStep, lastPointOnStep, { units: 'kilometers' }) * 1000;
+            var d =
+              turf.distance(pointOnStep, lastPointOnStep, {
+                units: "kilometers",
+              }) * 1000;
 
             // It could possibly be at the end of this step in that case we will see if we can go on to the next step
             if (d < Math.max(accuracy, 30)) {
@@ -559,7 +602,7 @@ Route.prototype.calcPointOnRoute = function () {
   return result;
 };
 
-Route.prototype.removeLeg = function () {
+Route.prototype.removeLeg = function() {
   // Remove The first Leg of the route
   if (this.legs.length <= 0) return;
   this.legs.shift();
@@ -585,7 +628,7 @@ Route.prototype.removeLeg = function () {
   }
 };
 
-Route.prototype.shiftStep = function () {
+Route.prototype.shiftStep = function() {
   // This function shifts the first step of this route and edits all necessary parameters
   if (this.legs.length == 0) return;
   this.legs[0].steps.shift();
@@ -615,7 +658,7 @@ Route.prototype.shiftStep = function () {
   }
 };
 
-Route.prototype.shiftStepStep = function () {
+Route.prototype.shiftStepStep = function() {
   // This Function will remove only the First Coordinate from the current step if there is a minimum of 3 left
   var route = this.route.routes[this.route.activeRoute];
   var leg = this.route.routes[this.route.activeRoute].legs[0];
@@ -640,19 +683,19 @@ Route.prototype.shiftStepStep = function () {
   }
 };
 
-Route.prototype.getFirstPoint = function () {
+Route.prototype.getFirstPoint = function() {
   var point = this.route.routes[this.route.activeRoute].legs[0].steps[0]
     .geometry.coordinates[0];
   return point;
 };
 
-Route.prototype.getNextPoint = function () {
+Route.prototype.getNextPoint = function() {
   var point = this.route.routes[this.route.activeRoute].legs[0].steps[0]
     .geometry.coordinates[1];
   return point;
 };
 
-Route.prototype.exit = function () {
+Route.prototype.exit = function() {
   this.deleteRoute();
   // Remove the change Listener
   $("#route-finder-addon #vehicle-chooser input").off();
diff --git a/resources/assets/js/RouteFinderSearchResults.js b/resources/assets/js/RouteFinderSearchResults.js
index c6a6180..b2f3dce 100644
--- a/resources/assets/js/RouteFinderSearchResults.js
+++ b/resources/assets/js/RouteFinderSearchResults.js
@@ -1,180 +1,225 @@
 function RouteFinderSearchResults(map, data, query) {
-	this.interactiveMap = map;
-	this.results = data;
-	this.query = query;
-	this.markerOverlays = [];
-	this.updateInterface();
+  this.interactiveMap = map;
+  this.results = data;
+  this.query = query;
+  this.markerOverlays = [];
+  this.updateInterface();
 }
 
-RouteFinderSearchResults.prototype.updateInterface = function () {
-	if (this.results.length > 0) {
-
-		this.deleteSearch();
-		var caller = this;
-		$.each(this.results, function (index, value) {
-			var res = (new NominatimParser(value)).getRouteFinderHtml().html();
-			var resHtml = $('\
-							<div class="container-fluid suggestion" data-resultNumber="'+ index + '">\
+RouteFinderSearchResults.prototype.updateInterface = function() {
+  if (this.results.length > 0) {
+    this.deleteSearch();
+    var caller = this;
+    $.each(this.results, function(index, value) {
+      var res = new NominatimParser(value).getRouteFinderHtml().html();
+      var resHtml = $(
+        '\
+							<div class="container-fluid suggestion" data-resultNumber="' +
+          index +
+          '">\
 	                            <div class="flex-container">\
 	                                <div class="item history">\
-	                                    <span class="marker" style="filter: hue-rotate(' + value["huerotate"] + 'deg); font-size: 16px;">' + (index + 1) + '</span>\
+	                                    <span class="marker" style="filter: hue-rotate(' +
+          value["huerotate"] +
+          'deg); font-size: 16px;">' +
+          (index + 1) +
+          '</span>\
 	                                </div>\
 	                                <div class="item result">\
-	                                    ' + res + '\
+	                                    ' +
+          res +
+          "\
 	                                </div>\
 	                            </div>\
 	                        </div>\
-							');
-			$("#route-finder-addon .results .results-container").append(resHtml);
-			$(resHtml).click({ caller: caller }, function (event) {
-				event.data.caller.interactiveMap.module.exitSearch(new NominatimParser(value));
-			});
-		});
-		var caller = this;
-		$("#route-finder-addon .results .results-container").show('slow', function () {
-			if ($(window).outerWidth() <= 767) {
-				// On Mobiles we need a window to look through to the map
-				$("#route-finder-addon .results .results-container").before("<div class=\"mobiles-window\"></div>");
-				$("#route-finder-addon .results .mobiles-window").click({ caller: caller }, function (event) {
-					event.data.caller.mobilesWindowClick();
-				});
-
-				var height = $(window).outerHeight() - $("#route-finder-addon .results .results-container").outerHeight() - $("#route-finder-addon > form").outerHeight();
-				height = Math.max(height, 175);
-				$("#route-finder-addon .results .mobiles-window").css("height", height + "px");
-			}
-			caller.updateResultMarker();
-			caller.updateMapExtent();
-		});
-	}
-}
-
-RouteFinderSearchResults.prototype.mobilesWindowClick = function () {
-	// Optimize the Interface for Full Screen View
-	$("#route-finder-addon .results .mobiles-window").hide("slow");
-	var caller = this;
-	$("#route-finder-addon .results .results-container").hide("slow", function () {
-		// Add the Possibility to come back to the list
-		var showList = $('\
+							"
+      );
+      $("#route-finder-addon .results .results-container").append(resHtml);
+      $(resHtml).click({ caller: caller }, function(event) {
+        event.data.caller.interactiveMap.module.exitSearch(
+          new NominatimParser(value)
+        );
+      });
+    });
+    var caller = this;
+    $("#route-finder-addon .results .results-container").show(
+      "slow",
+      function() {
+        if ($(window).outerWidth() <= 767) {
+          // On Mobiles we need a window to look through to the map
+          $("#route-finder-addon .results .results-container").before(
+            '<div class="mobiles-window"></div>'
+          );
+          $("#route-finder-addon .results .mobiles-window").click(
+            { caller: caller },
+            function(event) {
+              event.data.caller.mobilesWindowClick();
+            }
+          );
+
+          var height =
+            $(window).outerHeight() -
+            $("#route-finder-addon .results .results-container").outerHeight() -
+            $("#route-finder-addon > form").outerHeight();
+          height = Math.max(height, 175);
+          $("#route-finder-addon .results .mobiles-window").css(
+            "height",
+            height + "px"
+          );
+        }
+        caller.updateResultMarker();
+        caller.updateMapExtent();
+      }
+    );
+  }
+};
+
+RouteFinderSearchResults.prototype.mobilesWindowClick = function() {
+  // Optimize the Interface for Full Screen View
+  $("#route-finder-addon .results .mobiles-window").hide("slow");
+  var caller = this;
+  $("#route-finder-addon .results .results-container").hide("slow", function() {
+    // Add the Possibility to come back to the list
+    var showList = $(
+      '\
 			<div class="container show-list">\
 				Liste anzeigen\
-			</div>');
-		$("#route-finder-addon .history-container .results").append(showList);
-		$(showList).click({ caller: caller }, function (event) {
-			$("#route-finder-addon .history-container .results .show-list").hide('fast', function () {
-				$("#route-finder-addon .history-container .results .show-list").remove();
-			});
-			$("#route-finder-addon .results .results-container").show("slow");
-			$("#route-finder-addon .results .mobiles-window").show("slow", function () {
-				event.data.caller.updateMapExtent();
-			});
-		});
-
-		var paddingTop = $("#route-finder-addon form").outerHeight() + $("#route-finder-addon .history-container .results .show-list").outerHeight() + 50;
-		caller.updateMapExtent([paddingTop, 50, 50, 50]);
-	});
-
-}
-
-RouteFinderSearchResults.prototype.deleteSearch = function () {
-	$("#route-finder-addon .results .results-container").html("");
-	$("#route-finder-addon .results .mobiles-window").remove();
-	$("#route-finder-addon .results .history-container .show-list").remove();
-	var caller = this;
-	$.each(this.markerOverlays, function (index, value) {
-		value.remove();
-	});
-	this.markerOverlays = [];
-
-}
-
-RouteFinderSearchResults.prototype.updateResultMarker = function () {
-	var caller = this;
-	if (this.markerOverlays.length > 0) {
-		$.each(this.markerOverlays, function (index, marker) {
-			marker.remove();
-		});
-		this.markerOverlays = [];
-	}
-
-	// Rem
-
-	$.each(this.results, function (index, value) {
-		var el = document.createElement('span');
-		el.id = index;
-		el.className = "marker";
-		el.setAttribute("data-resultNumber", index);
-		el.style.filter = "hue-rotate(" + value["huerotate"] + "deg)";
-		el.innerHTML = (index + 1);
-		$(el).click({ caller: caller }, function (event) {
-			event.data.caller.interactiveMap.module.exitSearch(new NominatimParser(value));
-		});
-
-		var marker = new mapboxgl.Marker(el)
-			.setLngLat([value.lon, value.lat])
-			.addTo(caller.interactiveMap.map);
-
-		caller.markerOverlays.push(marker);
-	});
-}
-
-RouteFinderSearchResults.prototype.updateMapExtent = function (initPadding) {
-	if (this.results.length <= 0) {
-		return;
-	}
-	var caller = this;
-	var extent = [null, null, null, null];
-	$.each(this.results, function (index, res) {
-		// We just focus on those results that have all the terms in the search query in it
-		var valid = true;
-		var words = caller.query.split(/\W+/);
-		$.each(words, function (index, value) {
-			if (res.display_name.toLowerCase().indexOf(value.toLowerCase()) === -1) {
-				valid = false;
-			}
-		});
-		if (!valid) return true;
-		var lon = parseFloat(res.lon);
-		var lat = parseFloat(res.lat);
-		if (extent[0] === null || extent[0] > lon) {
-			extent[0] = lon;
-		}
-		if (extent[1] === null || extent[1] > lat) {
-			extent[1] = lat;
-		}
-		if (extent[2] === null || extent[2] < lon) {
-			extent[2] = lon;
-		}
-		if (extent[3] === null || extent[3] < lat) {
-			extent[3] = lat;
-		}
-	});
-
-	extent = new mapboxgl.LngLatBounds([extent[0], extent[1]], [extent[2], extent[3]]);
-
-	// Let's find out in what space of the map we need to fit this in:
-	// If Screen is not mobile the search results are 
-	var padding = [66, 25, 25, 25];
-	if (initPadding !== undefined) {
-		padding = initPadding;
-	} else if ($(window).outerWidth() <= 767) {
-		// Padding Top:
-		padding[0] += $("#route-finder-addon > form").outerHeight(true);
-		// Padding Bottom:
-		padding[2] += $(window).outerHeight(true) - $("#route-finder-addon > form").outerHeight(true) - $("#route-finder-addon .results .mobiles-window").outerHeight(true);
-	} else {
-		var paddingRight = 0;
-		paddingRight += $("#route-finder-addon").outerWidth(true);
-		padding[1] += paddingRight;
-	}
-
-	padding = {
-		top: padding[0],
-		right: padding[1],
-		bottom: padding[2],
-		left: padding[3]
-	};
-
-	caller.interactiveMap.map.fitBounds(extent, { padding: padding });
-
-}
\ No newline at end of file
+			</div>'
+    );
+    $("#route-finder-addon .history-container .results").append(showList);
+    $(showList).click({ caller: caller }, function(event) {
+      $("#route-finder-addon .history-container .results .show-list").hide(
+        "fast",
+        function() {
+          $(
+            "#route-finder-addon .history-container .results .show-list"
+          ).remove();
+        }
+      );
+      $("#route-finder-addon .results .results-container").show("slow");
+      $("#route-finder-addon .results .mobiles-window").show(
+        "slow",
+        function() {
+          event.data.caller.updateMapExtent();
+        }
+      );
+    });
+
+    var paddingTop =
+      $("#route-finder-addon form").outerHeight() +
+      $(
+        "#route-finder-addon .history-container .results .show-list"
+      ).outerHeight() +
+      50;
+    caller.updateMapExtent([paddingTop, 50, 50, 50]);
+  });
+};
+
+RouteFinderSearchResults.prototype.deleteSearch = function() {
+  $("#route-finder-addon .results .results-container").html("");
+  $("#route-finder-addon .results .mobiles-window").remove();
+  $("#route-finder-addon .results .history-container .show-list").remove();
+  var caller = this;
+  $.each(this.markerOverlays, function(index, value) {
+    value.remove();
+  });
+  this.markerOverlays = [];
+};
+
+RouteFinderSearchResults.prototype.updateResultMarker = function() {
+  var caller = this;
+  if (this.markerOverlays.length > 0) {
+    $.each(this.markerOverlays, function(index, marker) {
+      marker.remove();
+    });
+    this.markerOverlays = [];
+  }
+
+  // Rem
+
+  $.each(this.results, function(index, value) {
+    var el = document.createElement("span");
+    el.id = index;
+    el.className = "marker";
+    el.setAttribute("data-resultNumber", index);
+    el.style.filter = "hue-rotate(" + value["huerotate"] + "deg)";
+    el.innerHTML = index + 1;
+    $(el).click({ caller: caller }, function(event) {
+      event.data.caller.interactiveMap.module.exitSearch(
+        new NominatimParser(value)
+      );
+    });
+
+    var marker = new maplibregl.Marker(el)
+      .setLngLat([value.lon, value.lat])
+      .addTo(caller.interactiveMap.map);
+
+    caller.markerOverlays.push(marker);
+  });
+};
+
+RouteFinderSearchResults.prototype.updateMapExtent = function(initPadding) {
+  if (this.results.length <= 0) {
+    return;
+  }
+  var caller = this;
+  var extent = [null, null, null, null];
+  $.each(this.results, function(index, res) {
+    // We just focus on those results that have all the terms in the search query in it
+    var valid = true;
+    var words = caller.query.split(/\W+/);
+    $.each(words, function(index, value) {
+      if (res.display_name.toLowerCase().indexOf(value.toLowerCase()) === -1) {
+        valid = false;
+      }
+    });
+    if (!valid) return true;
+    var lon = parseFloat(res.lon);
+    var lat = parseFloat(res.lat);
+    if (extent[0] === null || extent[0] > lon) {
+      extent[0] = lon;
+    }
+    if (extent[1] === null || extent[1] > lat) {
+      extent[1] = lat;
+    }
+    if (extent[2] === null || extent[2] < lon) {
+      extent[2] = lon;
+    }
+    if (extent[3] === null || extent[3] < lat) {
+      extent[3] = lat;
+    }
+  });
+
+  extent = new maplibregl.LngLatBounds(
+    [extent[0], extent[1]],
+    [extent[2], extent[3]]
+  );
+
+  // Let's find out in what space of the map we need to fit this in:
+  // If Screen is not mobile the search results are
+  var padding = [66, 25, 25, 25];
+  if (initPadding !== undefined) {
+    padding = initPadding;
+  } else if ($(window).outerWidth() <= 767) {
+    // Padding Top:
+    padding[0] += $("#route-finder-addon > form").outerHeight(true);
+    // Padding Bottom:
+    padding[2] +=
+      $(window).outerHeight(true) -
+      $("#route-finder-addon > form").outerHeight(true) -
+      $("#route-finder-addon .results .mobiles-window").outerHeight(true);
+  } else {
+    var paddingRight = 0;
+    paddingRight += $("#route-finder-addon").outerWidth(true);
+    padding[1] += paddingRight;
+  }
+
+  padding = {
+    top: padding[0],
+    right: padding[1],
+    bottom: padding[2],
+    left: padding[3],
+  };
+
+  caller.interactiveMap.map.fitBounds(extent, { padding: padding });
+};
diff --git a/resources/assets/js/Waypoint.js b/resources/assets/js/Waypoint.js
index 8b1649a..264ba22 100644
--- a/resources/assets/js/Waypoint.js
+++ b/resources/assets/js/Waypoint.js
@@ -15,24 +15,26 @@ function Waypoint(lon, lat, nominatimParser, gpsManager, index, map) {
   this.evaluated = false;
 }
 
-Waypoint.prototype.evaluate = function () {
+Waypoint.prototype.evaluate = function() {
   var waypoint = this;
   return new Promise((resolve, reject) => {
     if (waypoint.lon !== undefined && waypoint.lat !== undefined) {
-      var el = document.createElement('span');
+      var el = document.createElement("span");
       el.className = "marker";
       el.setAttribute("data-resultNumber", waypoint.index);
       el.innerHTML = waypoint.charCode;
-      waypoint.marker = new mapboxgl.Marker(el)
-        .setLngLat([waypoint.lon, waypoint.lat]);
+      waypoint.marker = new maplibregl.Marker(el).setLngLat([
+        waypoint.lon,
+        waypoint.lat,
+      ]);
       waypoint
         .positionToAdress()
-        .then(data => {
+        .then((data) => {
           waypoint.data = new NominatimParser(data);
           waypoint.evaluated = true;
           resolve(waypoint);
         })
-        .catch(reason => {
+        .catch((reason) => {
           reject(reason);
         });
     } else if (waypoint.nominatimParser !== undefined) {
@@ -40,25 +42,29 @@ Waypoint.prototype.evaluate = function () {
       waypoint.lat = parseFloat(waypoint.nominatimParser.nominatimResult.lat);
       waypoint.data = waypoint.nominatimParser;
       waypoint.evaluated = true;
-      var el = document.createElement('span');
+      var el = document.createElement("span");
       el.className = "marker";
       el.setAttribute("data-resultNumber", waypoint.index);
       el.innerHTML = waypoint.charCode;
-      waypoint.marker = new mapboxgl.Marker(el)
-        .setLngLat([waypoint.lon, waypoint.lat]);
+      waypoint.marker = new maplibregl.Marker(el).setLngLat([
+        waypoint.lon,
+        waypoint.lat,
+      ]);
       resolve(waypoint);
     } else if (waypoint.gpsManager !== undefined) {
       waypoint.gpsManager
         .getLocation()
-        .then(location => {
+        .then((location) => {
           waypoint.lon = location.coords.longitude;
           waypoint.lat = location.coords.latitude;
-          var el = document.createElement('span');
+          var el = document.createElement("span");
           el.className = "marker";
           el.setAttribute("data-resultNumber", waypoint.index);
           el.innerHTML = waypoint.charCode;
-          waypoint.marker = new mapboxgl.Marker(el)
-            .setLngLat([waypoint.lon, waypoint.lat]);
+          waypoint.marker = new maplibregl.Marker(el).setLngLat([
+            waypoint.lon,
+            waypoint.lat,
+          ]);
           if (waypoint.index == 0) {
             waypoint.data = waypoint.gpsManager;
             waypoint.type = "gps";
@@ -67,17 +73,17 @@ Waypoint.prototype.evaluate = function () {
           } else {
             waypoint
               .positionToAdress()
-              .then(data => {
+              .then((data) => {
                 waypoint.data = new NominatimParser(data);
                 waypoint.evaluated = true;
                 resolve(waypoint);
               })
-              .catch(reason => {
+              .catch((reason) => {
                 reject(reason);
               });
           }
         })
-        .catch(reason => {
+        .catch((reason) => {
           reject(reason);
         });
     } else {
@@ -86,7 +92,7 @@ Waypoint.prototype.evaluate = function () {
   });
 };
 
-Waypoint.prototype.changeIndex = function (newIndex) {
+Waypoint.prototype.changeIndex = function(newIndex) {
   this.index = newIndex;
   this.charCode = String.fromCharCode(97 + newIndex).toUpperCase();
   $(this.resultHtml)
@@ -97,15 +103,14 @@ Waypoint.prototype.changeIndex = function (newIndex) {
     .find(".delete-waypoint")
     .attr("data-index", newIndex);
   this.marker.remove();
-  var el = document.createElement('span');
+  var el = document.createElement("span");
   el.className = "marker";
   el.setAttribute("data-resultNumber", this.index);
   el.innerHTML = this.charCode;
-  this.marker = new mapboxgl.Marker(el)
-    .setLngLat([this.lon, this.lat]);
+  this.marker = new maplibregl.Marker(el).setLngLat([this.lon, this.lat]);
 };
 
-Waypoint.prototype.positionToAdress = function (errorCount) {
+Waypoint.prototype.positionToAdress = function(errorCount) {
   errorCount = errorCount || 0;
   var pos = [this.lon, this.lat];
   var url = "/reverse/" + pos[0] + "/" + pos[1];
@@ -123,10 +128,10 @@ Waypoint.prototype.positionToAdress = function (errorCount) {
       return reject("Too many errors while fetching");
 
     fetch(url, { signal: signal, redirect: "manual", cache: "no-cache" })
-      .then(response => {
+      .then((response) => {
         clearTimeout(timeoutObj);
         if (response.status == 200) {
-          response.json().then(data => {
+          response.json().then((data) => {
             if (data.error) {
               this.positionToAdress(errorCount + 1)
                 .then(resolve)
@@ -141,7 +146,7 @@ Waypoint.prototype.positionToAdress = function (errorCount) {
             .catch(reject);
         }
       })
-      .catch(reason => {
+      .catch((reason) => {
         this.positionToAdress(errorCount + 1)
           .then(resolve)
           .catch(reject);
@@ -149,7 +154,7 @@ Waypoint.prototype.positionToAdress = function (errorCount) {
   });
 };
 
-Waypoint.prototype.getHtml = function () {
+Waypoint.prototype.getHtml = function() {
   if (this.evaluated) {
     if (this.resultHtml === null) {
       var description =
@@ -159,25 +164,25 @@ Waypoint.prototype.getHtml = function () {
       this.resultHtml = $(
         '\
 			<li class="wp" data-index="' +
-        this.index +
-        '">\
+          this.index +
+          '">\
 				<div class="waypoint">\
 					<div class="drag">\
 						<img src="/img/anfasser.png" width="30px" alt="drag here" />\
 					</div>\
 					<div class="marker">\
 						' +
-        this.charCode +
-        '\
+          this.charCode +
+          '\
 					</div>\
 					<div class="description">\
 						' +
-        description +
-        '\
+          description +
+          '\
 					</div>\
 					<div class="delete-waypoint" data-index="' +
-        this.index +
-        '">\
+          this.index +
+          '">\
 						<span class="glyphicon glyphicon-trash"></span>\
 					</div>\
 				</div>\
-- 
GitLab