Skip Navigation

[Resolved] Displaying map with markers within a view.

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.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 8 replies, has 3 voices.

Last updated by katinaA 9 months, 1 week ago.

Assigned support staff: Minesh.

Author
Posts
#2295329

We are now setting up pages with views on them that will show a map at the top of the page and then a list of partners under the map. I think we have this working is it should here as our first test of this:

hidden link

The view used to create this page is here:

hidden link

I have some questions for perfecting this though. Take a look at the page here:

hidden link

This is the Drupal Views built version of the page we're trying to recreate with your plugin in WordPress. The features I'm inquiring about here are:

1. Is there any way to add a count to precede the post title field? See how we have numbers before the titles in the Drupal version. They have a counter field that will provide a number for each item displayed on the page in sequence. I'm not seeing any way to do that in your View setup.

2. Is there any way to have map markers with numbers that correspond to the counter field number? We have our own marker sets we can upload if your maps would support this. On this test page we're working on we only have two Partners right now, but many more will be added. You can see we have 40 listed on the Drupal site. Those will all be migrated to this site once we can see that all the functionality we're trying for is present. When you have a large number of map markers on a map, I think it is best to have numbers on them to where people can tell where each one is easily.

3. Is there any way to have popup bubbles that come up when you click on any of the map markers? Look at the Drupal version of the site and click on any of the map markers there to see what I mean. We have popup bubbles that show the title, address, phone number, and website link for each partner. That helps people confirm they are looking at the right marker as well.

If we need to break this up into 3 support threads, that's OK. Any assistance you can provide here will be majorly appreciated. This is the biggest thing we have left on our To Do list for everything we need your plugin to do for us. We're really close already and thank you for all the help you've provided.

#2295609

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2022-02-17 at 15.38.41.png

Hi there

For 1. there isn't a way you can easily insert a post counter with the normal UI, but you can use the wpv-loop-index shortcode to output the current iteration of the loop which would achieve what you need.

(Prior to the Gutenberg block editor Views dynamic content was generated using shortcodes. This shortcode is described here: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-loop-index.)

To add that to the output of your View block, insert a Fields and Text block, switch it to HTML mode, and then add whatever markup you need, using shortcodes to generate dynamic output.

Try this, for example:

<h2>[wpv-loop-index] [wpv-post-link]</h2>

For 2. that's not possible. You can use custom markers, but they will apply to all of the markers originating from the View, you can't have different markers for each post.

You can add hover hints to the markers though, and you can use shortcodes for dynamic content (e.g. to display the post title).

For 3. yes, much like the hover hints described above.

See the screenshot.

#2295897

1. Solution worked perfectly for this. Thanks.

2. Is there any way to custom program it to use unique numerical markers for each marker to correspond with the counter? Say for example, our marker file names are marker-1.png, marker-2.png, marker-3.png, etc. If we could program it to where the marker file name that gets pulled uses "marker-[wpv-loop-index].png" in some way, wouldn't that work? Our marker sets have individual files for each number. I have unique number marker files for all numbers from 1 through 139 right now, which is enough to cover all our needs on these region map pages we'll set up. If this is something where we'd need to pay extra for this customization request, or do it through your Toolset Contractors section, that's fine. But I'd think there has to be a way to accomplish this. I'll submit it as a feature request as well because I think that would be a nice addition to your functionality to have markers that can be visually linked to the listing without forcing people to hover on each marker one at a time to find the right one for the listing they are looking for on the map.

3. I'm confused as to how to get to this in the Classic Editor - Loop Editor. I see how to switch to the Block Editor within the Templates for this view - Loop Item area, but the area where we have the marker defined is above that in the 1st Loop Editor section and there is no option to use the block editor there:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-map-marker map_id='map-7' marker_id='marker-6' marker_field='wpcf-address']
[wpv-post-body view_template="loop-item-in-partners-map-east-central-region"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Can you just provide the popup code that would be needed to insert that into our line:

[wpv-map-marker map_id='map-7' marker_id='marker-6' marker_field='wpcf-address']

#2299575

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

You should opt either block or shortcodes way to display the Maps. Using Blcoks it will offer you GUI but customizations will be limited, using Shortcodes to display the Maps, you have better options customize it on your own. Like you can display map marker icon using the numbering.

The maps shortcode you must put outside the view's loop. For example:

[wpv-map-marker map_id='map-7' marker_id='marker-[wpv-post-id]' marker_title='your marker hover title text' marker_icon='your full path to marker icon/[wpv-loop-index accumulate="false" pad="false" offset="-1"].jpg/png' marker_field='wpcf-address'] your marker popup content  text [/wpv-map-marker]

Where:
- you can replace the text for marker_title, popup content and dynamic marker icon.
- you can replace the full path of your marker icon and as you can see we use the [wpv-loop-index] shortcode to get the current loop index number. You can check if you have .jpg or .png image and use the image extension accordingly.

You can use the shortcode [wpv-loop-index accumulate="false" pad="false" offset="-1"] to get the loop index number:
=> https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-1195331

I see you are trying to display the map using legacy views (using the shortcode, without using the block), and here is the Doc how you configure maps using the classing views.
=> https://toolset.com/documentation/legacy-features/maps-plugin/

If you need further help, please get in touch with me.

#2300025

Yeah, I'm more comfortable with the classic editor approach than I am with using the block editor. The block editor sometimes behaves in a very flaky manner for me to where it's often difficult to do things with it that I think should be simple. Sometimes it works fine, but other times it does weird things that I can't explain and is difficult to work with. So when it does that, I tend to just want to get back to where I can see the code.

I've tried your code for the Popup content and have that working perfectly here:

hidden link

Thanks hugely for that!

I'm going to test the dynamic marker icon code next, but I have to upload our marker icon set for that first. I've asked our project manager if she wants me to try it. I previously told her I don't think we're going to get to have numbered markers any more and she said she's OK without the numbers. But now that you've provided this code, I've asked again if she wants them and am awaiting her reply before I test this. It's going to take a bit longer to test this so I want to make sure she wants this before I go to the effort. Please keep this support ticket open in case I test and still have questions.

I think this is the last big functionality thing we have left for your plugin on this site. I'm blown away by how far we've gotten with this. Your plugin opens up using WordPress for sites where previously Drupal Views was essential to achieve this level of dynamic content sophistication. Thanks for everything with this. Not only thanks for the plugin itself, but also thanks for the beyond first-rate support you guys provide. The plugin has a steep learning curve and you have got me through nearly every unique use case I've presented to match previously existing functionality from Drupal Views.

#2300173

Project manager said to go ahead with getting the numbers back. I've tested it and I think it is working. I didn't need the offset -1 part for it to work so I removed that. Here's what I'm using now:

[wpv-map-marker map_id='map-7' marker_id='marker-6' marker_icon='hidden link accumulate="false" pad="false"].png' marker_field='wpcf-address' marker_title='[wpv-post-title]'] <a href="[wpv-post-url]">[wpv-post-title]</a><br>[types field="address"][/types]<br>Phone: [types field='telephone-number'][/types]<br>[types field="website-url" title='[wpv-post-title] Website'][/types] [/wpv-map-marker]

This seems to be working. But let me test it on a region with more Partners on it before I fully celebrate this as a success. I've tested with the page here:

hidden link

This has two partners on it, but one is a private one so you'll only see one. It's working with 2 numbered markers here. I'm going to clone this view to set up the same thing for all our different regions. Some of the others have more Partners already present for me to confirm that this is working.

But huge thanks again because I think we have it.

#2300219

It's working! Here's a new region page with 5 partners present and the markers are showing as they should 1 through 5.

hidden link

Thanks so much!!!

#2300413

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Great and glad to hear that you are successfully able to migrate from Drupal to WordPress without any issues. Happy to know that Toolset help you and offer you most complex features for such dynamic and complex map issues.

You are welcome to mark resolve this ticket.

#2300423

My issue is resolved now. Thank you!