agm-marker-cluster does not show markers after zoom

Question

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.

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

Answer 1

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>