# React Native Map Clustering

React Native module that handles map clustering for you.
Works with **Expo** and **react-native-cli** 🚀

## Demo

![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/master/assets/demo.gif)

## Installation

```js
// clustering module
npm install react-native-map-clustering --save

// and only if you haven't installed it before
npm install react-native-maps --save
```

### Full example

Example of how to use clustering.

```js
import React from 'react';
import MapView from 'react-native-map-clustering';
import { Marker } from 'react-native-maps';

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => (
  <MapView region={INITIAL_REGION} style={{ flex: 1 }}>
	<Marker coordinate={{ latitude: 52.0, longitude: 18.2 }} />
	<Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
	<Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
	<Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
	<Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
	<Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
	<Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
	<Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
  </MapView>
);

export default App;
```


## Props


| Name               | Type   | Default | Note                                                           |
|--------------------|--------|---------|----------------------------------------------------------------|
| **clusterColor**       | String | #00B386 | Background color of cluster.                                         |
| **clusterTextColor**   | String | #FFFFFF | Color of text in cluster.                                      
| **onClusterPress(cluster, children)** | 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 * 5% | [SuperCluster radius](https://github.com/mapbox/supercluster#options).
**extent** | Number | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options).
**minZoom** | Number | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options).
**maxZoom** | Number | 20 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options).
**preserveClusterPressBehavior** | Bool | false | If set to true, after clicking on cluster it will not be zoomed.
**edgePadding** | { top: 50, left: 50, bottom: 50, right: 50 } | Edge padding for [react-native-maps's](https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods) `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` | Custom Layout animation configuration object for clusters animation during implode / explode **Works only on iOS**.
| **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.            |

## Animate To Region

1. Create reference to MapView
```js
<MapView mapRef={ref  => (mapView  =  ref)} />
```

2. Create **animate()** method

```js
const animate = () => {
  let region = {
    latitude: 42.5,
    longitude: 15.2,
    latitudeDelta: 7.5,
    longitudeDelta: 7.5,
  };
  
  mapView.animateToRegion(region, 2000);
};
```

3. You can call it anywhere:
```js
  <Button title="Animate" onPress={animate} />
```


## Support

Feel free to create issues and pull request. 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](t.przybyl@venits.com)


### Happy Coding 💖