[Resolved] Creating a map listing functionality

[Author]

Posts

[jamesT-5]

I have previously spoken to someone about this over chat. We want to replicate the look and feel of hidden link using toolset so we can heavily customise it.

1. We need to create the split listing and map view.

I need these 2 views to work together like hidden link so the location needs to be typed in the filter on the left above the listings and that should update the listings and the maps location to show them? Is this possible? The will also be lots of other filters he that should limit the amount of listings and markers shown just like listify.

2. Is it possible to make the pins on the map animate (e.g. get larger/"jump") or change colour when that map markers listing is being hovered over on the left side of the screen?

Lastly, I plan on using this as a guide https://toolset.com/forums/topic/search-page-with-selection-map-listing-cards/. I haven't started creating this functionality yet - I just need to know if we can create the above functions to speak to the client about what is and isn't possible.

Thanks in advance!

[Nigel]

Hi James

The sample page has 3 parts. The filter controls, a list (or grid) of results below, and a map on the right.

There's no reason you can't implement the same layout using Toolset Views and Maps.

It will just require some effort on your part to ensure the markup and CSS produce the desired layout.

Create a custom search View to generate the filter section and results. Then add a map on the page, and inside the loop (between the wpv-loop tags of the Loop Editor) insert the marker shortcode (so that a marker is added for every post in the results).

If you insert the map at the end of the Loop Editor then you would have filter controls, search results, and map added to the page in that order. You'll want to use CSS to split these into columns with the first two on the left and the map on the right.

You would probably find it helpful to move the map shortcode to the final Output Editor section, where you'll find two shortcodes—which insert the filter control section and the results section respectively—but which you can customise with HTML. So if you are using Bootstrap a crude example of splitting into columns would be like so:

<div class="col-sm-6">
	[wpv-filter-meta-html]
	[wpv-layout-meta-html]
</div>
<div class="col-sm-6">
	[wpv-map-render map_id="map-1" map_height="500px"][/wpv-map-render]
</div>

The hover/jump functionality, no, that's not possible. You can use custom markers, and different markers for different categories, for example, and the markers can display content when hovered (e.g. the linked post title and a thumbnail), but you can't do specifically what you ask.