[Resolved] using toolset maps with beaver builder

[Author]

Posts

[jimP]

Tell us what you are trying to do?
I would like to incorporate a Toolset Maps display of all (regular) posts in a given category into a page we are building with Beaver Builder. The posts have all been geolocated using the Toolset Maps Address field.

Is there any documentation that you are following?
I have used BB extensively with Toolset in past, so I know the general approach, but the Toolset Maps documentation assumes I'm using the Blocks editor, which clearly I'm not. There is a similar support thread with Elementor here, but not super helpful: https://toolset.com/forums/topic/displaying-maps/. There is an extensive Toolset Maps shortcode library here, but I'd somehow need to nest it within Views shortcode to make it work: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/. There is a quick Toolset Beaver Builder page here, and it even includes a map example, but no instructions: https://toolset.com/course-lesson/using-toolset-with-beaver-builder/.

Is there a similar example that we can see?
Sorry, no example yet.

What is the link to your site?
When finalized it will be displayed as part of home page at hidden link.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Whenever any content editor/page builder other than Blocks is being used, the workflow would remain the same as it was before the Blocks and WordPress Gutenberg.

You can insert Toolset elements like views and maps etc, using the "Fields and Text" button or by adding the relevant shortcodes directly.

For example, you'll find the "Fields and Text" button available on top, when you'll add the "Text Editor" module from the Beaver Builder's editor.
( example screenshot: hidden link )

The map can either be inserted through this "Fields and Text" button or by using the "wpv-map-render" shortcode, directly:
https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/

For the map and the map markers from post view to work together, the page just needs:

a). The "wpv-map-render" shortcode to generate a map
b). The "wpv-map-marker" shortcode that brings in location/coordinates information from each post's address field.
( this will need to be inside the post view's loop )

As long as the "map_id" attribute values are the same in both these shortcodes, the map will know that for map markers, the source should be the post view.

As for the post view, you'll create it using the Classic editor and not the Blocks editor. You can go to WP Admin -> Toolset -> Settings -> General and make sure that "Show both the legacy and Blocks interface and let me choose which to use for each item I build" option is selected for the "Editing experience" field.

After that, you'll see the views management screen at WP Admin -> Toolset -> Views, from where you'll be able to create views using the classic editor.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[jimP]

OK, I think I get it, but have some remaining questions:

(1) The map render and marker would need to be inserted inside the view loop, then the resultant view inserted in the BB text editor, correct?

(2) Assuming I am correct on the above, how do I create a mashup map, i.e., with one map showing all post locations, rather than a loop of multiple maps?

I tested the above with a new page using BB, here:

hidden link

The view was easy to define, then I inserted the below inside the view loop:

<!-- wpv-loop-start -->
		<wpv-loop>
        [wpv-map-render map_id="map-1"][/wpv-map-render]
        [wpv-map-marker map_id='map-1' marker_id='marker-1' marker_field='wpcf-post-geolocation'][/wpv-map-marker]
		</wpv-loop>
<!-- wpv-loop-end —>

This is what resulted in the page provided above.

If I can figure out how to render just one map for all posts, rather than a map for each post, I think I can do the rest.

Many thanks,

Jim P.

[Waqar]

Hi Jim,

Thanks for writing back.

Anything placed inside the view's loop ( i.e. the <wpv-loop> ... </wpv-loop> tags ) would repeat for each post/result found by the view.

We do need a separate marker for each post, which is why the "wpv-map-marker" shortcode needs to be inside the loop.

But, the map is just needed once which is why its shortcode "wpv-map-render" should be outside the loop.

[wpv-map-render map_id="map-1"][/wpv-map-render]
<!-- wpv-loop-start -->
        <wpv-loop>
        [wpv-map-marker map_id='map-1' marker_id='marker-1' marker_field='wpcf-post-geolocation'][/wpv-map-marker]
        </wpv-loop>
<!-- wpv-loop-end -->

As a result, the map will be rendered only once and the multiple markers from the posts would be plotted on that same map.

regards,
Waqar

[jimP]

Yes, all clear!...sure appreciate.