Skip Navigation

[Resuelto] Clickable list of locations below map – revisited 2

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem:
How to display different map marker icons for some posts

Solution:
Assuming you have a post type displayed on a map and the posts have a custom field that is used to determine whether one marker icon should be used or another, then you can use the wpv-conditional shortcode to add the marker with different icon settings according to the custom field value.

See "Customizing the marker icons" in the documentation about using custom icons for markers.

In the View Loop Output section insert the wpv-map-marker shortcode twice, once for each icon required, which can be done with the Fields and Views button.

Now wrap each wpv-map-marker shortcode in a wpv-conditional test for the custom field, as described below: https://toolset.com/forums/topic/clickable-list-of-locations-below-map-revisited-2/#post-524218

Relevant Documentation:
https://toolset.com/documentation/user-guides/display-on-google-maps/
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

This support ticket is created hace 6 años, 10 meses. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 3 respuestas, has 2 mensajes.

Last updated by Craig hace 6 años, 10 meses.

Assisted by: Nigel.

Autor
Mensajes
#524185

This is a follow-up post relating to https://toolset.com/forums/topic/clickable-list-of-locations-below-map-revisited/

Hi Nigel (or any other supporter),

I thought that I had enough info to do this on my own, but I cannot seem to get the conditional output to work.

My currently working View (showing all markers the same) is as below:-
------
[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id='2' map_height='600px' scrollwheel='off' double_click_zoom='off' marker_icon='hidden link' background_color='#dedee0']

<div style="margin-bottom:20px;"></div>
<h2>List of Current and Future Developments</h2>
<div style="margin-bottom:8px;">Click on the development name to highlight it on the map.</div>
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-map-marker map_id='2' marker_id='[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-location' id='$town']<h4>[wpv-post-title]</h4><div><p>[types field='development-info'][/types]</p></div>[/wpv-map-marker]
<div><a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-2-marker-[wpv-post-id]" data-map="2" data-marker="[wpv-post-id]"><span>[wpv-post-title]</span></a></div>

</wpv-loop>

<button class="js-wpv-addon-maps-reload-map" data-map="2" style="margin-top:20px;">refresh map</button>

<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Sorry, no current or future developments found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
------

What I have tried to do was to add in a conditional statement based on a new Types Field I added. It is a radio button with custom field content set to either '1' or '2'. I have then created a Content Template as follows:-

[wpv-conditional if="( $(wpcf-current-or-future) eq '1' )"]hidden link;
[wpv-conditional if="( $(wpcf-current-or-future) eq '2' )"]hidden link;

and entered that Content Template into the 'marker_icon' in the wpv-map-render for the map as shown below:-

[wpv-map-render map_id='2' map_height='600px' scrollwheel='off' double_click_zoom='off' marker_icon='[wpv-post-body view_template="Marker Image for Current or Future Developments"]hidden link' background_color='#dedee0']

Unfortunately, no markers are shown with this code. I thought I was close, but obviously not close enough.

Can you see anything in the above code which would be preventing the markers from displaying?

Kind regards,
Craig

#524218

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

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

Screen Shot 2017-05-15 at 12.29.54.png

Hi Craig

I set up a quick test site where I displayed different marker icons (church or volcano) depending on the setting of a church-or-volcano custom field on my location posts to demonstrate this. (Silly, yes, but hopefully clear.)

When you use custom markers on a map you can either set the custom marker icons globally at the map level with the wpv-map-render shortcode (all markers use the same custom icon), or you can set it at the map-marker shortcode level so that individual markers can use different icons, which is what I'm doing here. You can't do what you've tried to do using a conditional embedded in the wpv-map-render shortcode.

Here's the Loop Output section of my View which generates the map shown in the screenshot:

[wpv-layout-start]
	[wpv-items-found]
		[wpv-map-render map_id="map-1"]
		<!-- wpv-loop-start -->
		<wpv-loop>
			<h3>[wpv-post-link]</h3>

			[wpv-conditional if="( $(wpcf-church-or-volcano) eq '1' )"]
				[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_icon="<em><u>hidden link</u></em>" marker_field="wpcf-home-address"][/wpv-map-marker]
			[/wpv-conditional]

			[wpv-conditional if="( $(wpcf-church-or-volcano) eq '2' )"]
				[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_icon="<em><u>hidden link</u></em>" marker_field="wpcf-home-address"][/wpv-map-marker]
			[/wpv-conditional]
		</wpv-loop>
		<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

You have one call to render the map outside the loop, and then in the loop where you iterate over the posts with the address field, when adding the marker shortcode you wrap it in a conditional check to know what icon to use, and add as many conditionals as you need for your different icons.

Let me know if you are stuck after trying this.

#524225
Capto 2017-05-15_01-07-56_pm.png

Thanks very much for that. I think I understand that better now, but obviously not 100% yet.

I tried changing my code to this:-

[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id='2' map_height='600px' scrollwheel='off' double_click_zoom='off' background_color='#dedee0']

<div style="margin-bottom:20px;"></div>
<h2>List of Current and Future Developments</h2>
<div style="margin-bottom:8px;">Click on the development name to highlight it on the map.</div>
<!-- wpv-loop-start -->
<wpv-loop>

[wpv-conditional if="( $(wpcf-current-or-future) eq '1' )"]
[wpv-map-marker map_id='2' marker_id='[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-location' id='$town' marker_icon='hidden link field='development-info'][/types]</p></div>[/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( $(wpcf-current-or-future) eq '2' )"]
[wpv-map-marker map_id='2' marker_id='[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-location' id='$town' marker_icon='hidden link field='development-info'][/types]</p></div>[/wpv-map-marker]
[/wpv-conditional]

<div><a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-2-marker-[wpv-post-id]" data-map="2" data-marker="[wpv-post-id]"><span>[wpv-post-title]</span></a></div>

</wpv-loop>

<button class="js-wpv-addon-maps-reload-map" data-map="2" style="margin-top:20px;">refresh map</button>

<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Sorry, no current or future developments found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

But it only shows the two markers which are set to be Future Developments (2nd condition). The list of all the developments (Current and Future) are showing below the map though. See attached screen grab.

#524263

Hi Nigel,

Sorry, it is all working now. The individual developments had been created before I added the extra field for 'current' or 'future' and I hadn't updated each of the posts, so they didn't have the 'current' state saved in the database.

Thank you very much for your extremely helpful pointers.

Kind regards,
Craig

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.