[Resolved] Dom Listener For Map Icons

[Author]

Posts

[Ryan]

Hi there, I'm using a custom modification of the Views Map to create a list/map. This is working fine and - as is standard functionality - when I hover over the list items in my loop, the 'hover' icon in the map changes.

However, what I want to do is keep this DOM listener but also **add** one so that I can toggle a class in the list when I hover over a map icon. I'm assuming this would require some modification to the JS file, but I'm unsure how to do this.

I've attached an image to help explain.

Thanks in advance!

[Beda]

1. Can you elaborate what you mean by "I'm using a custom modification of the Views Map"
Have you modified the Plugin Code?

2. What you try to achieve was documented and achievable with the former Toolset Maps Plugin.
We removed that DOC as not anymore applicable.

I will query with the 2nd Tier / DEV if it is still possible to highlight on hover the list/marker and make some local tests.

Please stand by, I'll update you soon

[Beda]

OK, with Toolset Maps, you can do what follows:

1. Insert the Map to a View
2. Add your markers
3. You can (with the GUI) add a href button (outside the Map) that clicked, will center the Map to the referred marker.

The whole Views Loop (very simplified) would look like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
          [wpv-map-render map_id='map-1']
            <wpv-loop>
              [wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-google_address-61ec2481'][/wpv-map-marker]
                <a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-map-1-marker-1" data-map="map-1" data-marker="marker-[wpv-post-id]">Button here</a>
            </wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

This would produce what you see in my ScreenShot.

It will NOT highglight neither the Button nor the marker on hover, just center the Map on where you refer to with the Button.

The approach you woudl like to have requries Custom Code, with which I can not assist.
https://toolset.com/toolset-support-policy/

It's a new feature to request.
If you would like, I can add this to our List of requested Features.

[Ryan]

Hi Beda,

Thanks for your response. Sorry if 'using a custom modification' was unclear and by that I mean that I have my own custom loop (using WP_Query), custom fields, and jquery.wpvmap.js. I'm using the 'old' Views Map because I need a lot of control that would otherwise not be possible in the new version.

In other words, I was looking to modify jquery.wpvmap.js (I believe it's v1.0) ...and specifically the setListItemEvents() function so that it works both ways: both via the listed item and via the marker to toggle a class to the respective other item.

Hopefully this clears things up and is still possible. If not, I understand and thanks anyway.

[Beda]

Since you are using the old Views Maps plugin add-on, it might help you to get access to our (old) document where you will find proper information.

Please acknowledge that neither me, other Supporters or the DEV can support this approach as it's based on a deprecated Plugin and we moved on to the New Plugin Toolset Maps.

Also, you do use Custom Code approaches which are not covered by Toolset Support.

But in order to provide you best possible background, please download this PDF to find the Documentation I am talking about above.
hidden link

Please acknowledge that many Links in that DOC will not lead anywhere, as outdated.

[Ryan]

Thanks Beda,

I do understand that my method may not be directly supported, which is fine. I was just curious if the Toolset team might have had an idea how to modify the map.js file that they created.

Thanks again!