<mgl-geojson-source
  id="pois"
  [cluster]="true"
  [clusterMaxZoom]="20"
  [clusterRadius]="100"
  [data]="data"
></mgl-geojson-source>
<mgl-markers-for-clusters source="pois">
  <ng-template mglPoint let-feature>
    <div class="marker">
      <stapps-poi-marker @fade [feature]="feature"></stapps-poi-marker>
    </div>
  </ng-template>
  <ng-template mglClusterPoint let-feature>
    <div class="marker">
      @if (
        'pois'
          | mglClusterLeaves
            : feature
            : clusterPreviewCount - (feature.properties.point_count > clusterPreviewCount ? 1 : 0)
          | async;
        as leaves
      ) {
        @for (feature of leaves; track feature.id) {
          <stapps-poi-marker @fade [feature]="feature"></stapps-poi-marker>
        }
        @if (feature.properties.point_count > leaves.length) {
          <div @fade class="ellipsis">+{{ feature.properties.point_count - leaves.length }}</div>
        }
      }
    </div>
  </ng-template>
</mgl-markers-for-clusters>
