Rerun search when moving map, with a debounce

app/javascript/controllers/mapbox_controller.js

@@ -19,6 +19,7 @@ export default class extends Controller {
     this.markers = {};
     this.map = false;
     this.resizeObserver = false;
+    this.reloadMapDebouncer = false;
   }
 
   connect() {
@@ -172,6 +173,7 @@ export default class extends Controller {
   loadPositionOn(event) {
     this.map.on(event, () => {
       this.searchThisAreaTarget.classList.remove('hidden');
+      this.deboounceReloadMap(500);
     });
   }
 
@@ -181,6 +183,17 @@ export default class extends Controller {
     this.searchThisAreaTarget.classList.add('hidden');
   }
 
+  deboounceReloadMap(time) {
+    if (this.reloadMapDebouncer) {
+      clearTimeout(this.reloadMapDebouncer);
+    }
+
+    this.reloadMapDebouncer = setTimeout(() => {
+      this.reloadMapDebouncer = false;
+      this.reloadPosition();
+    }, time);
+  }
+
   addMarker(space) {
     // If marker is already added, then just update that element, otherwise, create a new one
     const element = this.markers[space.id]