Dear staff,
I need to apply a custom font family on the numbers that are shown over the clusters in toolset maps.
I see here: https://toolset.com/2016/01/toolset-maps-1-0-released-display-anything-on-google-maps-with-toolset/ that you can edit the font color:
jQuery( document ).ready( function() {
var options = {
styles: [
{
'url':'<em><u>hidden link</u></em>',
'height':'26',
'width':'30',
'textColor':'red'
},
{
'url':'<em><u>hidden link</u></em>',
'height':'35',
'width':'40',
'description':'lala'
}
],
calculator: function( markers, numStyles ) {
var index = 0;
var count = markers.length;
var dv = count;
while (dv > 0) {
dv = parseInt(dv - 5, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: count,
index: index
};
}
};
WPViews.view_addon_maps.set_cluster_options( options, 'map-3' );
});
, but I have no clue about how to style the font-family.
When inspecting the code, I see that all the css information of the numbers inside the clusters is set as inline styling inside the loop, so I cannot point to the clusters via css.
How could you style the text inside the clusters? I see the 'textColor':'red', but is there any option to set the font-family?
I want the same font-family for all the clusters.
Thank you,
Mario
Hi Mario,
Thank you for contacting us and I'll be happy to assist.
I'm afraid, the "Font-family" or CSS "class / ID" is not among the accepted options for cluster markers ( ref: hidden link ).
A workaround method involves cycling through all div elements found inside the map container ( .wpv-addon-maps-render ) and assign a custom class only if a file with a specific name is found to be used as a background image:
jQuery( document ).ready( function() {
setTimeout( function() {
jQuery('div.wpv-addon-maps-render div').each(function() {
var bg = jQuery(this).css('background-image');
// replace this to match the file name of marker image
var substring = "m1.png";
if (bg.indexOf(substring) !== -1) {
jQuery(this).addClass( "markerContainer" );
}
});
// wait for 10 seconds to execute this function so that the map has finished loading
} , 10000 );
});
After that, you can target that new class, to apply custom CSS styles to the cluster markers:
.markerContainer {
font-family: Calibri !important;
}
Important note: This workaround can have a negative impact on performance and should only be used if absolutely required.
regards,
Waqar
Thank you Waqar,
this is a brilliant workaround.
However, as final decision, we will not implement it to avoid a negative impact on the performance.
My final question would be how to change the color of the text of the cluster markers.
You can see here that the text is black, however we need it to be white: hidden link
Now we have not found the way without having to change also the cluster background images.
Is there a possibility to change text color without changing the background images?
thank you,
Mario
Hi Mario,
Thanks for writing back.
Your observation is correct and the way "WPViews.view_addon_maps.set_cluster_options" function works ( https://toolset.com/documentation/user-guides/customizing-cluster-markers-with-javascript-functions/ ), the URL for the background image needs to be specified, in order to change the cluster's text color.
To make your custom script future proof, you can download the image file from the plugin's directory ( hidden link ) into your theme's folder and load it in your script from that location/path. This way, it will not be affected, if future plugin versions bring in any change in the file name or path.
I hope this helps.
regards,
Waqar
Thank you very much Waqar.
Best,
Mario
