diff --git a/resources/assets/js/OfflineModule.js b/resources/assets/js/OfflineModule.js
index 854bd2b585c57830c2d6a7360e288b3777258c3c..b3ffb9d0329f5e5624785fea89a46ecdaae1e2c2 100644
--- a/resources/assets/js/OfflineModule.js
+++ b/resources/assets/js/OfflineModule.js
@@ -1,10 +1,12 @@
-const EXTRACT_BOX_COLOR = "#ffb8eb";
+const EXTRACT_BOX_COLOR = "#00ff00";
 
 function OfflineModule(interactiveMap) {
   this.areaSelectionText =
     "Bewege die Karte, sodass das herunterzuladende Gebiet angezeigt wird und klicke rechts auf download.";
   this.interactiveMap = interactiveMap;
   this.areas = [];
+  this.downloadMaxLon = 4;
+  this.downloadMaxLat = 2.5;
 
   this.initializeInterface(this);
   this.addListeners(this);
@@ -136,7 +138,8 @@ OfflineModule.prototype.drawBoundingBox = function (
     layout: {},
     paint: {
       "fill-color": color, // TODO pick different color for each bounding box
-      "fill-opacity": 0.8
+      "fill-opacity": 0.3,
+      "fill-outline-color": color,
     },
     source: {
       type: "geojson",
@@ -152,8 +155,10 @@ OfflineModule.prototype.drawBoundingBox = function (
 };
 
 OfflineModule.prototype.clearBoundingBoxes = function (offlineModule) {
-  offlineModule.interactiveMap.map.removeLayer("extractBox"); // TODO adjust for multiple boxes with different ids
-  offlineModule.interactiveMap.map.removeSource("extractBox"); // TODO adjust for multiple boxes with different ids
+  if (offlineModule.interactiveMap.map.getLayer("extractBox") != undefined)
+    offlineModule.interactiveMap.map.removeLayer("extractBox"); // TODO adjust for multiple boxes with different ids
+  if (offlineModule.interactiveMap.map.getSource("extractBox") != undefined)
+    offlineModule.interactiveMap.map.removeSource("extractBox"); // TODO adjust for multiple boxes with different ids
 };
 
 function filesizeToString(filesize) {
@@ -282,13 +287,19 @@ OfflineModule.prototype.fitToBoundingBox = function (
   offlineModule,
   boundingBox
 ) {
+  var padding = {
+    top: $("#offline-addon").outerHeight() + 10,
+    right: 10,
+    bottom: 10,
+    left: 10,
+  };
   offlineModule.interactiveMap.map.fitBounds(
     [
       [boundingBox.minLon, boundingBox.minLat],
       [boundingBox.maxLon, boundingBox.maxLat]
     ],
     {
-      padding: 10,
+      padding: padding,
       linear: true
     }
   );
@@ -304,17 +315,11 @@ OfflineModule.prototype.startAreaSelection = function (offlineModule) {
 
   $("#start-download").show();
 
-  offlineModule.interactiveMap.map.on("touchend", function () {
-    offlineModule.selectedAreaChanged(offlineModule);
-  });
-  offlineModule.interactiveMap.map.on("mouseup", function () {
-    offlineModule.selectedAreaChanged(offlineModule);
-  });
+  offlineModule.interactiveMap.map.on("dragend", offlineModule.selectedAreaChanged.bind(this, offlineModule));
+  offlineModule.interactiveMap.map.on("touchend", offlineModule.selectedAreaChanged.bind(this, offlineModule));
 
   $("#offline-addon .exit").off();
   $("#offline-addon .exit").click(function () {
-    $(offlineModule.interactiveMap.map).off("touchend");
-    $(offlineModule.interactiveMap.map).off("mouseup");
     offlineModule.stopAreaSelection(offlineModule);
   });
 
@@ -331,11 +336,12 @@ OfflineModule.prototype.startAreaSelection = function (offlineModule) {
 OfflineModule.prototype.stopAreaSelection = function (offlineModule) {
   $("#offline-addon .downloaded-areas").show("slow");
   $("#offline-addon .area-selection").hide("slow");
+  offlineModule.clearBoundingBoxes(offlineModule);
   offlineModule.loadExtractList(offlineModule);
 
   offlineModule.addListeners(offlineModule);
-  $(offlineModule.interactiveMap.map).off("touchend");
-  $(offlineModule.interactiveMap.map).off("mouseup");
+  offlineModule.interactiveMap.map.off("dragend", offlineModule.selectedAreaChanged.bind(this, offlineModule));
+  offlineModule.interactiveMap.map.off("touchend", offlineModule.selectedAreaChanged.bind(this, offlineModule));
 };
 
 OfflineModule.prototype.selectedAreaChanged = function (offlineModule) {
@@ -346,15 +352,29 @@ OfflineModule.prototype.updateDownloadSizeExpectation = function (
   offlineModule
 ) {
   boundingBox = offlineModule.getBoundingBoxFromMap(offlineModule);
-  var expectedDownloadSize = offlineModule.androidConnector.getExpectedDownloadSize(
-    boundingBox
-  );
-  if (expectedDownloadSize >= 0) {
-    expectedDownloadSizeString = filesizeToString(expectedDownloadSize);
-    $(".download-information > .size").html(expectedDownloadSizeString);
-  } else {
-    $(".download-information > .size").html("Error");
+  offlineModule.clearBoundingBoxes(offlineModule);
+  if (boundingBox.maxLon - boundingBox.minLon == offlineModule.downloadMaxLon
+    || boundingBox.maxLat - boundingBox.minLat == offlineModule.downloadMaxLat) {
+    offlineModule.drawBoundingBox(offlineModule, boundingBox, EXTRACT_BOX_COLOR);
+  }
+
+  let url = "https://tileextractor.metager.de/api/extract-size/" + boundingBox.minLon + "/" + boundingBox.maxLon + "/" + boundingBox.minLat + "/" + boundingBox.maxLat;
+  if (typeof this.downloadSizeUpdate != "undefined") {
+    this.downloadSizeUpdate.abort();
+    this.downloadSizeUpdate = null;
   }
+  $("#offline-addon .download-information > .size").html("<img src='/img/ajax-loader.gif' alt='loading'></img>");
+  $("#offline-addon #start-download").hide("fast");
+  this.downloadSizeUpdate = $.get(url, function (data) {
+    $("#offline-addon #start-download").show("fast");
+    var size = parseInt(data);
+    if (size > 0) {
+      var expectedDownloadSizeString = filesizeToString(size);
+      $(".download-information > .size").html(expectedDownloadSizeString);
+    } else {
+      $(".download-information > .size").html("Error");
+    }
+  });
 };
 
 OfflineModule.prototype.startDownload = function (offlineModule, selectedArea) {
@@ -420,6 +440,17 @@ OfflineModule.prototype.reassureDownloadIfNoWireless = function (offlineModule)
 
 OfflineModule.prototype.getBoundingBoxFromMap = function (offlineModule) {
   var bbox_raw = offlineModule.interactiveMap.map.getBounds();
+  if (bbox_raw.getEast() - bbox_raw.getWest() > 4) {
+    //|| ) {
+    var tooMuch = bbox_raw.getEast() - bbox_raw.getWest() - 4;
+    bbox_raw.setNorthEast([bbox_raw.getEast() - (tooMuch / 2.0), bbox_raw.getNorth()]);
+    bbox_raw.setSouthWest([bbox_raw.getWest() + (tooMuch / 2.0), bbox_raw.getSouth()]);
+  }
+  if (bbox_raw.getNorth() - bbox_raw.getSouth() > 2.5) {
+    var tooMuch = bbox_raw.getNorth() - bbox_raw.getSouth() - 2.5;
+    bbox_raw.setNorthEast([bbox_raw.getEast(), bbox_raw.getNorth() - (tooMuch / 2.0)]);
+    bbox_raw.setSouthWest([bbox_raw.getWest(), bbox_raw.getSouth() + (tooMuch / 2.0)]);
+  }
   var bbox = {
     minLon: bbox_raw.getWest(),
     maxLon: bbox_raw.getEast(),