Feature Request: Implement Annotations For Clusters

[nikischin]

I would like the customize the annotations used for clustering. Therefore I would recommend implementing annotationForCluster and possibly also memberAnnotations.

More Info: https://developer.apple.com/documentation/mapkitjs/map/2991319-annotationforcluster
And: https://developer.apple.com/documentation/mapkitjs/annotation/2991318-memberannotations

[nikischin]

There are different ways of implementing the annotationForCluster, however, I came up with the idea to just use an additional prop for the <Annotation /> component to determine whether it is a normal Annotation or an Annotation for a cluster.

Like this

<Map>
  <Annotation>I am a normal Annotation without a cluster</Annotation>
  <Annotation clusteringIdentifier='cities'>I am a normal Annotation within the cities cluster</Annotation>
  <Annotation clusteringIdentifier='cities' forCluster={true}>I am a AnnotationForCluster for the cities cluster</Annotation>
</Map>

Alternatively we could implement the <AnnotationForCluster /> as a separate component, which would introduce duplicate code but keep the codebase simpler. Like we already do with <Annotation/> and <Marker/>. What do you think about this @Nicolapps ?

For the memberAnnotations we could provide a hook like const memberAnnotations = useMemberAnnotations() which can be used by any components inside <Annotation forCluster/> and would provide the mapKit js memberAnnotations data like title, subtitle, ... and maybe it would be also beneficial to support the data property for this case.

[Nicolapps]

Thank you for your proposal! Having a component like the one in your code block sounds reasonable at first, but it’s not clear how we would get the member annotations. A hook like you propose doesn’t fully address the solution because users might want to set props on the annotation itself depending on the member annotations (e.g. to set the title or glyph of the annotation depending on the number of annotations in the cluster). Moving the hook above in the React tree doesn’t seem to clearly address the issue either, as it’s not clear how the annotations and the cluster annotations would be linked.

I think that ideally, mapkit-react would manage clusteringIdentifier for users themselves. I think that something like this could be nice to use:

<Map {…}>
  <AnnotationGroup annotationForCluster={(memberAnnotations) => <Annotation {…} />}>
    {/* All annotations within the AnnotationGroup automatically get the same clustering identifier */}
    {viewpoints.map(viewpoint => <Annotation {…} />}
  </AnnotationGroup>
</Map>

If we go this way, we could deprecate clusteringIdentifier.