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

Question

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:

How to use the Calculator
How to set ClustersOptions

Thanks for any help!

My code:

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">

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

Did you find an answer that worked for you? – Tony Brasunas Jan 19 '21 at 17:09 — Tony Brasunas, Jan 19 '21 at 17:09

Tony Brasunas · Answer 1 · 2020-10-14T05:43:59.447

In your HTML you need to configure your agm-marker-cluster instances.

To utilize your calculator function, as documented here, you specify the calculator property:

    <agm-marker-cluster [calculator]="calculateFunction">

And to set your minimum size of a cluster, use the minimumClusterSize property.

So that would give you a component invocation like this:

    <agm-marker-cluster 
        [calculator]="calculateFunction"
        [minimumClusterSize]="clusterOptions.minimumClusterSize"
        [styles]="clusterStyles">
      <agm-marker>
        ...
      </agm-marker>
    </agm-marker-cluster>

Finally, in your calculateFunction, you handle the incoming parameters correctly, but you can leave off the title in your return object. So you can just return like this:

        ... 

        return {
            text: text,
            index: index,
        }

Hope that's helpful!

It's been a while since you posted, so perhaps you already figured this out, but I'm adding this answer nonetheless in case others come looking for how to configure this.

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

1 Answers1