<!--
{
  "availability" : [
    "MapKit JS: 5.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/Map/annotationForCluster",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Property",
  "symbol" : {
    "kind" : "Instance Property",
    "modules" : [
      "MapKit JS"
    ],
    "preciseIdentifier" : "instp/mapkit.Map/annotationForCluster"
  },
  "title" : "annotationForCluster"
}
-->

# annotationForCluster

A delegate method for modifying an annotation that represents a group of annotations that the framework combines into a cluster.

```
get annotationForCluster():
    | ((clusterAnnotation: ClusterAnnotation) => Annotation | undefined)
    | null;
set annotationForCluster(
    value:
        | ((clusterAnnotation: ClusterAnnotation) => Annotation | undefined)
        | null,
);
```

## Parameters

`clusterAnnotation`

An annotation that represents a group of annotations that MapKit JS combines into a cluster.

## Discussion

MapKit JS invokes this delegate method when it creates a cluster annotation, or when a member annotation within the cluster changes.

You can return any of the following:

- The same cluster annotation with its properties, such as title or subtitle, modified.
- A new annotation, such as an image annotation, to represent the cluster.
- No return value. If you don’t return an annotation, MapKit JS uses the default annotation. You don’t need to return a default annotation even if you modify it (as the following code example shows for the cities cluster); the map displays the modifications.

The following example creates annotation clusters for cities and parks:

```javascript
map.addAnnotations(cities.map(city =>
    new mapkit.MarkerAnnotation(city.coordinate, {
        title: city.name,
        subtitle: city.population,
        glyphImage: city.landmarkImage,
        displayPriority: Math.max(city.population / 10000, 1000),
        clusteringIdentifier: "city"
    })
));

map.addAnnotations(parks.map(park =>
    new mapkit.ImageAnnotation(park.coordinate, {
        title: park.name,
        url: { 1: park.image },
        displayPriority: 250,
        clusteringIdentifier: "park"
    })
));

map.annotationForCluster = function(clusterAnnotation) {
    if (clusterAnnotation.clusteringIdentifier === "city") {
        clusterAnnotation.title = "Cities";
        clusterAnnotation.subtitle = clusterAnnotation.memberAnnotations
            .reduce((total, clusterAnnotation) => total + clusterAnnotation.population, 0);
    } else if (clusterAnnotation.clusteringIdentifier === "park") {
        return new mapkit.ImageAnnotation(clusterAnnotation.coordinate, {
            title: "Parks",
            url: { 1: "tree.png" }
        });
    }
};
```

For more information, see [Clustering annotations](/documentation/MapKitJS/clustering-annotations).

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)