Angular2+ Angular Google Maps - Configure Map Clusters, Calculator and Options

I need help to implement MarkerCluster with a calculator function. Basically I need to group some markers in a cluster, and use a Calculator to dynamically show images and text in each Marker.

Actually my map works, I show the Markers and some Clusters, but I cant configure MapOptions to determine the minimum size of a cluster, and I can't get my calculator function to configure the images according to my values.

To represent my actual situation and what I need, please see this image: https://ibb.co/cqkG8S

The image thats replace the original markers image is divided by 2 squares, the first (green) is a count of elements, the second (blue or red) represents the elements with problems (the cluster with problems show red square).

In the same image, I have the original markers of google thats not replaced by my images. In this case, I believe the ClusterOptions is not configured.

So my problems is:

1. How to use the Calculator
2. How to set ClustersOptions

Thanks for any help!

My code:

1. 
   My Map Declaration (map.component.html):
   
   <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
   <agm-marker-cluster [styles]="clusterStyles" >
   <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
   </agm-marker-cluster>
   </agm-map>
2. 
   The important parts of my component (map.component.ts)
   
   export class MapComponent implements OnInit {
   
   @Input('markers') markers: MapMarker[];
   
   clusterStyles: ClusterStyle[];
   clusterOptions: ClusterOptions;
   
   constructor() { }
   
   ngOnInit(){
   this.clusterStyles = [
   {
   textColor: "#FFFFFF",
   url: "assets/markers/marker1.png",
   height: 36,
   width: 58
   },
   {
   textColor: "#FFFFFF",
   url: "assets/markers/marker2.png",
   height: 36,
   width: 58
   }
   ];
   
   this.clusterOptions = {
   gridSize: 60,
   minimumClusterSize: 2,
   averageCenter: true
   }
   }
   
   //Calculate Function - to show image em formatted text
   calculateFunction(markers: MapMarker[], numStyle: number){
   
   let index: number = 0
   let title: string = "";
   let text: string = "<div style=\"position: relative; top: -4px; text-align: center; margin: 0px auto; width: 60px;\"> <div style=\"display: inline-block; width: 29px;\">{{ELEMENTS}}</div><div style=\"display: inline-block; width: 29px;\">{PROBLEMS}</div></div>";
   let qtdNodes: number = 0;
   let qtdEvents: number = 0;
   
   for (let i of markers){
   qtdNodes += i.qtdEvents;
   qtdEvents += i.qtdEvents;
   }
   
   index = (qtdEvents == 0) ? 1 : 2;
   
   text = text.replace( "{ELEMENTS}", qtdNodes.toString() );
   text = text.replace( "{PROBLEMS}", qtdEvents.toString() );
   
   return {
   text: text,
   index: index,
   title: title
   }
   }
   }

Versions

• Angular - 5.2.6
• agm core - 1.0.0-beta.2
• agm js-marker-clusterer - 1.0.0-beta.2

Continue reading...