0

I have this section for clustering markers on a map with a custom cluster image:

   <agm-marker-cluster
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>

(In this example the marker icon is static, in my original code it is dynamic and comes from a url - but I get the same result)

The problem is that when the map loads I see the icon for a second (so it is loaded and accessible) but once the clusters appear (with the custom image) I can zoom in to a cluster - but it will never break into markers. I'll just see the cluser circle with the number in it.

enter image description here

My question is: What is keeping the clusters from breaking into markers?

Doron Goldberg
  • 643
  • 1
  • 9
  • 23

1 Answers1

0

give your clusterer a minimum cluster size.

<agm-marker-cluster
  minimumClusterSize= "5"
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>
Sandeep Negi
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 03 '22 at 22:10