[Resolved] Customizing the Map Cluster Icons

[Author]

Posts

[robS-4]

On the following documentation page:
https://toolset.com/documentation/programmer-reference/maps/customizing-cluster-markers-with-javascript-functions/

I see where I can customize the map marker images for cluster points. I've done that without any issues by providing custom PNGs in the code. But what I cannot figure out how to do is modify the breakpoints for how many map markers are represented under each cluster image.

According to this page, by default, clusters are displayed as colored circles with size depending on the number of markers they contain:

* a blue circle indicates less than 10 markers,
* a yellow circle indicates 10 to 99 markers,
* a red circle indicates 100 to 999 markers,
* a pink circle indicates 1000 to 9999 markers,
* a violet circle indicates 10000 markers or more.

I need to change the breakpoints to:
* a small circle for less than 50 markers in the cluster
* a second image for 50-99 markers in the cluster
* the third image for 100+ markers in the cluster

I assume I need to edit the code below, but I don't know how to edit it. Can you help me?

You can view the map at hidden link

jQuery( document ).ready( function() {
var options = {
calculator: function( markers, numStyles ) {
var index = 0, count = markers.length, dv = count, result = {};
while (dv > 0) {
dv = parseInt(dv - 5, 10);
index++;
}
index = Math.min(index, numStyles);
result = {
text: count,
index: index
};
return result;
}
};
WPViews.view_addon_maps.set_cluster_options( options, 'map-1' );
});

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please send me amdin access details and let me review your setup and check what would be the possible solution.

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

[robS-4]

The map is visible at:
hidden link

The active view is "Well Map" (ID: 44):
hidden link

[Minesh]

Can you please check now: hidden link

I've adjusted the custom JS code as given under:

jQuery( document ).ready( function() {
  var options = {
    styles: [
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '35',
        'width': '35',
        'textColor': '#eee'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '45',
        'width': '45',
        'textColor': '#eee'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '55',
        'width': '55',
        'textColor': '#eee'
      }
    ],
    calculator: function( markers, numStyles ) {
      var index = 0, count = markers.length, dv = count, result = {};
      
      while (dv > 0) {
        dv = parseInt(dv - 50, 10);
        index++;
      }
     
      index = Math.min(index, numStyles);
      result = {
        text: count,
        index: index
      };
      return result;
    }
  };
  WPViews.view_addon_maps.set_cluster_options( options, 'well-map-1' );
});

Can you please confirm it works as expected.