[Resolved] customizing cluster

[Author]

Posts

[kayser]

Tell us what you are trying to do?
customizing cluster

Is there any documentation that you are following?
https://toolset.com/documentation/programmer-reference/maps/customizing-cluster-markers-with-javascript-functions/

What is the link to your site?
hidden link

Hello,
Is this method still valid with the new versions of WordPress and Toolset?
I can't seem to get it to work.
GuyK

[Minesh]

Hello. Thank you for contacting the Toolset support.

Are you using google map API?

What customization you are looking for?

[kayser]

Hello
yes with google map
i want change the cluster picture with this

[Christopher Amirian]

Hi,

Minesh will be available tomorrow and will get back to you. Thank you for your patience.

You can learn more on how to change the cluster icon here:

https://toolset.com/forums/topic/customizing-the-map-cluster-icons/

[Minesh]

Have you checked the refernce ticket shared by Christopher with the previous reply?

Does that help you to change the cluster icon?

[kayser]

Yes, I read it, and it's the same as in the first link in my message.
The problem is that I haven't been able to integrate it.
So for now, it's not working for me.

[Minesh]

Can you please share problem URL and admin access details and let me review what could be the possible solution in your case.

Also, you want all cluster marker having same icon?

*** 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 check now: hidden link

I've adjusted the code added to your view's custom JS box as given under:

jQuery( document ).ready( function() {
  

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

});

The issue was your map id is "13" not "map-13".

[kayser]

Thank you a lot
The cluster image is distorted. Its size is 60/43 px.
Should it be square?

[Minesh]

Can you please check now: hidden link

I've adjusted the code as given under:

jQuery( document ).ready( function() {
  

      var options = {
    styles: [
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '43',
        'width': '60',
        'textColor': '#333'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '43',
        'width': '60',
        'textColor': '#333'
      },
      {
        'url': '<em><u>hidden link</u></em>',
        'height': '43',
        'width': '60',
        'textColor': '#333'
      }
    ],
    calculator: function( markers, numStyles ) {
      var index = 0, count = markers.length, dv = count, result = {};
      while (dv > 0) {
        dv = parseInt(dv - 1, 10);
        index++;
        //console.log(dv+"=="+index);
      }
      index = Math.min(index, numStyles);
      
        //console.log(numStyles+"=="+index);
      
      result = {
        text: count,
        index: index
      };
      return result;
    }
  };
  WPViews.view_addon_maps.set_cluster_options( options, '13' );

});

You can play with height and width attribute and see if that helps.

[kayser]

excuse me for the last question