A modern, performant, and fully-typed map clustering library for React Native. Built on top of the battle-tested supercluster library, RN Maps Clustering provides a simple, declarative API for adding beautiful and efficient marker clustering to your react-native-maps components.
- High Performance: Leverages supercluster for lightning-fast clustering of thousands of points.
- Fully Typed: Written entirely in TypeScript for a superior developer experience.
- Declarative API: Works just like react-native-maps. Simply wrap your <Marker /> components.
- Customizable: Easily provide a custom component to render clusters.
- Spiderfier: Automatically spreads out markers at max zoom level for easy interaction.
- Modern: Built with modern React hooks and best practices.
-
Install the library and its peer dependencies:
npm install rn-maps-clustering react-native-maps # or yarn add rn-maps-clustering react-native-maps # or pnpm add rn-maps-clustering react-native-maps -
Follow the installation instructions for react-native-maps.
Using RN Maps Clustering is as simple as replacing <MapView /> with <ClusteredMapView />.
You can easily customize the appearance of clusters and handle press events.
Pass a renderCluster prop to render your own custom cluster component. The function receives the cluster object and an onPress handler.
Use the onClusterPress prop to get information about a pressed cluster and its children.
ClusteredMapView accepts all standard MapView props plus the following:
clusteringEnabled | boolean | true | Toggles clustering functionality. |
radius | number | 40 | Cluster radius in pixels. |
maxZoom | number | 20 | Maximum zoom level to cluster points. |
minPoints | number | 2 | The minimum number of points to form a cluster. |
onClusterPress | (cluster, children) => void | undefined | Callback when a cluster is pressed. |
renderCluster | (cluster, onPress) => React.ReactNode | undefined | A function to render a custom cluster marker. |
spiralEnabled | boolean | true | Spreads out markers at max zoom. |
clusterColor | string | #00B386 | The color for the default cluster marker. |
clusterTextColor | string | #FFFFFF | The color for the text on the default cluster marker. |
... and more supercluster options (minZoom, extent, nodeSize).
Contributions are welcome! Please see the Contributing Guide for more details on how to get started.
This project is licensed under the MIT License - see the LICENSE file for details.