diff --git a/resources/assets/css/offline-module.css b/resources/assets/css/offline-module.css
index deae1e0d572611e54ccdb158b3e9e178e31ce16d..168e20b1193c467da21dfea87c943c5d277fc94e 100644
--- a/resources/assets/css/offline-module.css
+++ b/resources/assets/css/offline-module.css
@@ -15,43 +15,37 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   border: 1px solid #dfdfdf;
   border-left: 0;
   border-right: 0;
 }
 
-#offline-addon .auto-updates>.option {
+#offline-addon .auto-updates > .option {
   margin: 10px;
   height: 20px;
 }
 
 #offline-addon .auto-updates .text {
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   text-align: center;
   padding: 10px 0;
   border-left: 1px solid #dfdfdf;
 }
 
-#offline-addon .area-downloading {
-  text-align: center;
-  padding: 10px 0;
-}
-
 #offline-addon .area-selection {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
-  padding: 10px 0;
 }
 
 #offline-addon .area-selection .download-information {
@@ -61,8 +55,8 @@
 #offline-addon .area-selection .text {
   margin: 0px 10px;
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 
 #offline-addon .area-selection #start-download {
@@ -77,24 +71,24 @@
   font-size: 11px;
 }
 
-#offline-addon>#heading {
+#offline-addon > #heading {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   background-color: #ff8000;
 }
 
-#offline-addon>#heading>.exit {
+#offline-addon > #heading > .exit {
   padding: 7px;
   color: white;
 }
 
-#offline-addon>#heading>.logo {
+#offline-addon > #heading > .logo {
   -ms-flex-item-align: center;
-  align-self: center;
+      align-self: center;
   padding: 7px;
 }
 
@@ -112,28 +106,23 @@
   color: #337ab7;
 }
 
-#offline-addon .add-area .downloaded-areas, #offline-addon .available-areas {
+#offline-addon .add-area .downloaded-areas,
+#offline-addon .available-areas {
   list-style-type: none;
   margin-bottom: 0;
 }
 
-#offline-addon .loading-areas, #offline-addon .no-areas {
-  text-align: center;
-  padding: 10px 0;
-}
-
 #offline-addon .download-progress {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin: 10px;
+  margin: 0 10px;
 }
 
-#offline-addon .download-progress>.progress {
+#offline-addon .download-progress > .progress {
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  margin: 0;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 
 #offline-addon .download-progress .abort {
@@ -141,12 +130,13 @@
   color: red;
 }
 
-#offline-addon .download-progress .downloaded-areas>div.placeholder, #offline-addon .available-areas>div.placeholder {
+#offline-addon .download-progress .downloaded-areas > div.placeholder,
+#offline-addon .available-areas > div.placeholder {
   text-align: center;
   padding-bottom: 5px;
 }
 
-#offline-addon .available-areas>div {
+#offline-addon .available-areas > div {
   display: none;
 }
 
@@ -155,8 +145,8 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   text-align: center;
   font-weight: bold;
   font-size: 12px;
@@ -168,52 +158,52 @@
   display: none;
 }
 
-#offline-addon .area>.texts {
+#offline-addon .area > .texts {
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 
-#offline-addon .area>.texts>.info {
+#offline-addon .area > .texts > .info {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   color: #777;
 }
 
-#offline-addon .area>.texts>.seperator {
+#offline-addon .area > .texts > .seperator {
   font-weight: bold;
   padding: 0 3px;
 }
 
-#offline-addon .area>.name {
+#offline-addon .area > .name {
   font-weight: bold;
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 
-#offline-addon .area>.inspect {
+#offline-addon .area > .inspect {
   padding: 0 20px;
   /* color: green; */
   font-size: 20px;
 }
 
-#offline-addon .area>.inspect>.glyphicon {
+#offline-addon .area > .inspect > .glyphicon {
   display: inline-block;
 }
 
-#offline-addon .area>.rename {
+#offline-addon .area > .rename {
   padding: 0 20px;
   /* color: green; */
   font-size: 20px;
 }
 
-#offline-addon .area>.rename>.glyphicon {
+#offline-addon .area > .rename > .glyphicon {
   display: inline-block;
 }
 
-#offline-addon .area>.remove {
+#offline-addon .area > .remove {
   cursor: pointer;
   padding: 5px;
   padding: 0 20px;
@@ -221,16 +211,16 @@
   font-size: 20px;
 }
 
-#offline-addon .area>.remove>.glyphicon {
+#offline-addon .area > .remove > .glyphicon {
   display: inline-block;
 }
 
-#offline-addon .area>.remove>span {
+#offline-addon .area > .remove > span {
   font-size: 17px;
   color: #777;
 }
 
-body>#selector {
+body > #selector {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -239,7 +229,7 @@ body>#selector {
   display: none;
 }
 
-body>#selector-accept {
+body > #selector-accept {
   position: absolute;
   bottom: 10px;
   right: 10px;
@@ -252,6 +242,7 @@ body>#selector-accept {
   display: none;
 }
 
-body>#selector-accept>span {
+body > #selector-accept > span {
   font-size: 27px;
-}
\ No newline at end of file
+}
+
diff --git a/resources/assets/js/map.js b/resources/assets/js/map.js
index b702e4ef0401b65bd936919f7e866e2c9e23f75a..3679baf091dac1b0efd1befac2a3276e50af295a 100644
--- a/resources/assets/js/map.js
+++ b/resources/assets/js/map.js
@@ -1,4 +1,4 @@
-function Map(type) { }
+function Map(type) {}
 
 function InteractiveMap(
   long = 9.841943417968748,
@@ -30,24 +30,22 @@ function InteractiveMap(
 InteractiveMap.prototype = Object.create(Map.prototype);
 InteractiveMap.prototype.constructor = InteractiveMap;
 
-InteractiveMap.prototype.initMap = function () {
-  mapboxgl.setRTLTextPlugin(
-    "https://tileserver.metager.de/mapbox-gl-rtl-text.js"
+InteractiveMap.prototype.initMap = function() {
+  maplibregl.setRTLTextPlugin(
+    "https://tileserver.metager.de/maplibre-gl-rtl-text.js"
   );
-  var map = new mapboxgl.Map({
+  var map = new maplibregl.Map({
     container: "map",
     style:
       "https://tileserver.metager.de/styles/osm-bright/style.json?optimize=true",
     hash: false,
     center: this.initPos,
     zoom: this.initZoom,
-    scrollZoom: false
+    scrollZoom: false,
   });
 
-
-
-  map.addControl(new mapboxgl.NavigationControl(), "bottom-left");
-  map.addControl(new mapboxgl.ScaleControl(), "bottom-right");
+  map.addControl(new maplibregl.NavigationControl(), "bottom-left");
+  map.addControl(new maplibregl.ScaleControl(), "bottom-right");
 
   /**
    * This is our custom scrollwheel function
@@ -56,18 +54,18 @@ InteractiveMap.prototype.initMap = function () {
   var caller = this;
   var timeout = undefined;
   var zoomChange = 0;
-  map.on("zoomend", function (event) {
+  map.on("zoomend", function(event) {
     if (typeof event.scrollZoom == "boolean" && event.scrollZoom) {
       if (typeof timeout != "undefined") {
         clearTimeout(timeout);
         timeout = undefined;
       }
-      timeout = setTimeout(function () {
+      timeout = setTimeout(function() {
         zoomChange = 0;
       }, 100);
     }
   });
-  $("#map").bind("wheel", function (event) {
+  $("#map").bind("wheel", function(event) {
     console.log("wheel");
     var delta = event.originalEvent.deltaY;
     if (delta < 0) {
@@ -85,8 +83,8 @@ InteractiveMap.prototype.initMap = function () {
         zoom: newZoom,
         around: map.unproject([
           event.originalEvent.clientX,
-          event.originalEvent.clientY
-        ])
+          event.originalEvent.clientY,
+        ]),
       },
       { scrollZoom: true }
     );
@@ -94,11 +92,11 @@ InteractiveMap.prototype.initMap = function () {
   return map;
 };
 
-InteractiveMap.prototype.scrollZoomHandler = function (event) {
+InteractiveMap.prototype.scrollZoomHandler = function(event) {
   console.log(event);
 };
 
-InteractiveMap.prototype.switchModule = function (name, args) {
+InteractiveMap.prototype.switchModule = function(name, args) {
   if (this.module !== null) {
     // Every Module must implement this method for deinitialization
     this.module.exit();
@@ -128,7 +126,7 @@ InteractiveMap.prototype.switchModule = function (name, args) {
   }
 };
 
-InteractiveMap.prototype.removeDownloadedAreas = function () {
+InteractiveMap.prototype.removeDownloadedAreas = function() {
   /**
    * Removes areas that might have been downloaded by our old app.
    * This Feature will be reworked and we want to clean up before the new app comes
@@ -140,7 +138,7 @@ InteractiveMap.prototype.removeDownloadedAreas = function () {
     var downloadedAreas = android.getDownloadedAreas(); // JSON.parse(android.getDownloadedAreas());
     downloadedAreas = JSON.parse(downloadedAreas);
     if (Object.keys(downloadedAreas).length > 0) {
-      $.each(downloadedAreas, function (index, value) {
+      $.each(downloadedAreas, function(index, value) {
         android.removeArea(index);
       });
       alert(