[Resolved] Custom coloured map markers based on dynamic source list

[Author]

Posts

[kelvinB]

Tell us what you are trying to do?
I am trying to build a custom listing of Map Markers. I would like to mark locations we have worked in the past 2 years with different coloured map markers by category cor custom filed 'type'

Is there any documentation that you are following?

https://toolset.com/lesson-placement/lesson-placements-1622939-1620841/ - But I cannot see the option for custom markers under map settings

Is there a similar example that we can see? See screenshot on google my maps

Not yet
What is the link to your site? Not yet

[Minesh]

Hello. Thank you for contacting the Toolset support.

Are you using Map Block and View block to display the map marker?

Can you please share problem URL and admin access details as well as for what marker icon you want to use with what category?

*** 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.

[Minesh]

Can you please share problem URL where you want to display different map markers amd based on what taxonomy or custom field option.

I will require informqation like X marker you want to display for x category or custom field.

[kelvinB]

Hello Minesh,

I have set up custom categories for Jobs, I need the markers to show as follows:

ATC - Yellow Marker
MCC - Red Marker
PB - Blue Marker
SS - Green Marker
PH - Orange Marker

then the ability to add coloured markers for future categories,

the view is not working as it should as it is not showing the filters I have created or the markers in any shape or form.

hidden link

Please review and get back to me asap

Kind Regards

[Minesh]

the view is not working as it should as it is not showing the filters I have created or the markers in any shape or form.

hidden link

Please review and get back to me asap:
===>
I see you added the map block within the view block - that is not supported. In addition to that I see the view loop is also not cofigured properly. As I understand you want to display list of map. I suggest you start to create map block and view from scratch and follow the following guide.

Can you please first configure view with map block by following the steps given with the following Doc:
- https://toolset.com/course-lesson/displaying-a-list-of-posts-on-a-map/

Once you configure map block and view that displays correct records please get back to me and I'm happy to guide you with the details about how to display different map markers based on different terms.

[kelvinB]

Hi Minesh,

I have updated the map now and the view loop looks to be working with Ajax update - although that I very slow. The new URL is:

hidden link

As you can see the first filter is Classifications .... This is the Filter on which different colour markers should be based. It is in the database as a Taxonomy.

For some reason - the map does not show all markers (As Expected) if all the filters are cleared.

[Minesh]

For some reason - the map does not show all markers (As Expected) if all the filters are cleared.
===>
I see with your view - you enable the pagination that displays 10 results per page.
hidden link

That is why you see only ten (10) markers on the map.

Do you want that you do not want to display all markers on map and markers also respect the filters irrespective of pagination?

[kelvinB]

Hi there,

I will put it to the client - possible give them 2 options..

More important is the custom markers

I want classification MCC to show maker-red, PB to show marker-blue, ATC to show marker-Yellow and SS to show Marker-green etc.

[Minesh]

I've enable the legacy mode so that we can create/edit content template in legacy mode:
=> https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

So, from the following settings page from the "Editing experience" section, I've enabled the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build":
=> hidden link

Then I've created the following content template and added the following conditional code so that we can display different map marker icon based on the different taxonomy terms:
=> hidden link

[wpv-conditional if="( CONTAINS(#(classification),'ATC') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wpv-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/uploads/2025/01/marker-yellow.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( CONTAINS(#(classification),'MCC') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wp0v-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/uploads/2025/01/marker-red.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( CONTAINS(#(classification),'PB') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wpv-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/uploads/2025/01/marker-blue.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( CONTAINS(#(classification),'SS') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wpv-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/uploads/2025/01/marker-green.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( CONTAINS(#(classification),'PH') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wpv-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/plugins/toolset-maps/resources/images/markers/Shop-3.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

Where:
- You can add more conditoinal display as reuqired.

Then on the edit page where you added your view and map block:
=> hidden link
- I've removed the marker from the map block
- I've added the content template we created above using the content template block within the view's loop.

More info:
- https://toolset.com/documentation/legacy-features/views-plugin/#conditional-output-in-views
- https://toolset.com/documentation/legacy-features/views-plugin/displaying-taxonomies-conditionally/
- https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-marker

Can you please check now: hidden link

[kelvinB]

Hi Minesh,

Thank you - that is sort of working...

There are still 3 issues.

1. the red marker is not working despite the path being correct.
2. When no filters are selected and multiple 'Classifications' appear on one map.(example Year 2023 with all classifications) - All markers default to yellow.
3. When using pagination - moving to the next page does not update the map with the filtered content markers. Instead - the map enters in a default location in a different country.

I need the marker to be correct for the classification as shown for filtered and non-filtered content similar to the 'My maps' shown at the start of this thread and new image uploaded.

[Minesh]

1. the red marker is not working despite the path being correct.
==>
Done. There was a typo for red marker that was corrected as given under where marker_id was added as marker_id='marker-[wp0v-post-id]' which I corrected as: marker_id='marker-[wpv-post-id]'. Removed additional zero.

[wpv-conditional if="( CONTAINS(#(classification),'MCC') )"]
[wpv-map-marker map_id='map-11' marker_id='marker-[wpv-post-id]' marker_icon='//castle-traffic.co.uk/wp-content/uploads/2025/01/marker-red.png' marker_field='wpcf-location'][/wpv-map-marker]
[/wpv-conditional]

2. When no filters are selected and multiple 'Classifications' appear on one map.(example Year 2023 with all classifications) - All markers default to yellow.
===>
Actually - all markers are displayed but yellow marker is overriding it as most of the locations are nearby. You can use spiderfy marker to dispaly all markers when markers are near by. I've enable the Spiderfy overlaping marker setting with the maps block. Please check screenshot:
- hidden link

3. When using pagination - moving to the next page does not update the map with the filtered content markers. Instead - the map enters in a default location in a different country.
===>
This is fixed. You can click on the marker as I've enabled the spiderfy marker.

[kelvinB]

Hi Minesh, Thank you for your help with this.

I am conscious of the fact that you do not work the same hours as us in England. I was wondering where can I get additional support. There are still some minor issues. Like the brown marker and purple marker I have added to the template do not show.

Please can you see why

[Minesh]

Well - if you filter the results using the Classification filter you added and select the optoin "NMU" and you will be able to see the purpule marker and for "MSA" you will see the brown marker.

AS shared before with my reply:
- https://toolset.com/forums/topic/custom-coloured-map-markers-based-on-dynamic-source-list/#post-2794374

Do you want that you do not want to display all markers on map and markers also respect the filters irrespective of pagination?

For now - the first page as you have pagination added you will see only those 10 result marker on the page.

[kelvinB]

Hi there,

Thank you - we are getting really close to a usable map.

Is there a way to change the drop down for classification to 'Multi-select' ,

If so I might duplicate the page and trial 2 versions. one with multi select and one as is.

Thanks again

[Minesh]

If you edit the page where you added the view block:
=> hidden link

Select the block navigation bar at top of your edit page and select the custo search filter and on right sidebar you will see the "Field Options" where you can configure how you want to display the custom search filter. Please check the following screenshot:
- hidden link

Once you select the option "set of checkboxes" save the page and check on frontend and you will see the Classification filter options will be displayed as checkboxes.

More info:
- https://toolset.com/course-lesson/creating-a-custom-search/