Remove infowindows from map

app/assets/javascripts/application.js.erb

@@ -43,14 +43,6 @@ function toggle_machine_data(name, id) {
   }
 }
 
-function clearInfoWindows() {
-  if (markers) {
-    for (i in markers) {
-      markers[i].getPopup().remove();
-    }
-  }
-}
-
 function clearMarkers() {
   if (markers) {
     for (i in markers) {
@@ -63,9 +55,8 @@ function clearClosest() {
   $(".mask").hide();
 }
 
-function showLocations(ids, lats, lons, contents, num_machines, latLng) {
+function showLocations(ids, lats, lons, num_machines, latLng) {
   clearMarkers();
-  clearInfoWindows();
   clearClosest();
   markers = new Array();
 
@@ -104,7 +95,7 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
     el.className = 'marker';
     el.innerHTML = '<span><b>' + num_machines[i] + '</b></span>';
 
-    if (contents.length > 1) {
+    if (locationIDs.length > 1) {
       (function (el, index) {
         var locationID = locationIDs[index];
 
@@ -113,7 +104,13 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
         el.innerHTML = '<span><b>' + num_machines[i] + '</b></span>';
         el.addEventListener('touchstart', function () {
           showLocationDetail(locationID);
-          showInfowindow(locationID);
+
+          var x = document.getElementsByClassName("marker2  maplibregl-marker maplibregl-marker-anchor-center");
+          var g;
+          for (g = 0; g < x.length; g++) {
+            x[g].className = "marker  maplibregl-marker maplibregl-marker-anchor-center";
+          }
+          el.className = 'marker2 maplibregl-marker maplibregl-marker-anchor-center';
 
           document.getElementById('location_detail_location_' + locationID).scrollIntoView(true);
           window.scrollBy(0, -140);
@@ -135,29 +132,25 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
       })(el, i);
     }
 
-    var popup = new maplibregl.Popup({ offset: 25 })
-      .setHTML(contents[i]);
-
     var marker = new maplibregl.Marker({element: el}, { anchor: 'center' })
       .setLngLat([lons[i], lats[i]])
-      .setPopup(popup)
       .addTo(map);
 
     markers.push(marker);
     bounds.extend([lons[i], lats[i]]);
   }
 
   if (mapAdjusted === 0) {
-    if (contents.length === 1) {
+    if (locationIDs.length === 1) {
       map.setZoom(18);
       map.setCenter([lons[0], lats[0]]);
       zoomCheck();
       if (document.getElementById("not_found")) {
         document.getElementById("not_found").style.display = "none";
       }
-    } else if (contents.length == 0 && latLng.length === 1) {
+    } else if (locationIDs.length == 0 && latLng.length === 1) {
       document.getElementById("map_canvas").innerHTML = "<p id='not_found' class='font28 red bold'>" + "NOT FOUND. PLEASE SEARCH AGAIN." + "<br />" + "Use the dropdown or the autocompleting textbox if you want results." + "</p>";
-    } else if (contents.length == 0 && latLng.length === 2) {
+    } else if (locationIDs.length == 0 && latLng.length === 2) {
       map.fitBounds(bounds, { padding: 50, animate: false });
       map.setZoom(18);
       zoomCheck();
@@ -331,12 +324,6 @@ function showLocationDetail(locationID) {
   }
 }
 
-function showInfowindow(locationID) {
-  var index = jQuery.inArray(locationID, locationIDs);
-  clearInfoWindows();
-  markers[index].togglePopup();
-}
-
 function backToResults() {
   $('.back_to_results').hide();
   $('.sub_nav_location').show("slide", { direction: "left" }, 400);

app/assets/stylesheets/application.scss.erb

@@ -3156,27 +3156,6 @@ div.score_list {
 
 /** Map API **/
 
-.maplibregl-popup {
-  max-width: 200px;
-  z-index: 500;
-}
-
-.maplibregl-popup-content {
-  overflow-y: auto;
-  max-height: 310px;
-  font-family: 'Open Sans', sans-serif;
-}
-
-.gm_location_name {
-  font-family: $Nunito_700Bold !important;
-  font-weight: normal !important;
-  font-size: 14px !important;
-}
-
-.infowindow {
-  color: black;
-}
-
 .marker {
   display: flex;
   justify-content: center;

app/assets/stylesheets/mobile-application.scss.erb

@@ -1272,11 +1272,6 @@ p.welcome {
   right: 0;
 }
 
-.maplibregl-popup-content {
-  max-height: 200px;
-  max-width: 250px;
-}
-
 /* Jump to top button */
 
 #top_button {

app/controllers/locations_controller.rb

@@ -1,7 +1,7 @@
 class LocationsController < InheritedResources::Base
   respond_to :xml, :json, :html, :js, :rss
   has_scope :by_location_name, :by_location_id, :by_ipdb_id, :by_opdb_id, :by_machine_id, :by_machine_single_id, :by_machine_name, :by_city_id, :by_state_id, :by_machine_group_id, :by_zone_id, :by_operator_id, :by_type_id, :by_at_least_n_machines, :by_at_least_n_machines_city, :by_at_least_n_machines_zone, :by_at_least_n_machines_type, :by_center_point_and_ne_boundary, :region, :by_is_stern_army, :user_faved, :manufacturer
-  before_action :authenticate_user!, except: %i[index show autocomplete autocomplete_city render_machines render_machines_count render_machine_names_for_infowindow render_scores render_last_updated render_location_detail render_former_machines render_recent_activity]
+  before_action :authenticate_user!, except: %i[index show autocomplete autocomplete_city render_machines render_machines_count render_scores render_last_updated render_location_detail render_former_machines render_recent_activity]
 
   def create
     @location = Location.new(location_params)
@@ -57,23 +57,6 @@ def render_machines_count
     render plain: location_machine_count
   end
 
-  def render_machine_names_for_infowindow
-    infowindow_machines = Location.find(params[:id]).machine_names.take(5).join('<br />')
-
-    total_num_machines = Location.find(params[:id]).machine_names.size
-
-    if total_num_machines > 5
-      the_rest = total_num_machines - 5
-      and_more_machines = '<br />' + '... and ' + the_rest.to_s + ' more'
-    else
-      and_more_machines = nil
-    end
-
-    new_infowindow_content = infowindow_machines + and_more_machines.to_s
-
-    render plain: new_infowindow_content
-  end
-
   def render_scores
     render partial: 'locations/render_scores', locals: { lmx: LocationMachineXref.find(params[:id]) }
   end
@@ -125,18 +108,16 @@ def self.locations_javascript_data(locations)
     ids = []
     lats = []
     lons = []
-    contents = []
     num_machines = []
 
     locations.each do |l|
       ids      << l.id
       lats     << l.lat
       lons     << l.lon
-      contents << l.content_for_infowindow
       num_machines << l.machines.size
     end
 
-    [ids, lats, lons, contents, num_machines]
+    [ids, lats, lons, num_machines]
   end
 
   def confirm

app/models/location.rb

@@ -150,25 +150,6 @@ def machine_ids
     machines.sort_by(&:massaged_name).map(&:id)
   end
 
-  def content_for_infowindow
-    content = "'<div class=\"infowindow\" id=\"infowindow_#{id}\">"
-    content += "<div class=\"gm_location_name\">#{name.gsub("'", "\\\\'")}</div>"
-    content += "<div class=\"gm_address\">#{[street.gsub("'", "\\\\'"), [city.gsub("'", "\\\\'"), state, zip].compact.split('').flatten.join(', ')].join('<br />')}</div>"
-    content += '<hr />'
-
-    machines = machine_names.take(5).map { |m| m.gsub("'", "\\\\'") + '<br />' }
-    total_num_machines = machine_names.size
-
-    content += "<div class=\"gm_machines\" id=\"gm_machines_#{id}\">#{machines.join}"
-    if total_num_machines > 5
-      the_rest = total_num_machines - 5
-      content += "<div>... and #{the_rest} more</div>"
-    end
-    content += "</div></div>'"
-
-    content.html_safe
-  end
-
   def recent_activity
     UserSubmission.where(submission_type: %w[new_lmx remove_machine new_condition new_msx confirm_location], location_id: self, created_at: '2019-05-03T07:00:00.00-07:00'..Date.today.end_of_day).order('created_at DESC').limit(30)
   end

app/views/location_machine_xrefs/_remove_machine.html.haml

@@ -11,9 +11,7 @@
       if (confirm("Remove this machine? Please do not remove and re-add the same machine because you want to clear out comments.")) {
         $('#machine_lmx_#{lmx.id}').fadeOut('slow', function() {
           updateLocationUpdatedText(#{lmx.location_id});
-          $('#gm_machines_#{lmx.location_id}').load('/locations/#{lmx.location_id}/render_machine_names_for_infowindow', function() {
-            $('#show_machines_location_count_#{lmx.location_id}').load('/locations/#{lmx.location_id}/render_machines_count', function() {});
-          });
+          $('#show_machines_location_count_#{lmx.location_id}').load('/locations/#{lmx.location_id}/render_machines_count', function() {});
         });
 
         $(this).callRemote();

app/views/locations/_locations.html.haml

@@ -3,15 +3,13 @@
   :javascript
 
     clearMarkers();
-    clearInfoWindows();
     $("#mapFollow_wrapper,#search_link_wrapper,#min_lookup_wrapper").removeClass("hide_button");
 
     showLocations(
       [#{@location_data[0].join(', ')}],
       [#{@location_data[1].join(', ')}],
       [#{@location_data[2].join(', ')}],
-      [#{@location_data[3].join(', ').html_safe}],
-      [#{@location_data[4].join(', ')}],
+      [#{@location_data[3].join(', ')}],
       [#{[@lat, @lon].join(', ')}]
     );
 
@@ -90,7 +88,7 @@
           %div.location_detail[l, :location_detail]
             = render :partial => 'locations/render_location_detail', :locals => {l: l}
         - else
-          %div.sub_nav_location[l, :show_location_detail]{:onclick => "showLocationDetail(#{l.id}); showInfowindow(#{l.id});"}
+          %div.sub_nav_location[l, :show_location_detail]{:onclick => "showLocationDetail(#{l.id});"}
             %div.name.bold.font22
               = l.name
             - if (l.location_type)
@@ -132,9 +130,3 @@
       %span
         #{@locations.size} Locations & #{total_num_machines} machines in results
       %span
-
-  - if (@locations.size == 1)
-    :javascript
-      $(function() {
-        showInfowindow(#{@locations.first.id});
-      });

app/views/locations/_render_add_machine.html.haml

@@ -27,11 +27,7 @@
 
     $.post(this.action, $(this).serialize(), function (data) {
       $('#show_machines_location_#{l.id}').load('/locations/#{l.id}/render_machines', function() {
-        $('#show_machines_location_count_#{l.id}').load('/locations/#{l.id}/render_machines_count', function() {
-          $('#gm_machines_#{l.id}').load('/locations/#{l.id}/render_machine_names_for_infowindow', function() {
-            updateLocationUpdatedText(#{l.id});
-          });
-        });
+        updateLocationUpdatedText(#{l.id});
       });
     });
 

config/routes.rb

@@ -141,7 +141,6 @@
       get :confirm
       get :render_add_machine
       get :render_update_metadata
-      get :render_machine_names_for_infowindow
       get :render_machines_count
       get :render_last_updated
       get :render_location_detail

spec/features/location_machine_xrefs_controller_spec.rb

@@ -45,7 +45,6 @@
         expect(location.reload.date_last_updated).to eq(Date.today)
 
         expect(find("#show_machines_location_#{location.id}")).to have_content(@machine_to_add.name)
-        expect(find("#gm_machines_#{location.id}")).to have_content(@machine_to_add.name)
         expect(find("#last_updated_location_#{location.id}")).to have_content("Last updated: #{Time.now.strftime('%b %d, %Y')}")
 
         expect(LocationMachineXref.where(location_id: location.id, machine_id: @machine_to_add.id).first.user_id).to eq(@user.id)
@@ -1055,20 +1054,6 @@
       end
     end
 
-    it 'escapes characters in location address for infowindow' do
-      screen_location = FactoryBot.create(:location, id: 54, region: @region, name: 'The Screen', street: "1600 St. Michael's Drive", city: "Sassy's Ville")
-      lmx = FactoryBot.create(:location_machine_xref, location: screen_location, machine: FactoryBot.create(:machine))
-      FactoryBot.create(:machine_condition, location_machine_xref: lmx, comment: 'cool machine description')
-
-      visit "/#{@region.name}/?by_location_id=#{screen_location.id}"
-      page.find("div#machine_tools_lmx_banner_#{lmx.id}").click
-
-      within('div.search_result') do
-        expect(page).to have_content('The Screen')
-        expect(page).to have_content('cool machine description')
-      end
-    end
-
     it 'has a machine dropdown with year and manufacturer if available' do
       FactoryBot.create(:location_machine_xref, location: FactoryBot.create(:location, id: 55, region: @region), machine: FactoryBot.create(:machine, name: 'foo', manufacturer: 'stern'))
       FactoryBot.create(:location_machine_xref, location: FactoryBot.create(:location, id: 56, region: @region), machine: FactoryBot.create(:machine, name: 'bar', year: 2000, manufacturer: 'bally'))

spec/models/location_spec.rb

@@ -123,21 +123,6 @@
     end
   end
 
-  describe '#content_for_infowindow' do
-    it 'generate the html that the infowindow wants to use' do
-      l = FactoryBot.create(:location)
-      ['Foo', 'Bar', 'Baz', "Beans'"].each { |name| FactoryBot.create(:location_machine_xref, location: l, machine: FactoryBot.create(:machine, name: name)) }
-
-      expect(l.content_for_infowindow.chomp).to eq("'<div class=\"infowindow\" id=\"infowindow_#{l.id}\"><div class=\"gm_location_name\">Test Location Name</div><div class=\"gm_address\">303 Southeast 3rd Avenue<br />Portland, OR, 97214</div><hr /><div class=\"gm_machines\" id=\"gm_machines_#{l.id}\">Bar<br />Baz<br />Beans\\'<br />Foo<br /></div></div>'")
-    end
-    it 'should only list first five machines' do
-      l = FactoryBot.create(:location)
-      %w[Foo Bar Baz Beans Sass Cleo].each { |name| FactoryBot.create(:location_machine_xref, location: l, machine: FactoryBot.create(:machine, name: name)) }
-
-      expect(l.content_for_infowindow.chomp).to eq("'<div class=\"infowindow\" id=\"infowindow_#{l.id}\"><div class=\"gm_location_name\">Test Location Name</div><div class=\"gm_address\">303 Southeast 3rd Avenue<br />Portland, OR, 97214</div><hr /><div class=\"gm_machines\" id=\"gm_machines_#{l.id}\">Bar<br />Baz<br />Beans<br />Cleo<br />Foo<br /><div>... and 1 more</div></div></div>'")
-    end
-  end
-
   describe '#massaged_name' do
     it 'ignores "the" in names' do
       the_location = FactoryBot.create(:location, name: 'The Hilt')