RailsMap - Dynamically updating markers using Ajax only upon search result alteration

Question

RailsMap - Dynamically updating markers using Ajax only upon search result alteration

Recently, I've been developing a small app with the assistance of stackoverflow. The main goal is to plot a list of locations onto a searchable/pannable google map. This type of functionality can be seen all over the web. The locations are stored on the backend and then passed to the view by the controller. AJAX is used to avoid reloading the entire page. Here are the scenarios: a) When a user searches for a location via zipcode, the map loads the new location, sends a search request to the server, displays any markers within a set radius, and sets a default zoom level; b) If the user pans or zooms around, the map stays at the user's chosen position, sends a search request with the viewport bounding box to the server, and maps the results. Initially, the map defaults to Seattle, and it attempts to geolocate the user...

By using the gmaps4rails wiki and leveraging a modified version of an answer from a question on stackoverflow (Google Maps for Rails - update markers with AJAX), I have come very close to achieving my goal. The solution works almost perfectly, but there is a minor hitch. Below is an excerpt of how it currently operates:

sightings_controller.rb


// Controller code here

search.html.haml


// HTML code here

search.js.erb


// JavaScript code here

map.js


// More JavaScript code here

The issue I'm encountering revolves around handling the markers when the user pans and zooms without changing the search result. Ideally, I want to avoid calling the "resetMarkers" function in these instances to prevent a flicker of markers on the screen. However, my attempts to achieve this have been unsuccessful so far.

I experimented with creating additional variables to compare old and new marker values, but encountered challenges with maintaining their state throughout the page lifecycle. Another approach involved resubmitting the old hash as a parameter with each search request and setting a flag, but this method felt convoluted.

If anyone has insights on a more effective approach or if there's something crucial I'm overlooking, your input would be greatly appreciated. Thank you!

javascript ruby-on-rails ajax gmaps4rails

Answer 1

Answer №1

Your issue arises from the comparison of two lists of markers to determine whether an update is necessary.

The challenge is that even though

_.isEqual(__oldmarkers, __markers)

conducts a thorough comparison, there could still be changes in Marker instances within your list, such as IDs or timestamps, that differ for identical points.
Alternatively, it's possible that initially both __markers and __oldMarkers are both null, making them equal and preventing entry into the if block.

In my opinion, conducting a deep comparison here might be too resource-intensive. A better approach would be to compare easily comparable elements, like the flat list of coordinates for each set of markers.

You could try something along these lines:

var __markers, __coordinates = [];
function resetMarkers(handler, json_array) 
{
  var coordinates = _.map(json_array, function(marker) {
    return String(marker.lat) + ',' + String(marker.lng);
  });

  if(_.isEqual(__coordinates.sort(), coordinates.sort()))
  {
    handler.removeMarkers(__markers);
    clearSidebar();
    clearZipcode();
    if (json_array.length > 0) 
    {
      __markers = handler.addMarkers(json_array);
      _.each(json_array, function(json, index){
        json.marker = __markers[index];
      });
      createSidebar(json_array);
    }
    __coordinates = coordinates;
  }
};

In this solution, both __coordinates and coordinates are simply arrays of strings, which can be quickly compared to provide the desired outcome.
To facilitate the comparison using _.isEqual, both arrays are sorted beforehand.

NB: The old code utilized _.difference, but that proved to be incorrect (refer to comments for further discussion)
(Note that I'm opting for _.difference, potentially more resource-intensive than _.isEqual but offering the benefit of independence from the order of returned markers.)

edit: Also, you can now cease including "oldHash" in the search query parameters ;)

Answer 2

Your issue arises from the comparison of two lists of markers to determine whether an update is necessary.

The challenge is that even though

_.isEqual(__oldmarkers, __markers)

conducts a thorough comparison, there could still be changes in Marker instances within your list, such as IDs or timestamps, that differ for identical points.
Alternatively, it's possible that initially both __markers and __oldMarkers are both null, making them equal and preventing entry into the if block.

In my opinion, conducting a deep comparison here might be too resource-intensive. A better approach would be to compare easily comparable elements, like the flat list of coordinates for each set of markers.

You could try something along these lines:

var __markers, __coordinates = [];
function resetMarkers(handler, json_array) 
{
  var coordinates = _.map(json_array, function(marker) {
    return String(marker.lat) + ',' + String(marker.lng);
  });

  if(_.isEqual(__coordinates.sort(), coordinates.sort()))
  {
    handler.removeMarkers(__markers);
    clearSidebar();
    clearZipcode();
    if (json_array.length > 0) 
    {
      __markers = handler.addMarkers(json_array);
      _.each(json_array, function(json, index){
        json.marker = __markers[index];
      });
      createSidebar(json_array);
    }
    __coordinates = coordinates;
  }
};

In this solution, both __coordinates and coordinates are simply arrays of strings, which can be quickly compared to provide the desired outcome.
To facilitate the comparison using _.isEqual, both arrays are sorted beforehand.

NB: The old code utilized _.difference, but that proved to be incorrect (refer to comments for further discussion)
(Note that I'm opting for _.difference, potentially more resource-intensive than _.isEqual but offering the benefit of independence from the order of returned markers.)

edit: Also, you can now cease including "oldHash" in the search query parameters ;)

RailsMap - Dynamically updating markers using Ajax only upon search result alteration

sightings_controller.rb

search.html.haml

search.js.erb

map.js

Answer №1

Similar questions

Access your account and modify the div section to display a personalized greeting like "welcome $username"

Selection auto-closing feature

Enhance the appearance of your custom Component in React Native by applying styles to Styled Components

When making a Wordpress ajax call, I am finding that the response is returning the entire page content instead

Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

What is the method to obtain the URL of the most popular tweet related to a hashtag using node.js?

Detect mousewheel movement in jQuery/JS without causing the page to scroll

Dynamically loading Ember templates with asynchronous requests

Creating Highcharts using data fetched from an Ajax call

Webpack simplifies the process of automatically loading external dependencies

What causes my ready function to consistently execute upon controller or directive reinitialization?

Navigating an array like a pro / Unraveling the mystery behind click event targets

What would be a colloquial method to retrieve the ultimate result from the iterator function?

Setting Django form value to match another form value in template

choose user by ticking the checkbox

The print function is being triggered before the partial view

Using JQuery to find the nearest element and narrowing down the search to its child elements

What is the best way to search for all results in MongoDB that have x appearing in any property?

Leverage the hidden glitch lurking within Vue

The recursion in the Lodash function has gone beyond the stack size limit