React Native MapView clustering component for iOS + Android
npm install react-native-cluster-map![license]()



React Native MapView clustering component for iOS + Android
---
Made by CODEMPIRE
| Zoom in | Zoom out |
| --------------------------------------------------------- | ----------------------------------------------------------------------- |
| !Example zoom out | !Example zoom in |
| Cluster Expand | Nested Cluster Expand |
| !Example cluster expand | !Example nested cluster expand |
1. Install react-native-maps
2. Install this component
``bash`
npm install --save react-native-cluster-map
`javascript
import { Marker } from 'react-native-maps';
import { ClusterMap } from 'react-native-cluster-map';
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
;
`
You can customize cluster marker with renderClusterMarker prop
> _MyMap.jsx_
`javascript
import { Marker } from "react-native-maps";
import { MyCluster } from "./MyCluster";
// ...
renderCustomClusterMarker = (count) =>
render () {
const { markers, region } = this.state;
return (
region={region}
>
{markers.map((marker) => (
))}
)
}
`
> _MyCluster.jsx_
`javascript
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export const MyCluster = (props) => {
const { count } = props;
return (
);
};
const styles = StyleSheet.create({
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
});
``
| Props | Type | Default value | Note |
| ------------------------ | ------------ | ----------------------------------------------------- | ---------------------------------------- |
| superClusterOptions | _Options_ | { radius: 16, maxZoom: 15, minZoom: 1, nodeSize: 16 } | SuperCluster lib options |
| isClusterExpandClick | _boolean_ | true | Enables cluster zoom on click |
| region | _Region_ | _required_ | Google Map Region |
| priorityMarker | _ReactNode_ | null | Marker which will be outside of clusters |
| renderClusterMarker | (_object_):ReactNode | undefined | Returns cluster marker component |
| clusterMarkerProps | _object_ | undefined | Additional ClusterMarker props |
| provider | _'google'_ or _null_ | 'google' | Map provider. If null will use the platform default one (Google Maps for Android and MapKit for iOS) |
| style | _StyleProp_ | absoluteFillObject | Styling for MapView |
---
| Props | Type | Default | Note |
| ------------------------ | ------------ | ----------------------------------------------------- | ---------------------------------------- |
| isOutsideCluster | _boolean_ | false | Prevent child from clusterization. _Required_ for not a Marker children (e.g. Polygon, Polyline, Circle) |
---
> Also contains react-native-maps \
| Event Name | Returns | Notes |
| ------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------- |
| onClusterClick | ({ clusterId: number, coordinate : LatLng }, children: Marker[]) | Callback that is called when the user pressed on the _cluster_ marker |
| onZoomChange | void | Callback that is called with updated map zoom in number |
---
> Also contains react-native-maps \