Add a "reset" button for filtering the map & auto filtering

[arthos]

Hey,

I have a map with agencies on it ; agencies are organized by type (categories). I have a filter above the map (thanks to your help).

First request : I cannot find a way to add a “reset” button to show all agencies (after having clicked on a filter button to show only a category). I added a button via jQuery, but wasn’t able to find a way to “link” it to the map reset. Is there one built-in that I didn’t see ?

Second request : is it possible to create a link that leads to the map page and activate only a category on the map ? e.g page.php?category=category_one and when the page loads, only the selected category is shown.

Thanks by advance.
Best regards.
Luc

[Perry]

Hi Luc

Thank you for your question, I hope this finds you well!

There should already be a reset button for the filter, are you using the store locator filter or the marker listing filter?

Regarding pre-selecting the category, yes that’s possible to do, you can use jQuery to extract the category data from the URL, prefill the category filter control and then programatically click the search button.

I’d be quite happy to provide the code for the latter if you need me to, if that is the case can you please provide me with the URL to the map page in question?

Kind regards
– Perry

[arthos]

Hey Perry,
Thanks for your quick answer.

No, I’m not using the store locator, just the marker listing filter (with checkboxes changed as radio button as seen in another post).

I’d be glad if you’d show me the code you’d use to make it work.

Thanks by advance.
L

[Perry]

Hi Luc

There should be an option for “All” in that filter, can you link me to your map page?

Kind regards
– Perry

[arthos]

This reply has been marked as private.

[Perry]

Hi Luc

I see this has been customised to use radio buttons rather than checkboxes.

You need to add a button that when clicked runs the following code:

InitMap(1, null, true)

This will cause the map to re-initialize,

Does that help?

Kind regards
– Perry

[arthos]

Ok, thanks for the tip.

And about prefilling the map with a parameter passed from another page ? 🙂

[Perry]

For that please do something like the following:

var m = window.location.href.match(/category=.+?(&|$)/);
if(m)
{
 var category = m[1];
 $("input[value='" + category + "']").prop("checked", true);
}

Does that help?

Kind regards
– Perry

[arthos]

Sorry, can’t make it work… :/

About the filter reset, it doesn’t seem to work (I tried with $(‘#wpgmza_table_1).DataTable().InitMap(1, null, true); too, with no luck):

$('#wpgmza_checkbox_all').on('click', function() {
  $('#wpgmza_table_1').InitMap(1, null, true);
});

About the automatic filter, this code doesn’t work:

var m = window.location.href.match(/\?agence=.+?(&|$)/);
if(m) {
  var agence = m[1];
  $("input[value='" + agence + "']").prop("checked", true);
}

I feel like I’m missing something dumb right here…

[Perry]

Hi there,

My apologies for the delay in responding, for some reason I didn’t get the e-mail notification for your reply,

Please remove the checkbox from that list item as it’s acting the same as checkbox 1.

Can you please give me an example URL regarding the category URL problem?

Kind regards
– Perry

[arthos]

This reply has been marked as private.

[Perry]

Hi Luc,

I meant the checkbox input itself, not the entire button 🙂 If you re-add that but remove the checkbox input element then that will work – I injected some HTML and tested this just now and can confirm that works just fine.

Can you try this in the second block:

var m = window.location.href.match(/\?agence=.+?(&|$)/);
if(m) {
  var agence = m[1];
  $("input[value='" + agence + "']").prop("checked", true).click();
}

Kind regards
– Perry

[arthos]

Ok, the reset filter works, thank you very much.

About the URL parameter, I’ve added some logs to the console :
console.log('AGENCE = ' + agence + ' - M = ' + m + ' - m[0] = ' + m[0] + ' - m[1] = ' + m[1]);

The result is :
AGENCE = - M = ?agence=2, - m[0] = ?agence=2 - m[1] =

I am too weak at regexes to be able to separate ‘?agence=’ from its value. May I ask for your help ?

[Perry]

Hi Luc

Yes by all means!

I logged into your site and added this code:

var m = window.location.href.match(/\?agence=(\d+)/);

if(m) {
  var agence = m[1];
  $("input[value='" + agence + "']").prop("checked", true).click();
}

I refreshed the page (with the cache disabled) and can confirm that’s now working.

Is there anything else you’d like changed?

Kind regards
– Perry

[arthos]

Thank you very much.

It’s working as asked, I can confirm your skills. 🙂
I’m fine with that, I hope the client will be too…

Best regards.
L

[Author]

Posts