Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codempireio/react-native-cluster-map
ReactNative MapView clustering component for iOS + Android
https://github.com/codempireio/react-native-cluster-map
cluster clustering custom-cluster-marker google-maps map-cluster marker react react-native supercluser typescript
Last synced: 18 days ago
JSON representation
ReactNative MapView clustering component for iOS + Android
- Host: GitHub
- URL: https://github.com/codempireio/react-native-cluster-map
- Owner: codempireio
- License: mit
- Created: 2019-03-26T14:39:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T05:47:28.000Z (about 2 months ago)
- Last Synced: 2024-10-26T11:09:31.158Z (19 days ago)
- Topics: cluster, clustering, custom-cluster-marker, google-maps, map-cluster, marker, react, react-native, supercluser, typescript
- Language: TypeScript
- Homepage:
- Size: 6.31 MB
- Stars: 74
- Watchers: 7
- Forks: 15
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-cluster-map
[]()
[](https://www.npmjs.com/package/react-native-cluster-map)
[](https://www.npmjs.com/package/react-native-cluster-map)
[](mailto:[email protected])
React Native MapView clustering component for iOS + Android
---
Made by [CODEMPIRE](http://codempire.io/)
## Examples
| Zoom in | Zoom out |
| --------------------------------------------------------- | ----------------------------------------------------------------------- |
|  |  |
| **Cluster Expand** | **Nested Cluster Expand** |
|  |  |
## Installation
1. Install [`react-native-maps`](https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md)
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';
;
```
### Custom Cluster Marker
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 (
{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',
});
```
### Result
## 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](https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#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](https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#events)