react-native-cluster-map

![license]()

React Native MapView clustering component for iOS + Android

---

Made by CODEMPIRE

Examples

| Zoom in | Zoom out |
| --------------------------------------------------------- | ----------------------------------------------------------------------- |
| !Example zoom out | !Example zoom in |
| Cluster Expand | Nested Cluster Expand |
| !Example cluster expand | !Example nested cluster expand |

Installation

1. Install react-native-maps

2. Install this component

``bash
npm install --save react-native-cluster-map
`

Usage

`javascript
import { Marker } from 'react-native-maps';
import { ClusterMap } from 'react-native-cluster-map';

region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>



;
`

$3

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 (
renderClusterMarker={this.renderCustomClusterMarker}
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 (

{count}

);
};

const styles = StyleSheet.create({
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
});
``

$3

!Custom Marker Example

Props

| 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 |

---

Children Props

| 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 \ Props

Events

| 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 \ Events