MarkerClusters - Calculate and ClusterOptions

[lmachado-eti]

Problem:

Hello,

I need help to implement MarkerCluster with Calculator. Basically I need to group some markers in a Cluster and use the function Calculator to dynamic show images and text in each Marker.

Actually my map works, I show the Markes and some Clusters, but I can use Calculator to configure this 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).

So my problems is:

• How set Calculator
• Hos set Clusters Options

Thanks any help!

My code:

1. My Map Declaration (map.component.html):

  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="mapStyle"
       [scaleControl]="scaleControl" [zoomControl]="zoomControl" [zoomControlOptions]="zoomControlOptions"
       [disableDoubleClickZoom]="disableDoubleClickZoom" [mapTypeControlOptions]="mapTypeControlOptions" 
       [scrollwheel]="scrollwheel" [panControl]="panControl" [streetViewControl]="streetViewControl"
       [draggable]="draggable">
        <agm-marker-cluster [styles]="clusterStyles" [minimumClusterSize]="clusterOptions.minimumClusterSize" [gridSize]="clusterOptions.gridSize"
       [averageCenter]="clusterOptions.averageCenter">
           <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude" 
           ></agm-marker>
       </agm-marker-cluster>
           
   </agm-map>

2. Only 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/core - 5.2.6
@agm/core - 1.0.0-beta.2"
@agm/js-marker-clusterer - 1.0.0-beta.2"

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.