# React Native Map Clustering
React Native module that handles map clustering for you.
this is a form from https://github.com/venits/react-native-map-clustering , using it till PR accepted.
use clusterFontFamily to customize your cluster font style
Works with Expo and react-native-cli 🚀
This repo is proudly sponsored by:
Build forms, surveys and polls for React Native apps.
Demo
Spiral
Converting same locations in spiral view (done automatically)
Installation
// clustering modulenpm install react-native-map-clustering-custom-font --save // and only if you haven't installed it beforenpm install react-native-maps --save
Full example
Example of how to use clustering.
;;; const INITIAL_REGION = latitude: 525 longitude: 192 latitudeDelta: 85 longitudeDelta: 85; const App = <MapView initialRegion=INITIAL_REGION style= flex: 1 > <Marker coordinate= latitude: 524 longitude: 187 /> <Marker coordinate= latitude: 521 longitude: 184 /> <Marker coordinate= latitude: 526 longitude: 183 /> <Marker coordinate= latitude: 516 longitude: 180 /> <Marker coordinate= latitude: 531 longitude: 188 /> <Marker coordinate= latitude: 529 longitude: 194 /> <Marker coordinate= latitude: 522 longitude: 21 /> <Marker coordinate= latitude: 524 longitude: 21 /> <Marker coordinate= latitude: 518 longitude: 20 /> <Marker coordinate= latitude: 518 longitude: 20 /> <Marker coordinate= latitude: 518 longitude: 20 /> <Marker coordinate= latitude: 518 longitude: 20 /> <Marker coordinate= latitude: 518 longitude: 20 /> </MapView>; ;
Props
Name | Type | Default | Note |
---|---|---|---|
clusterColor | String | #00B386 | Background color of cluster. |
clusterTextColor | String | #FFFFFF | Color of text in cluster. |
onClusterPress(cluster, markers) | Function | () => {} | Allows you to control cluster on click event. Function returns information about cluster and its markers. |
width | Number | window width | map's width. |
height | Number | window height | map's height. |
radius | Number | window.width * 6% | SuperCluster radius. |
extent | Number | 512 | SuperCluster extent. |
minZoom | Number | 1 | SuperCluster minZoom. |
maxZoom | Number | 20 | SuperCluster maxZoom. |
preserveClusterPressBehavior | Bool | false | If set to true, after clicking on cluster it will not be zoomed. |
edgePadding | Object | { top: 50, left: 50, bottom: 50, right: 50 } | Edge padding for react-native-maps's fitToCoordinates method, called in onClusterPress for fitting to pressed cluster children. |
animationEnabled | Bool | true | Animate imploding/exploding of clusters' markers and clusters size change. Works only on iOS. |
layoutAnimationConf | LayoutAnimationConfig | LayoutAnimation.Presets.spring | LayoutAnimation.Presets.spring |
onRegionChangeComplete(region, markers) | Function | () => {} | Called when map's region changes. In return you get current region and markers data. |
mapRef(ref) | Function | () => {} | Return reference to react-native-maps MapView component. |
clusteringEnabled | Bool | true | Set true to enable and false to disable clustering. |
renderCluster | Function | undefined | Enables you to render custom cluster with custom styles and logic. |
spiderLineColor | String | #FF0000 | Enables you to set color of spider line which joins spiral location with center location. |
Support
Feel free to create issues and pull requests. I will try to provide as much support as possible over Github. In case of questions or problems, contact me at: t.przybyl@venits.com