Add back markers on map

app/controllers/spaces_controller.rb

@@ -17,6 +17,7 @@ def index
     @space_count = @spaces.to_a.size
     @page_size = SPACE_SEARCH_PAGE_SIZE
     @spaces = @spaces.limit(@page_size)
+    @markers = @spaces.map(&:render_map_marker)
   end
 
   def show
@@ -113,14 +114,6 @@ def rect_for_spaces
     }
   end
 
-  def spaces_search
-    filter_spaces
-    @space_count = @spaces.to_a.size
-    @spaces = @spaces.limit(SPACE_SEARCH_PAGE_SIZE)
-
-    render_listing_and_markers_json
-  end
-
   def check_duplicates
     duplicates = duplicates_from_params
 
@@ -151,41 +144,12 @@ def fullscreen_images
 
   SPACE_SEARCH_PAGE_SIZE = 20
 
-  def render_listing_and_markers_json
-    view_as = params[:view_as]
-
+  def render_markers_json
     render json: {
-      listing: get_listing_json_for_view(view_as),
-      markers: get_marker_json_for_view(view_as)
+      markers: @spaces.map(&:render_map_marker)
     }
   end
 
-  def get_listing_json_for_view(view_as)
-    @experiences = FacilityReview::LIST_EXPERIENCES
-
-    facility_ids = params[:facilities]&.map(&:to_i) || []
-    @filtered_facilities = Facility.includes(:facility_categories).find(facility_ids)
-    @non_filtered_facilities = Facility.includes(:facility_categories).where.not(id: facility_ids)
-
-    spaces = preload_spaces_data_for_view(view_as)
-
-    @page_size = SPACE_SEARCH_PAGE_SIZE
-    render_to_string(
-      partial: "spaces/index/space_listings", locals: {
-        spaces:,
-        space_count: @space_count,
-        view_as:,
-        page_size: @page_size
-      }
-    )
-  end
-
-  def get_marker_json_for_view(view_as)
-    return [] unless view_as == "map"
-
-    @spaces.map(&:render_map_marker)
-  end
-
   def preload_spaces_data_for_view(view_as)
     # Fresh query to get all the data for the filtered and ordered spaces, without
     # the need to include all this data while filtering

app/javascript/controllers/mapbox_controller.js

@@ -62,20 +62,17 @@ export default class extends Controller {
     // { spaceId: mapBoxMarker }
     this.markers = {};
 
-    this.loadNewMapPosition();
+    this.loadMarkers();
   }
 
   disableCapsule(event) {
     let foundFilterToReset = false;
 
-    this.loadNewMapPosition();
+    this.loadMarkers();
     this.updateUrl();
   }
 
   updateUrl() {
-    const selectedLocation = this.selectedLocation();
-
-    this.setOrDeleteToUrl('location_bounds', selectedLocation);
   }
 
   resetUrlToRootPath() {
@@ -98,8 +95,13 @@ export default class extends Controller {
     window.history.replaceState(null, null, url);
   }
 
-  selectedLocation() {
-    return this.map.getBounds().toArray();
+  currentBounds() {
+    return {
+      northWestLat: this.map.getBounds().getNorthWest().lat,
+      northWestLng: this.map.getBounds().getNorthWest().lng,
+      southEastLat: this.map.getBounds().getSouthEast().lat,
+      southEastLng: this.map.getBounds().getSouthEast().lng
+    }
   }
 
 
@@ -170,7 +172,7 @@ export default class extends Controller {
   }
 
   runSearch() {
-    this.loadNewMapPosition();
+    this.loadMarkers();
     this.updateUrl();
   }
 
@@ -182,8 +184,8 @@ export default class extends Controller {
   }
 
   reloadPosition() {
-    this.loadNewMapPosition();
-    this.updateUrl();
+    const bounds = this.currentBounds();
+    this.submitNewBounds(bounds);
     this.searchAreaTarget.classList.add('hidden');
   }
 
@@ -243,29 +245,45 @@ export default class extends Controller {
   }
 
   geoNorgeAvgrensingsBoksToBoundingBox = (avgrensningsboks) => {
-    const [lng1, lat1] = avgrensningsboks[0];
-    const [lng2, lat2] = avgrensningsboks[2];
-    return [lng1, lat1, lng2, lat2];
+    const [northWestLng, northWestLat] = avgrensningsboks[1];
+    const [southEastLng, southEastLat] = avgrensningsboks[3];
+    return {
+      northWestLat,
+      northWestLng,
+      southEastLat,
+      southEastLng
+    };
   }
 
   moveMapToFitNorway() {
-    return this.storeBoundsAndMoveMapToFit([4.032154,57.628953,31.497974,71.269784])
+    return this.storeBoundsAndMoveMapToFit({
+      northWestLat: 4.032154,
+      northWestLng: 71.269784,
+      southEastLat: 31.497974,
+      southEastLng: 57.628953
+    })
   }
-  storeBoundsAndMoveMapToFit(bounds) {
 
-    const northWestLng = bounds[0];
-    const southEastLat = bounds[1];
-    const southEastLng = bounds[2];
-    const northWestLat = bounds[3];
-
-    this.northWestLatInputTarget.value = northWestLat;
-    this.northWestLngInputTarget.value = northWestLng;
-    this.southEastLatInputTarget.value = southEastLat;
-    this.southEastLngInputTarget.value = southEastLng;
+  storeBounds(bounds) {
+    this.northWestLatInputTarget.value = bounds.northWestLat;
+    this.northWestLngInputTarget.value = bounds.northWestLng;
+    this.southEastLatInputTarget.value = bounds.southEastLat;
+    this.southEastLngInputTarget.value = bounds.southEastLng;
+  }
 
+  submitNewBounds(bounds) {
+    this.storeBounds(bounds);
     this.formTarget.requestSubmit();
+  }
+
+  storeBoundsAndMoveMapToFit(bounds) {
 
-    this.map.fitBounds(bounds, {
+    this.submitNewBounds(bounds);
+
+    this.map.fitBounds([
+      bounds.northWestLng, bounds.northWestLat,
+      bounds.southEastLng, bounds.southEastLat
+    ], {
       padding: 0,
       animate: false
     }, {
@@ -278,13 +296,6 @@ export default class extends Controller {
     delete this.markers[key];
   }
 
-  buildSearchURL() {
-    return [
-      '/spaces_search'
-    ].join('');
-  }
-
-
   showErrorInListing(options) {
     const {message, error_html} = options
 
@@ -295,32 +306,18 @@ export default class extends Controller {
     </div>`
   }
 
-  async loadNewMapPosition() {
-
-    return console.log("Turned off map search")
-
-    const searchUrl = this.buildSearchURL()
-
-    const results = await fetch(searchUrl);
-    if (!results.ok) {
-      const error_html = await results.text();
-      return this.showErrorInListing({
-        message: "Ooops, noe har gått galt, prøv igjen?",
-        error_html: error_html
-      });
-    }
+  async loadMarkers() {
 
-    const spacesInRect = await results.json();
+    const new_markers = JSON.parse(this.element.dataset.markers) || [];
 
-    const { markers } = spacesInRect;
-    // Remove markers that are no longer relevant
+      // Remove markers that are no longer relevant
     Object.keys(this.markers).forEach((key) => {
-      if (markers.find((space) => space.id === key)) return;
+      if (new_markers.find((space) => space.id === key)) return;
       this.removeMarker(key);
     });
 
     // Add or update the ones we want to show:
-    markers.reverse().forEach((space) => {
+    new_markers.reverse().forEach((space) => {
       this.addMarker(space);
     });
   }

app/views/spaces/index.html.erb

@@ -1,6 +1,8 @@
 <div
   class="md:flex max-w-screen"
-  data-controller="mapbox" data-api-key="<%= ENV["MAPBOX_API_KEY"]%>" >
+  data-controller="mapbox"
+  data-api-key="<%= ENV["MAPBOX_API_KEY"]%>"
+  data-markers="<%= @markers.to_json %>">
   <nav
        class="fixed top-0 left-0 right-0 max-h-screen z-100 bg-white overflow-y-auto overscroll-contain
               md:static md:inset-auto md:z-10 md:h-screen-below-desktop-menu
@@ -34,6 +36,7 @@
         class="px-2 md:py-8 md:view-as-table:p-0 view-as-table:mt-16 md:view-as-table:mt-0 loading-spaces-when-empty">
         <%= render 'spaces/index/space_listings', view_as: "map", spaces: @spaces, space_count: @space_count, page_size: @page_size %>
       </div>
+
     </div>
     <div
       class="

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

@@ -1,22 +1,16 @@
 <%# locals: (view_as:, spaces:, space_count:, page_size: %>
 <% if spaces.any? %>
-  <% if view_as == "table" %>
-    <%= render "spaces/table_views/space_table_view",
-               spaces:,
-               space_count: @space_count, page_size: @page_size %>
-  <% else # default to map view %>
     <%= render 'spaces/index/space_listing_header', space_count: %>
     <ul id="space-list" class="flex flex-col gap-8">
       <% spaces.each do |space| %>
         <li><%= render "spaces/index/space_listing", space: space  %></li>
       <% end %>
     </ul>
     <%= render 'spaces/index/pagination', space_count:, page_size: %>
-  <% end %>
-
 <% else %>
   <div class="text-lnu-pink flex flex-col place-items-center place-content-center md:h-screen-2/3">
     <%= inline_svg_tag 'empty',  class: 'max-w-24 inline-block', alt: "" %>
     <span class="text-gray-800"><%= t('space_filter.spaces_that_might_work', count: 0 ) %></span>
   </div>
 <% end %>
+

config/routes.rb

@@ -53,7 +53,6 @@
   get "/nytt-lokale/", to: "spaces#new", as: "new_space"
   get "/lokaler/:id/edit/:field", to: "spaces#edit_field", as: "edit_field"
   get "/lokaler/:id/images/:start", to: "spaces#fullscreen_images", as: "fullscreen_images"
-  get "spaces_search", to: "spaces#spaces_search"
   get "rect_for_spaces", to: "spaces#rect_for_spaces"
   get "address_search", to: "spaces#address_search"
   get "check_duplicates", to: "spaces#check_duplicates"