[Resolved] Use an interactive Map as Search input in a View

[Author]

Posts

[Jaime]

Tell us what you are trying to do?
I have MapSVG plugin, in order to show a map where user can make a Region search (clicking on the map).
This region search should be related with a custom field called "Provincia". Each "Provincia" has a number ID (1,2,3... until 8)
So, if a user click in a Region, the search should work showing the items with the "Provincia".

I tried to insert this JS code in the MapSVG plugin (as the plugin support team told me: creating a field called "option_id" and assigning each ID number from "Provincias" to each map Region) but it seems not to work properly and I'm wondering of there is something i'm missing in relation to toolset.

function (e, mapsvg){
var region = this;
$('#wpv_control_select_wpcf-provincia').val(region.option_id);
}

Is there any documentation that you are following?
I looked, but I didn't found any similar topic in the support forum.

Is there a similar example that we can see?
Well, actually what I want is just a click map search.

What is the link to your site?
You can see the search online here:
hidden link

<!-- I'm sorry if I'm too assiduous to this support service, but I'm very lost with some questions. I want to thank you all the help you provide. Anyway, the good news is I'm almost finished my website and probably this is the last topic I open. Thanks a lot in advance for your incredible support so far.
🙂 -->

[Beda]

This is not related to Toolset.
The issue you face would still be there if Toolset would be disabled on the site.

The question is, how that plugin renders the (what kind of) results and what it needs to render that.
Then you just need to pass that information to the Plugin to render what you want.

It is not related to Toolset, because Toolset does not create that output, or integrate with.

If you'd want to have distance or address searches, using Toolset you'd rely on Toolset Maps instead.

If you can show me a technical example of what you try to achieve and where, I can maybe come up with some idea how to solve the issue, but as of now I see nothing that would be required to be solved, since neither the search, nor the output is made by Toolset, in this scenario.
In that case, it's like Toolset wouldn't be installed at all, as it does no affect the issue per se.

Please let me know if I miss a detail, thanks!

[Jaime]

Hi Beda.
I understand perfectly that this is probably not an issue with Toolset, but a problem of possible (or not) integration between two plugins.

As far as I can tell you right now, the issue is how to make the map working as a field integrated inside the toolset search. But as you told me we need to know how this plugin renders the information and what kind of information.

I have asked the MapSVG support team if they can provide me more detailed information. I'm waiting their answer (but they're not so fast as you...) and if there is something useful in their answer I'll come back to you.

Anyway. Actually, I don't need necessarily to use MapSVG, if I can solve my problem in another way with Toolset. I mean, do you have any idea of how could I insert an image with links related with the field "Provincia"?. If there is any suggestion, just tell me.

Thanks again for your patience, and always helpful answers. You and all the Toolset support team.
Great.

[Beda]

You mean, you want to use the Map of SVG maps Plugin, with it's clickable regions, and when clicking in such region, the ID given by SVG Maps to that region should be used in a Views Search?

This is theoretically possible with JS.
You'd insert a Custom field in your posts that stores the ID of each region it belongs to
That Custom Field would be added as a Query filter by URL parameter to the view in question.
Then instead of a Front End search, you'd insert the map.
A JS Script would grab the ID clicked, and produce a URL (current site/page with View, + URL parameter appended to find results in the Custom Field)

Clicking either creates the URL and reloads the page or you add a submit button that reloads the page (view) with the new URL parameter in the url attached.

That will then filter posts by ID stored in the Custom Field.

I am pretty sure to recall, Maps SVG allows you to wrap their maps regions in links, no?
If so, you could add a link to the page with View and appending the ID of the Maps SVG Region, clicking on it would also load the correct results

Is that what you want to achieve?

[Beda]

If above's true, what does following code output in the browser console:

function (e, mapsvg){
var region = this;

console.log(region);
}

If the code provided by the 3rd party is correct it should show the Region (ID) presumably.
Is this happening?
If yes, good, if not, then you'd need to ask the Developers how to get that ID with JS

Later we can update it to the URL.

[Jaime]

Beda, thanks a lot for your help.
But actually I hardly can understand what you're trying to explain to me. Sorry, but my code knowledge is null.
Anyway, I'll try to answer you as comprehensive as I can.

-> "You mean, you want to use the Map of SVG maps Plugin, with it's clickable regions, and when clicking in such region, the ID given by SVG Maps to that region should be used in a Views Search?"

· Yes, that's exactly what I'm trying to do. 🙂

-> "You'd insert a Custom field in your posts that stores the ID of each region it belongs to
That Custom Field would be added as a Query filter by URL parameter to the view in question.
Then instead of a Front End search, you'd insert the map.
A JS Script would grab the ID clicked, and produce a URL (current site/page with View, + URL parameter appended to find results in the Custom Field)

Clicking either creates the URL and reloads the page or you add a submit button that reloads the page (view) with the new URL parameter in the url attached.

That will then filter posts by ID stored in the Custom Field."

· Here is where I'm getting lost. I can follow you, but not 100%.

-> " I am pretty sure to recall, Maps SVG allows you to wrap their maps regions in links, no?
If so, you could add a link to the page with View and appending the ID of the Maps SVG Region, clicking on it would also load the correct results"

· Yes, MapSVG let me introduce links for each region. This was my first approach. But the problem was that if I insert an url I only can filter by "Region" and no other fields. I mean, the link launch the search only for the posts with the Region selected (works all right) but I can't search by "Region" and "Category" (for example) because the url not includes the "Category" filter.

-> "what does following code output in the browser console:"

· It gives me an error. Uncaught SyntaxError: Function statements require a function name.

-> "If yes, good, if not, then you'd need to ask the Developers how to get that ID with JS"

· I think I've done this yet. This was their answer, which I follow step by step.

///

The code is very simple - put it in "Menu -> Javascript -> Region -> click.region":

function (e, mapsvg){
var region = this;
$('#wpv_control_select_wpcf-provincia').val(region.option_id);
}

Also crate a new text field in "Menu -> Regions -> Edit fields", give it a name "option_id" (save fields on this step), open "Menu -> Regions -> List" and fill a new field with the values of the related select options. For example "Cádiz" option in your select have value 2, so put this value in the "Cádiz" region "option_id" field.

///

Beda, as you can see I'm pretty lost. If you want to continue helping me I'll be more than happy. But if you consider I should ask for some coding work, I'll understand perfectly.

Thanks one more time for your support.
It's the best support i've ever had. Truly.
🙂

[Beda]

The JS code provided hence is not working.

I do not know how to get the ID of a Maps region by SVG maps on what JS event, the Author seems to have provided you the code but it is not working.

I understand your point that you need to filter also by other fields, hence you cannot use direct links in SVG Maps areas.

However now that you elaborate on what they replied, it just shows how to create a custom field in the SVG Maps plugin, NOT in Toolset (and that is what you need to make a searchable list).
Also, it shows how to get and update maps ID's using SVG Maps, NOT Toolset fields or events.

I think we need to start differently here.

I understand your goal AND your struggle, due to this:
hidden link (rotate the globe to find clickable region, then click to get to map)
It's a very rudimentary setup using only custom code.
It is reflected in this Custom Plugin too, which allows doing what you see on the above link: hidden link
Just sharing this as it might be of use to you, and also to express my understanding in the process - it's not so simple.

Let's go thru it step by step.

Do you have a staging site?
If not, it's time to set one up.
Preferably only with Toolset (Views and Types), and your SVG Maps Plugin

Prepare a map as you show me, and prepare a Single Line Field (Types Custom Field) for the Post Type in which you will search.
Make sure, that a few of the posts have actually a value in that Single Line Field:
The ID of each region on the Map it represents.

Later send me login details to that site and if possible allow me to make any changes required to wrap my head around SVG maps again.
As you see above, I forcedly sooner or later used it too, but it's a not that fresh anymore in my memory.

As soon I know what the maps region return, and how to get that data, I'll communicate it to you so to create the Views and setups needed, for this untypical search

From there, you can replicate that on any live site.

Does that sound like a plan?
Activating private reply modes for the private data if so 🙂

[Beda]

I've updated WordPress and I'd suggest switching Theme and disable the plugins that aren't Toolset, if that's OK, because of the cleaner the slate the better to work on.
We don't need Page builders, cache, or other features just yet
(Well, the SVG Maps plugin, please leave that 🙂 )

I see you use Relevannsi, this is why the field's setup asked you stuff about using it in the search - please ignore it for now, given Relevannsi is not needed for the use case.

I couldn't find values in the fields of the first post you mentioned, ID-region-field is empty, but I see you added numeric ID values to some of the Location posts.
Those ID's match the exact area ID of the SVG map, right?
Like, "Gran Teatro Falla" is in SVG Map Area "2"?
You say "The numbers correspond with the ID value of the "Provincia" field, included in the CPT ", but that field is a word, not a number, in your install, like "Cadiz". I assume you mean the ID of the svg map, right?
You seem to confirm that with "Also those values correspond with the values the SVG Map plugin support team told me to introduce in the field I created, called "option_id". (The one in the support team ticket I pasted you before)."

Now, to the feature itself.

1. You can get the ID of the Area clicked with the code below:

function (e, mapsvg){
  var region = this;
  console.log(region);
}

2. The ID of those regions are not numbered, they are values like ES-CO. So that is what we need to store in the Custom Post Fields, exactly matching, because otherwise, we cannot match the clicked area to a found search result, right?
3. From here on, it's simple. console.log(region); returns a whole opbject of the region, and we want only the ID, so we get just the ID:

function (e, mapsvg){
  var region = this;
  console.log(region.id);
}

BTW; the JS code I insert here: hidden link, in the "click.region" event.
Now when clicking the maps' regions, the console tells you the ID's, right?

What we need now, is just pushing that to a new URL parameter, so the View can listen to it, and filter.
The URL parameter I added in Views for this field is:
ID-region-field es un/a cadena igual a URL_PARAM(areaid)

Hence, we can push with JS the ID we get on click from the map, to the URL paramater "?areaid="
The view will then listen to that.

The final code is:

function (e, mapsvg){
  var region = this.id;
  //console.log(region.id);
  var pageUrl = '?areaid=' + region;
	window.history.pushState('', '', pageUrl);
}

It creates a ?areaid=ID-ID url attribute where ID-ID is the ID of the area you clicked.
If you now click in an area at hidden link, it will update the URl with hidden link, for example.

If you have any posts with the Field saving ES-CO, and search in that view by ?areaid=ES-CO, it'll find that one post, see hidden link

Now, the issue remaining is firing the (submitting the) search itself.

How do you plan to handle that?
By page reload or AJAX update on changes in the search?

[Jaime]

Hi again Beda.
Thanks a lot for your detailed answer.
I have followed your steps and it is working fine!
🙂

Anyway, some little issues I would like to clear out with you.

1) Now I have two fields.
As far as I understand, now I have two different fields. One called "Provincias" (which appears in the search as a select-field option) and one called "ID-region-field" (the single-line field we created to search in the map).
Both fields works ok in the search form, but when a user create Post in the New post form, it will need to complete both fields: select the "Provincia" and the "ID-region-field".

It would be more friendly if a user select "Provincia" and the "ID-region-field" will complete automatically with the correct information. Ideally, the "ID-region-field" always remains hidden for the user, and simply it updates in the backend in order to make the map search work.

Is there any way to achieve that?

2) The map seems to disappear after a search.
I don't know why but after a trigger a search using the map, the search works correctly, but the map itself seems to disappear.
Do you have any idea of what is causing that?

3) Reload in the search.
Finally. I noticed that for now, the search with the map works fine with Ajax option, but with Reload page doesn't work.
If it is possible, I would like to use the search with the Reload option, but it's not a big deal to leave it as it is now.

-> Beda. You don't know how useful it's been your help. I have no words to describe how grateful I am.

Thanks, mate.
🙂

[Jaime]

My dear Beda.
I'm so embarrassed.
After wrote you the last message I tried to make the changes to my production site and I don't know how, I pretty deleted all my CPT.
Importing / Exporting something... shit.
🙁

So, I had to use a backup from my website from yesterday.
Everything is restored now, but I'm not sure if your changes are there or no.

So, if you can answer me the last questions I asked you, I'll try to redo step by step again everything you did and try to make it work again properly.

So sorry if my clumsiness causes any inconvenience to you.
Thanks again Beda.

[Jaime]

HI again Beda.
I think I solved the problem and the site is now as it was.
So, if you need to access to the staging site, you can do it now.
I also disabled all the plugins and theme as you told me.

Thanks again Beda.

[Beda]

In reply to https://toolset.com/forums/topic/insert-svg-map-in-a-toolset-search/#post-1323669

1. You can create a Select field where the Option Values are equal to the currently used ID-region-field. The Option Labels would be equal to the field "provincia" you have now. I understand both fields describe the same data: the area clicked in the map. Once in a readable format and once as ID for the code.
So using a Select Field will work. But you as the Webmaster have to create it in Toolset > Types, completing it with all possible options labels and values, perfectly patching (especially the value) the requirements of the map.

2. You are using AJAX updated search
I assume that the Maps plugin you use needs to be refiring an action to display and make the map interactive. That would require to be re-fired after an AJAX update of the View.
For that, you can use the Views Search section JS Editor "Front End Events" button.
It allows you to add actions at certain moments of an AJAX search or Pagination.

For now, I'd suggest going with a full update of the page. Don't use any AJAX feature just now, it complicates the scenario and can be solved later if there is a hook of the third party to use.

3. You need to reactivate pretty permalinks (postname) (I had set that but the redeployment of the site likely destroyed the setting). You can not use query parameter like ?page_id, it will conflict with our JS script.
It's better to use post name (post-name) as permalinks.

Then this should also work with non-AJAX views / reload

I see at this point most is as it was when we left it last weekend, and we are ready (after above adjustments) to proceed with some optimization of this feature.

This is a testing site, right? I can remove all that code from hidden link that we don't use, like Visual Composer stuff?
It would help to have it a bit cleaner.

Please let me know when you adjusted above points so I can check back in.

Thanks!

[Jaime]

Hi Beda.
Finally I found a different approach to solve the problem.
🙂

What I did is use the map to change the field with the regions ("Provincia"), instead of search directly in the map regions.
So, the map regions changes the select-fields and the search is working with the select-field. This is awesome because solves some problems (Ajax, duplicate fields, error results...)

I paste the code here, just to let you know how I solve this:

function (e, mapsvg){
console.log(e);
console.log(mapsvg);
console.log(this);

const myMap = {
'ES-AL' : 1,
'ES-CA' : 2,
'ES-CO' : 3,
'ES-GR' : 4,
'ES-H' : 5,
'ES-J' : 6,
'ES-MA' : 7,
'ES-SE' : 8,
};

jQuery('#wpv_control_select_wpcf-provincia').val(myMap[this.id]);

}

You can see it in action here:
hidden link

So, finally I want to thank you again all your effort and patience. Great support Beda! The best I ever had!
🙂

[Beda]

Great, I am happy a solution was found to this task.

🙂