[Resolved] Creating a map with Filterable Pins from CPT with Custom Fields

[Author]

Posts

[Luigi Bella]

Hi there!

Could you please advise how I can create a map like the one at hidden link using Toolset?

That one is a custom map displaying pins from a CPT called 'In Action' with filtering by the In Action Categories Taxonomy, as well as by the Year and Country Custom Fields.

I have transferred the In Action CPT along with the Custom Fields (Latitude, Longitude, Year, Country) to a new website and would like to use Toolset to display it. Could you possibly point me in the right direction?

Thank you,

[Minesh]

Hello. Thank you for contacting the Toolset support.

To build a custom search view with maps. Please check the following Doc that will help you to understand how you can build such custom search with Maps.
=> https://toolset.com/documentation/user-guides/customizing-cluster-markers-with-javascript-functions/

Please check the following Doc to understand how you can build the custom search:
=> https://toolset.com/documentation/user-guides/front-page-filters/

[Luigi Bella]

Thank you for your help!

I am now just trying to get the In Action CPT Items to display as markers on the map. They have Latitude and Longitude Custom Fields, can these be used to display the pins on a map?

And as there are different categories, can I set the Map Pin Icon for each CPT Category?

[Minesh]

Yes - it looks like both possibilities are there.

I am now just trying to get the In Action CPT Items to display as markers on the map. They have Latitude and Longitude Custom Fields, can these be used to display the pins on a map?
===>
You can add the marker to display the marker pin on specific lat-lon pair. When you try to add the marker you should select the option - A pair of latitude and longitude coordinates
For example:

[wpv-map-marker map_id='map-3' marker_id='marker-3' lat='lat-value' lon='lon-value'][/wpv-map-marker]

More info:
=> https://toolset.com/documentation/user-guides/display-on-google-maps/#displaying-markers

And as there are different categories, can I set the Map Pin Icon for each CPT Category?
===>
Yes, its possible. You can use the [wpv-conditional] shortcode to check if the specific term is assigned to post and based on that you can display the conditional markers.

For example:

[wpv-conditional if="( CONTAINS(#(foreign-language),'english') )"]
 [wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_icon="<em><u>hidden link</u></em>" marker_field="wpcf-address-where-you-completed-your-give"][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( CONTAINS(#(foreign-language),'french') )"]
 [wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_icon="<em><u>hidden link</u></em>" marker_field="wpcf-address-where-you-completed-your-give"][/wpv-map-marker]
[/wpv-conditional]

Where:
- Replace foreign-language with your original taxonomy slug and replace term slugs with english and frech
- Addcordingly setup the markers and marker icons.

More info:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/displaying-taxonomies-conditionally/#specific

[Luigi Bella]

Thank you for your help!

I have seen the option to add a Marker with Latitude and Longitude, but what I'm hoping is possible is to display all these CPT Posts that already have Latitude and Longitude as Custom Fields. There are over 500 Posts I would like to display as pins.

Attached is a screenshot of one such post.

[Minesh]

Yes, its possible - that is why I shared the following information.

You can add the marker to display the marker pin on specific lat-lon pair. When you try to add the marker you should select the option - A pair of latitude and longitude coordinates

For example:

[wpv-map-marker map_id='map-3' marker_id='marker-[wpv-post-id]' lat='lat-shortcode' lon='lon-shortcode'][/wpv-map-marker]

Where:
- you can pass the lat and lon shortcode to lat and lon attributes. I hope its clear.

[Luigi Bella]

Hi Minesh, I really appreciate your help!
Sorry it is taking me so long to figure out how to do what you're describing.

Here is a video of what I've tried, can you see why no markers show up but all the post data displays below the map?

hidden link

Thanks again!

[Minesh]

Better, can you please share problem URL where you added the view and access details so I can quickly review the issue and try to fix it.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Luigi Bella]

H there, thanks again for your help.

Unfortunately, I don't have permission to share server access as my client has the server restricted to access by only their IP with a VPN.

Here is the code I am using:

[wpv-layout-start]
	[wpv-items-found]
[wpv-map-render map_id="map-1" map_height="80vh" cluster="on" spiderfy="on" scrollwheel="off" map_type_control="off" street_view_control="off" cluster_grid_size="30"][/wpv-map-render]
	<!-- wpv-loop-start -->
	<wpv-loop>      
[wpv-map-marker map_id='map-1' marker_id='[wpv-post-id]' lat='[acf field="lat"]' lon='[acf field="lng"]'][/wpv-map-marker]

      [wpv-post-body view_template="loop-item-in-in-action-map"]
	</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]

The ACF Fields were copied from the map at hidden link.
That is the map I am trying to recreate.

Any help is appreciated!

[Minesh]

As far as I can see - it looks like there is no issue with the code you are using.

What if you try to register the shortcode acf at:
=> Toolset-> Settings-> Front-end Content => Third-party shortcode arguments

Please let me know the feedback if it works or not.

[Luigi Bella]

Thank you!

Updating the code to the following worked:

[wpv-layout-start]
    [wpv-items-found]
[wpv-map-render map_id="map-1" map_height="80vh" fitbounds="off" general_zoom="3" single_zoom="10" cluster="on" spiderfy="on" scrollwheel="off" map_type_control="off" street_view_control="off" background_color="#0f0f25" style_json="//dev.pdc.org/wp-content/plugins/toolset-maps/resources/json/Silver.json" cluster_min_size="2" cluster_grid_size="20" cluster_max_zoom="16"]Loading PDC In Action Map[/wpv-map-render]
<!-- wpv-loop-start -->
    <wpv-loop>      
[wpv-map-marker map_id='map-1' marker_id='[wpv-post-id]' lat='[wpv-post-field name='lat']' lon='[wpv-post-field name='lng']'][/wpv-map-marker]      
 
      [wpv-post-body view_template="loop-item-in-in-action-map"]
    </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]

Now I'm just stuck on a way to be able to click on a marker to see the Post Title and a Year custom field from the post in a window. Any ideas on how I can achieve this?
Once again, the desired functionality can be seen at hidden link

Thanks for all your help!
- Luigi

[Minesh]

You can use the following code to display the post title and year cusotm field with marker popup. Change the "year" with your field slug if needed.

[wpv-map-marker map_id='map-1' marker_id='[wpv-post-id]' lat='[wpv-post-field name='lat']' lon='[wpv-post-field name='lng']']
[wpv-post-title] <br />
[types field="year"][/types]
[/wpv-map-marker]

[Luigi Bella]

That worked perfectly!

and if you don't mind helping with these last couple questions, it would be a huge help.

The Year custom field has values ranging from 2007 to 2019, and I was able to create a default option called All Years as I created the Filter. That is working well. But would it be possible to have all the years listed, still have the All Years option, but have the entry 2019 be the default when a visitor lands on the page?
So they could choose another year or the All Years option, but 2019 would be the default?

And no matter what selector I try, I can't seem to adjust the styling of the Filter Dropdowns. Would you happen to have a code example of how I can do this?

I'm attaching a screenshot of how it looks now, my goal is to increase the padding between the text and the dropdown border and get rid of the rounding of the border corners.

Thank so much!

[Minesh]

Glad to know that solution I shared works and help you to resolve your original issue.

May I kindly ask you to open a new ticket with your every new question you may have. As per our support policy, we entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery.

[Luigi Bella]

Thank you for you for your help!