Tell us what you are trying to do?
I want to create a page where it updates the active items as I scroll over a list, the map is sticky on the right side (or full screen for mobile)
Example:
hidden link
Is there any documentation that you are following?
I have used the map functionality before and I can get a hover box when I select an item on the map. But this would work in both directions, i.e. when you select or scroll over a result the focussed item of the map should change accordingly.
Is there a similar example that we can see?
hidden link
What is the link to your site?
Under construction (client request)
Hello,
It needs custom CSS codes, I have checked the demo URL you mentioned above, it is using below CSS style codes for right column:
See screenshot css-sticky.JPG
More help:
hidden link
Dear,
Thanks for the reply, the sticky part and making it responsive, this I'm confident to implement.
My main question is how to revert the interaction between items with an address and the map.
So far I've made with Toolset:
-a map with all results display.
-when you click the map item the result hoverbox displays
-when you click the link in the hoverbox the item opens in new page
What I want to do NOW (new):
- a map works in both directions: when I select the map item, the page scrolls to the responding item
- when I scroll by / hover a specific item in the list, the item is highlighted on the map.
Kindly check the link I provided as an attachement.
It's this both-way interactivity, I have no idea on how to start on.
Also check the mobile version of the link I included, it shows it clearly: a slider of items, linked to map pins, the pins control the slider position, the focussed slider, foucusses the corresponding pin on the map.
Any help in much appreciated.
hidden link
BR,
Olivier
Thanks for the details, there isn't such kind of built-in feature within Toolset plugins.
In your case, I suggest you start with "html anchor" + map marker's pop text link.
For example:
1) In your post view, within view's loop, display an unique html anchor using post's ID, for example:
<wpv-loop>
<div id="item-[wpv-post-id]"></div>
...
</wpv-loop>
2) Setup the marker's shortcode, display a link to above html anchor, for example:
[wpv-map-marker ... ]<a href="#item-[wpv-post-id]">[wpv-post-title]</a>[/wpv-map-marker]
So in front-end, if you click a map marker, it will display a popup with title, link to the corresponding html anchor, click it, your browser will be able to scroll to that item.
More help:
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-marker
hidden link
Thanks for the reply. The first part is clear, from the map to the item I can use anchor links. I'm wondering about the opposite direction, could you point me in the right direction please.
Id est, how to make a pin focussed on the map when I scroll, e.g. should it be given a class by a certain event, or set to focus,... just not clear for me how to approach this part.
Is there a JS function I can call, I just need to focus the marker on the map and move it to the center of the map
There isn't such kind of built-in feature within Toolset Maps plugin, but it is possible by clicking a focus link, see our document:
https://toolset.com/documentation/user-guides/maps-shortcodes/#map-focus-on-marker
So you might consider these:
1) Display the focus link insider the loop of post list in left column.
2) When user scroll and see that focus link, setup JS codes to click that link:
hidden link
For your reference.
I proceeded to create my own map and added event listeners to the markers. So I have a scroll activated function that focusses the pin on the map; I wasn't able to do it with Toolset.
However, now I would like to add these markers to my map in the Toolset loop.
Google API requires a Long / Lat to create the Marker object. How can I retrieve this information from the Address I stored for my custom post type?
E.g. I have a custom post type with a custom Toolset field "Address", I somehow need to extract the Long./Lat. information to use the Google API directly.
Thanks
How do you setup the Toolset field "Address"?
If it is a custom address field, you can get the Long / Lat values with Types shortcode:
LATITUDE: [types field='my-address' format='FIELD_LATITUDE,'][/types]
LONGITUDE: [types field='my-address' format='FIELD_LONGITUDE'][/types]
See our document:
https://toolset.com/documentation/customizing-sites-using-php/functions/#address
format:
Use the literals FIELD_ADDRESS, FIELD_LATITUDE and FIELD_LONGITUDE in the format to output the address
Great, I'm making good progress here. Thanks for this tip.
Next thing, I set it up with the Toolset Address type field, and with your advice, I was able to retrieve the LONG/LATT info needed to construct my own markers and put them on the list.
My custom post type has a "post reference" field, where you attach 1 specific post.
The view I created, I want to show all these custom post types that have the 'current post' that's containing the view, how do I go about it? I've hardcoded this for now with a post ID but how do I filter my custom posts in this view, to only the current post (wherein the view is included?)
For the new question:
I want to show all these custom post types that have the 'current post' that's containing the view
The "post reference" field is based on one-to-many post type relationship, so you can setup a post view:
- Query "post reference" posts
- filter by the post type relationship, see our document:
https://toolset.com/documentation/post-relationships/how-to-display-related-posts-with-toolset/#displaying-many-related-items
If you need more assistance for it, please create a new ticket for it, according to our support policy, we recommend one ticket one question.
Using the direct Google Maps API. My issue is resolved now. Thank you!
