[Resolved] Dynamic Map Marker Coloring

[Author]

Posts

[MattI4840]

Tell us what you are trying to do?

I have a custom user type called "technician", when creating a technician they are assigned a color using a color picker field. They are also assigned a device which I'm using an MDM solution to control, as well as to get the devices location. I'm then using a map view to plot out where each of the technicians are via the GPS coordinates from their device. The client has requested that the map pins be colored to match the color assigned to the technician.

Is there any documentation that you are following?

I've reviewed all of the following:

https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes

https://toolset.com/forums/topic/change-map-marker-icon-dynamically/

https://toolset.com/course-lesson/displaying-a-list-of-posts-on-a-map/#marker-icon

https://toolset.com/forums/topic/map-not-sizing-correctly-map-markers-not-sizing-correctly/

hidden link

I understand that other color marker images can be uploaded and used via the 'marker_icon' argument, but I would have to upload one for every color in the hex spectrum which isn't a viable option. Have you come across this before and if so any advice on how to tackle this would be greatly appreciated.

Thanks,
Matt

[Luo Yang]

Hello,

There isn't such kind of feature within Toolset Maps plugin: Change the marker icon color or in the hex spectrum.

I have checked the Google map document you mentioned above:
hidden link
There isn't color property for marker icon, so I don't think it will easy to change the marker color.

However, I can provide your some JS codes clue to find the markers in google map created with Toolset Maps plugin, for example:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
    var markers = WPViews.view_addon_maps.markers;
	var map_1_markers = markers['map-1']; // here replace "map-1" with your map ID
  	//console.log(map_1_markers);
            for(var index in map_1_markers) { 
       console.log(index);
    }
});

Above codes will be able to catch and output each marker's ID in your browser console window

[MattI4840]

Lou,

I will give that code a look, but what I decided to do late last night was to write a php function that grabs the needed color code and creates a svg image using it. I'm then converting that svg into a png using 'Imagick()' and passing the path to that png to the 'marker_icon' argument. I am still in testing but it seems to be a viable solution thus far, just need to get around the pesky file lock on the svg after it's created to smooth out the process. I'll close this ticket out, but again thank you for taking a look, and providing another avenue if the solution I came up with doesn't work out.

Thanks,
Matt