Make sure map can be loaded again even though it is turbo permanent. …

…NB: It now reloads mapbox even though we kind of don't have to... I think storing the map somewhere global might help?

app/controllers/concerns/filterable_spaces.rb

@@ -19,7 +19,7 @@ def set_filtered_facilities
   end
 
   def filter_spaces
-    # set_filters_from_session_or_params
+    set_filters_from_session_or_params
 
     @spaces = spaces_from_facilities
 
@@ -31,7 +31,7 @@ def filter_spaces
     filter_by_title
     filter_by_space_types
 
-    #    store_filters_in_session
+    store_filters_in_session
   end
 
   def filter_by_title
@@ -79,15 +79,20 @@ def spaces_from_facilities
   end
 
   def any_filters_set?
-    filter_keys.any? { |key| params[key].present? }
+    filter_keys.detect { |key| params[key] }
+  end
+
+  def any_filters_stored_in_session?
+    session[:last_filter_params].present? &&
+      filter_keys.any? { |key| session[:last_filter_params][key].present? }
   end
 
   def store_filters_in_session
     session[:last_filter_params] = params_from_search
   end
 
   def filter_keys
-    %i[
+    %w[
       facilities
       space_types
       search_for_title
@@ -100,17 +105,31 @@ def filter_keys
 
   def set_filters_from_session_or_params
     return params_from_search if any_filters_set?
+    return params_from_session if any_filters_stored_in_session?
 
-    params_from_session
+    set_permitted_params
   end
 
   def params_from_session
     filter_keys.each do |key|
       params[key] = session[:last_filter_params][key]
     end
+    set_permitted_params
   end
 
   def params_from_search
-    params.permit(*filter_keys)
+    set_permitted_params
+  end
+
+  def set_permitted_params
+    remove_duplicate_params
+    params.permit(*filter_keys, facilities: [], space_types: [])
+  end
+
+  def remove_duplicate_params
+    # When a facility is in multiple facility categories, they are marked as duplicates
+    # using JS, by changing the name and id to start with 'duplicate_'.
+    # Here we filter them out as we don't need them in the back end:
+    params.delete_if { |key, _| key.to_s.start_with?("duplicate_") }
   end
 end

app/javascript/controllers/mapbox_controller.js

@@ -10,12 +10,19 @@ export default class extends Controller {
       "southEastLatInput",
       "southEastLngInput",
       "searchThisArea",
-      "markerContainer"
+      "markerContainer",
+      "mapContainer"
   ]
 
-  async initialize() {
+  initialize() {
     mapboxgl.accessToken = this.element.dataset.apiKey;
-    await this.runStoredFilters();
+    this.markers = {};
+    this.map = false;
+    this.resizeObserver = false;
+  }
+
+  connect() {
+    this.setUpMapAndMarkers();
   }
 
   markerContainerTargetConnected() {
@@ -26,6 +33,10 @@ export default class extends Controller {
     this.loadMarkers();
   }
 
+  async setUpMapAndMarkers() {
+    console.log("Setting up mapbox, this should only happen once")
+    await this.runStoredFilters();
+  }
 
   requestPosition() {
     const options = {
@@ -42,27 +53,57 @@ export default class extends Controller {
     });
   }
 
-  initializeMap(options) {
-    this.map = new mapboxgl.Map({
-      container: 'map-frame',
-      style: 'mapbox://styles/mapbox/streets-v11',
-      trackResize: true,
-      ...options,
-    });
+  async initializeMap(options) {
+    await this.mapContainerIsLoaded();
+    if (!this.map) {
+      this.map = new mapboxgl.Map({
+        container: 'map-frame',
+        style: 'mapbox://styles/mapbox/streets-v11',
+        trackResize: true,
+        ...options,
+      });
+      this.setupEventCallbacks();
+    } else {
+      console.log("Map already exists");
+      this.map.fitBounds(options.bounds)
+    }
 
-    // Set up a resize observer as well
-    const resizeObserver = new ResizeObserver(() => {
+    this.setUpResizeObserver();
+
+    this.markers = {};
+    this.loadMarkers();
+  }
+
+  setUpResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    this.resizeObserver = new ResizeObserver(() => {
       this.map.resize();
     });
-    resizeObserver.observe(document.getElementById('map-frame'));
-
-    this.setupEventCallbacks();
 
-    // Hash for storing markers, based on
-    // { spaceId: mapBoxMarker }
-    this.markers = {};
+    this.resizeObserver.observe(document.getElementById('map-frame'));
+  }
 
-    this.loadMarkers();
+  mapContainerIsLoaded() {
+    return new Promise((resolve) => {
+      if (this.hasMapContainerTarget) {
+        resolve()
+      } else {
+        const observer = new MutationObserver((mutations, obs) => {
+          if (this.hasMapContainerTarget) {
+            obs.disconnect()
+            resolve()
+          }
+        })
+
+        observer.observe(this.element, {
+          childList: true,
+          subtree: true
+        })
+      }
+    })
   }
 
   currentBounds() {
@@ -83,10 +124,10 @@ export default class extends Controller {
     const url = new URL(window.location);
 
     const bounds = {
-      northWestLat: url.searchParams.get('north_west_lat'),
-      northWestLng: url.searchParams.get('north_west_lng'),
-      southEastLat: url.searchParams.get('south_east_lat'),
-      southEastLng: url.searchParams.get('south_east_lng')
+      northWestLat: url.searchParams.get('north_west_lat') || this.northWestLatInputTarget.value,
+      northWestLng: url.searchParams.get('north_west_lng') || this.northWestLngInputTarget.value,
+      southEastLat: url.searchParams.get('south_east_lat') || this.southEastLatInputTarget.value,
+      southEastLng: url.searchParams.get('south_east_lng') || this.southEastLngInputTarget.value
     }
 
     const location_bounds_defined = !!bounds.northWestLat && !!bounds.northWestLng && !!bounds.southEastLat && !!bounds.southEastLng;
@@ -104,9 +145,6 @@ export default class extends Controller {
 
   boundsToMapBoxBounds(bounds) {
     const {northWestLat, northWestLng, southEastLat, southEastLng} = bounds;
-    if (!northWestLat) {
-      debugger
-    }
     return new mapboxgl.LngLatBounds(
       new mapboxgl.LngLat(northWestLng, northWestLat),
       new mapboxgl.LngLat(southEastLng, southEastLat)
@@ -263,7 +301,6 @@ export default class extends Controller {
   }
 
   async loadMarkers() {
-
     const new_markers = JSON.parse(this.markerContainerTarget.dataset.markers) || [];
 
       // Remove markers that are no longer relevant

app/views/spaces/index/_map.html.erb

@@ -4,8 +4,8 @@
                     } do %>
 <div
     class="w-full h-full md:h-full"
-    id="map-frame">
-  </div>
+    data-mapbox-target="mapContainer"
+    id="map-frame"></div>
 
   <div class="justify-center w-full flex hidden" data-mapbox-target="searchThisArea">
     <button