react native animated map clusters
Module that adds map clustering with smooth marker's movement
Note
You need to install https://github.com/react-community/react-native-maps
Installation
yarn add react-native-animated-map-clusters# or npm i --save react-native-animated-map-clusters
Usage
import Marker from 'react-native-maps';import ClusteringMap from 'react-native-animated-map-clusters';import marker from './marker.png'; <ClusteringMap = = = = = => markers</ClusteringMap>
Props
- All MapView props
- minDistance:
number
Distance to collapse markers. Default: 30
- moveDuration:
number
Marker's movement duration (ms). Default: 300
- onPressCluster:
function
onPress prop for clusters. Receive Cluster
object:
type Point ={ longitude: number, latitude: number,}type Cluster = { points: Array<Point>, center: Point,}
- onPressCluster:
function
onPress prop for marker. Receive marker's coordinate and index in children array
- innerRef:
function
ref prop for MapView
-
children:
Marker | Array<Marker>
Only Marker's supported now. -
showClusters:
boolean
Set true, if you want to show clusters components. Otherwise markers will be merged without count indicator. -
renderCluster:
(cluster: Cluster, props: Props) => ReactNode,
Method for render custom clusters.
Note: For forwarding ref prop in marker use innerRef prop. You should to use cluster component which will be greater then marker.
Functions
- animatedMoveToMarkers:
(markers: Point, duration: number) => void
Set region which contain all markers
Example:
thismap;