Map with parametric search and results

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use Toolset Maps to emulate the design seen here: https://hotpads.com/pinole-ca/apartments-for-rent/map

Solution: Some parts of this design can be replicated with Toolset Maps, but others will require a significant amount of custom code with JavaScript and CSS. For example, hover interaction between the list and markers is not supported. Full-screen display is not supported, and the overall layout of the map and results list will require your own custom CSS. The custom filter input design will require your own custom CSS.

We do offer the ability to focus on a marker when you click a link, as well as the ability to filter results and update the map using AJAX. We also offer the ability to customize your map markers and popups.

Relevant Documentation: https://toolset.com/documentation/user-guides/display-on-google-maps/

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.56 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Toolset Maps, Views plugin

This topic contains 6 replies, has 2 voices.

Last updated by Charles 7 years, 2 months ago.

Assisted by: Christian Cox.

Author

Posts

August 16, 2017 at 2:12 am #560172

Charles

Support,

I am trying to modify map results. What's the best way to go about creating a page like this: (hidden link) which has a map on the left and the results on the right?

I've found this thread (https://toolset.com/forums/topic/parametric-search-with-map/), but it doesn't offer much guidance in regards to displaying results on the left side of the screen, as seen in the video on the first post.

My current map: hidden link

Thank you,
Chuck

August 16, 2017 at 1:44 pm #560385

Christian Cox

Hi, this is a complex interface with lots of custom interaction, and a lot of it cannot be accomplished in Views without custom code. For example, when you hover over the list of results, the corresponding map marker is opened up on the map. When you view the map on a mobile device, the list and map are split up into separate screens. Those parts of the functionality and design aren't things I can help you with here in the forums.

On the other hand, if you arrange the design of your page so that results appear in a vertical list and the map appears beside that list, I can offer some assistance to insert your map and results into this framework. I can also help you set up your list of results to include a "focus on this map marker" link for each result, which will zoom the map into a specific marker and show the marker popup, when the user clicks the link.

Let me know if the more basic implementation is something you want to pursue, and I will offer any assistance I can that is directly related to Toolset.

August 18, 2017 at 7:23 am #561107

Charles

Christian,

Here's where I'm add: hidden link

Need to have list items highlight when their marker is hovered over/selected. Is this possible?

Also, I need to the list results container height to match the maps height and have a scroll feature to view more results with pagination at the end. Is this also possible? Maps height is currently 50vh.

Thanks,
Chuck

August 18, 2017 at 2:49 pm #561291

Charles

For reference, this is what I am trying to emulate: hidden link

Thanks,
Chuck

August 18, 2017 at 2:51 pm #561293

Charles

Also, in your original reply you mentioned this not working on mobile. No worries, this is going to be disabled for mobile and act as my featured desktop layout.

Thanks,
Chuck

August 20, 2017 at 2:04 pm #561662

Christian Cox

Need to have list items highlight when their marker is hovered over/selected. Is this possible?
This type of interaction isn't provided by Views and Maps, so it will require custom JavaScript.

Also, I need to the list results container height to match the maps height
Views and Maps aren't intended to help with this type of UI control. You will be responsible for making the map and list heights match up, and basically everything needed for a working HTML version of the page. The results can be hard-coded, but the page design must be implemented completely.

...and have a scroll feature to view more results with pagination at the end.
Pagination of results is supported and provided by Views, and can be set up as an AJAX update or a page refresh. Your list of results would update as well as the markers shown on the map. You can see an example of this on our Real Estate demo site at discover-wp.com. When you select all states in the search filter, the results will be paginated.

I'm not sure I understand what you mean by having a scroll feature. Could you clarify?

August 22, 2017 at 3:12 am #562172

Charles

Thanks. I've decided to forgo this view as it's to difficult to work with and I have other views to supplement.

Best,
Chuck