Filter issues

New home Forums Pro Add-on Troubleshooting Filter issues

This topic contains 35 replies, has 3 voices, and was last updated by  boatsRus 55 minutes ago.

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #50139

    boatsRus
    Member

    Seems some of the more recent versions of maps has changed the way the Filter works, unfortunately for the worse. Choosing a Filter used to be an instantaneous action, but now takes “like forever” with a spinner down in the corner of the map (not a very user friendly location). What happened?

    The other issue is that Filter misbehaves if you click to an other page and then back. Scenario:
    – open map
    – choose a filter
    – open one of the infowindows
    – click on a link in the infowindow to visit some other page
    – click back
    At this point, the chosen filter still shows in the dropdown window but the page displays all markers.
    Desired behavior would be the have only those markers matching the filter showing.

    Undesired (but still better) behavior is to have the “All” choice showing in the dropdown (matchign the markers showing). This is better because now it only takes on click (plus long delay) to get the filtered view back. Now with the (incorrect) filter value showing, you first have to choose some other filter and then again the desired filter = two clicks and twice the long delay.

    🙁

    #50148

    Hi Hakan,

    Thanks for getting in touch.

    The new system for filtering markers on the server side has some significant performance and flexibility enhancements but does have a slight delay.
    That being said, the best way to improve this speed would be to upgrade your hosting to a more powerful server.

    To fix the issue with the category not filtering on page load, we will definitely add this in an update, but to achieve this in the meantime, this can be done by adding the following JavaScript to Maps > Settings > Advanced Settings > Custom JS:

    jQuery(document).ready(function($){
    jQuery(‘#wpgmza_filter_select’).trigger(‘change’);
    });

    Please let me know if this helps.

    Thanks for your time.

    Kind regards,
    Dylan

    #50160

    boatsRus
    Member

    Hi Dylan. Your claim that “performance has been significantly improved” but the user experience has deteriorated does not really compute? Upgrading a site just because of the filtering ofcourse does not make sense :-).

    Please at least make the end user pain a bit more bearable:
    – move the spinner to a more visible location (like middle of the map)
    – have the full UI react, either by greying out the map or perhaps greying out the filter check box (as the user will be focusing on that to do the filtering, that would send a visual indication to the user that something is going on)

    I’ll test the code and get back on that one.

    #50169

    Perry
    Moderator

    Hi Hakan

    The new filtering system is by design, I’m really sorry that the delay is so detrimental to your users experience but I’m afraid this is how the plugin will work for the foreseeable future.

    Previously we were doing all marker filtering inside the users browser (version 7.10.* and below). Doing filtering client side has a number of drawbacks:

    – Inconsistent behaviour when combining store locator, category filter and custom field filtering (where custom fields have always been server side)
    – When a large number of markers are present, filtering could cause the users browser to hang for several seconds or longer, particularly on less powerful devices
    – Powerful search features such as spatial indexing, fulltext search and many others are available through MySQL but not through JavaScript. Some of these technologies are already being used by the plugin, others are planned for the future. Unfortunately these features are just not available client side, at all

    The only benefit of doing filtering client side, off the top of my head, is that the filtering is faster (at least for sites with a small number of markers).

    On the other hand, server side filtering has a lot of strong advantages, we can perform:

    – Filtering on aggregated data (for Pro 8’s marker ratings system for instance)
    – Custom field filtering
    – Fulltext searches
    – Reliable character set handling (for searching on accents, agraves, etc.), filtering against other data sources (for Pro 8’s 3rd party integrations)
    – Extremely fast filtering on spatial data (for radial search, point in polygon etc.)

    And many, many others. In addition, unifying the filtering system has ironed out a great deal of filtering inconsistencies and bugs, which you may remember from earlier versions.

    The trade off for this is a slight delay as the search parameters go off to the server, whilst the server performs the search and returns the matching markers.

    I realise that this might feel like a step back in terms of responsivity but I can assure you that the trade offs are worth it, much more so in the long run as we start to take advantage of these database technologies.

    I can tell you that the filtering process itself actually takes up very little time at the moment, so any delays you’re experiencing will be due to:

    – HTTP / server overheads
    – WordPress overheads

    These two can be mitigated by

    – Upgrading your server,
    – Using a CDN, which will cache filtering results and work with our endpoints. This is how we achieve almost instantaneous filtering on the demos on this site.

    I just thought I’d let you know on that one as it does seem a bit counterintuitive from an end users point of view I’m sure 🙂

    If you could link us to the page on which this map appears, we’ll give you some code to grey out the specified controls whilst the plugin is loading. I will also log this on our feature request list. Thank you as always for your feedback!

    Kind regards
    – Perry

    #50174

    boatsRus
    Member
    This reply has been marked as private.
    #50179

    boatsRus
    Member

    Something wrong with the code, it seems?

    Attachments:
    You must be logged in to view attached files.
    #50184

    boatsRus
    Member

    Just to challenge you a little on the performance:
    – pingdom tools gives a 2.2sec load time for the full map page
    – changing the filter takes about 4 sec

    Go figure..

    #50204

    Perry
    Moderator

    Morning Hakan,

    Are you absolutely sure Cloudflare is configured correctly?

    If filtering requests are taking a whole four seconds, I don’t think Cloudflare is working as expected with those URL’s.

    Regarding that syntax error above, you need to use plain quotes instead of angle quotes. Please change them and you should find that will work.

    Kind regards
    – Perry

    #50207

    Hi Hakan,

    In regards to the UI changes you mentioned, could I kindly ask you to first add the following JavaScript to the custom JS:

    jQuery(document).ready(function(){
    jQuery('body').find('.wpgmza-preloader').after('<div id="wpgmza-preloader-background"></div>');
    });

    And then please add the following CSS:

    .wpgmza-preloader {
       top: 50%;
      left: 50%;
    }
    .wpgmza-preloader + #wpgmza-preloader-background {
      display: block;
      position: absolute;
      background: #333;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: .2;
      display: none;
      transition: all .12s ease-in-out;
    }
    
    .wpgmza-preloader[style*="block"] ~ #wpgmza-preloader-background {
      display: block !important;
    }

    This will center the loader in the middle of the map and will also show a semi-transparent overlay over the map while the loading is in progress, in order to indicate the loading process more clearly.

    Please let me know if this helps and works as expected.

    Thanks for your time.

    Kind regards,
    Dylan

    #50216

    boatsRus
    Member

    The spinner moved to the center of the map but the map is not greyed out and when I click to an other page and then back, the filter is not applied.

    #50225

    Hi Hakan,

    Thanks for the response.

    Please can you confirm that you have added this JS as it doesn’t seem to be showing on the frontend and this is the code that adds the overlay background:

    jQuery(document).ready(function(){
    jQuery('body').find('.wpgmza-preloader').after('<div id="wpgmza-preloader-background"></div>');
    });

    Please let me know if this helps.

    Thanks for your time.

    Best regards,
    Dylan

    #50236

    boatsRus
    Member
    This reply has been marked as private.
    #50261

    Hi Hakan,

    Thanks for the confirmation.

    It seems that code is being run before the map is initialized and that is why the overlay is not added.

    To fix this, could I kindly ask you to replace this code:

    jQuery(document).ready(function(){
    jQuery('body').find('.wpgmza-preloader').after('<div id="wpgmza-preloader-background"></div>');
    });

    With the following code:

    jQuery(window).load(function(){
    jQuery('body').find('.wpgmza-preloader').after('<div id="wpgmza-preloader-background"></div>');
    });

    Please let me know if this helps.

    Thanks for your time.

    Kind regards,
    Dylan

    #50263

    boatsRus
    Member

    Nope, did you test on your side?

    #50268

    boatsRus
    Member

    Actually, found that this suggestion on correctly filtering when returning back to a page was also flawed in 2 ways:

    jQuery(document).ready(function($){
    jQuery(‘#wpgmza_filter_select’).trigger(‘change’);
    });

    Firstly, the “document” needs to be changed to “window” for the function to ever be triggered and then it is incorrectly triggered when the page is first loaded and activates the spinner on the page even though it has already been correctly loaded.

Viewing 15 posts - 1 through 15 (of 36 total)

You must be logged in to reply to this topic.