[Resolved] Highlight a view list item from a Google map click

[Author]

Posts

[stuart]

I have a view on the left and the corresponding map on the right.

I would like to click on the map on a marker and it highlight the corresponding item in the view on the left so the user knows which item is currently active... how would I easily go about this one.

thanks in advance.

[Waqar]

Hi,

As there is no direct method or feature available for this, it will require some workaround and a custom script.

1. You can wrap the content inside the view's loop item which you need to highlight on map marker click inside a special div container, e.g.

<wpv-loop>
	<div class="result-item-container" data-item-title="[wpv-post-title]">
	....Views loop item content...
	</div>
</wpv-loop>

Please note how I've added a special class "result-item-container" and the current post's title in the "data-item-title" attribute. This will help in identifying each loop item's container, matching the post title.

2. In your map marker's shortcode, you'll also have to make sure that the current post's title is set for the "marker_title" attribute.

Example:

[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-post-location']marker content[/wpv-map-marker]

3. Next, in the view's "JS editor" you can include this custom script, replacing "map-1" with the actual ID of your map:

jQuery( document ).ready( function( $ ) {
	jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
		var markers = WPViews.view_addon_maps.markers;
		var map='map-1';
		for(var marker in markers[ map ]) {
			markers[ map ][marker].addListener('click', function() {
				jQuery('.result-item-container').removeClass('highlighted');
				jQuery('.result-item-container[data-item-title="'+this['title']+'"]').addClass('highlighted');
			});
		}
	});
});

This script will execute whenever a map marker is clicked and will add the "highlighted" class to the loop item container, where the post title matches.

4. This special class "highlighted" will allow you to style the highlighted loop item differently from the rest. For example, suppose you want to set a red background color to the highlighted result item. For that, you can add the custom CSS code in the view like this:

.result-item-container.highlighted {
background: red;
}

I hope this helps and please let me know if any step is not clear.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[stuart]

Hey Waqar, thanks for the help -

this work for the direct click on the marker and this is cool, however I have some next and previous buttons in the modal that i use to navigate around the page where Id like this to continue to highlight the items.

is it possible to trigger this one the modal open instead of the click?

Here is an example hidden link

I have tried to bind a class but it fails to apply for some reason when its within the [wpv-map-marker... in the popup.

[Waqar]

Thanks for writing back.

I'm not completely sure how those next and previous links are working from inside the map marker popup.

Can you please share temporary admin login details, along with the link to the page where this view can be seen?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing the admin access.

The highlighting wasn't working in the view with the table structure, because the div tag can't be wrapped around the tr tag.

I've changed it from:

<wpv-loop>
	<div class="result-item-container itemid-[wpv-loop-index]" data-item-title="[wpv-post-title]">
		<tr>
			[wpv-post-body view_template="loop-item-in-map-analysis-view"]
		</tr>
	</div>  
</wpv-loop>

To:

<wpv-loop>
	<tr class="result-item-container itemid-[wpv-loop-index]" data-item-title="[wpv-post-title]">
		[wpv-post-body view_template="loop-item-in-map-analysis-view"]
	</tr>
</wpv-loop>

And to make the highlighting work when the next/previous links from inside the map marker popup are used, you'll need some additional custom script that can get the target item's index from the next/previous link and then add the highlighting class to the respective item in the table:

jQuery( document ).on( 'click', '.gb-button.js-wpv-addon-maps-focus-map', function( e ) {
	var $this = jQuery( this );
	var classList = $this.attr("class");
	var numbersArray = classList.split(' ');
	jQuery.each(numbersArray, function(index, value) {
		if (value.indexOf("js-toolset-maps-hover-map-map-4-marker-marker-") >= 0) {
			var valueArray = value.split('-marker-marker-');
			jQuery('.result-item-container').removeClass('highlighted');
			jQuery('.result-item-container.itemid-'+valueArray[1]+'').addClass('highlighted');
		}
	});
});

This is already added and working from your view "Map Analysis - View".

[stuart]

Awesome, works really well ... one last question with this ... 🙂

How would change the view list items (left) to the page where the item was clicked.

For example:

Say I was on page 2 of the view on the left (the list of items) and I click the next button in the map section (in the right) but the item in the map was on page 1 - we would still see the list that is un-highlighted as the view wouldn't change.

I suspect this can be achievable if there is a way to know what page an item was on with jQuery, however I am not sure how to find the items current page in the list...

Any idea on this would be useful if you have them.

i appreciate your help on this.

[Waqar]

Thanks for the update and glad that it works.

I'm afraid, I'm out of ideas and can't think of any simple way to achieve this for a multi-page list.

The jQuery or scripts can interact with the elements which are already loaded on the page, but in the case of pagination, not all items always exist and only the items from the current page are available. This means that the script won't have any way to know that on which page a certain item exists.

If you absolutely need this, you can consult someone from our recommended contractors to see if they have some workaround or idea, that includes deeper customization:
https://toolset.com/contractors/

[stuart]

Appreciate your help on this and the outstanding support, my new idea for this ....

Ill create a map on the right that is scroll sticky, on the left the view with the items will have all entries (no pagination) ...and a marker on the map (right) with anchor to it on click will reference the list (left) .... it is not done yet, but i think that the best option.