# react-native-map-cluster

> Clustered map view for React Native.

Latest version **1.7.8** (published 2021-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-map-cluster
pnpm add react-native-map-cluster
yarn add react-native-map-cluster
bun add react-native-map-cluster
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.8 |
| Published | 2021-01-13 |
| First published | 2020-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Laurens K. |
| Maintainers | laurensk |
| Keywords | react, react-native, react-component, map, mapview, google-maps, mapkit, supercluster, cluster, clustering |

## Links

- npm: https://www.npmjs.com/package/react-native-map-cluster
- Repository: https://github.com/laurensk/react-native-map-cluster
- Homepage: https://github.com/laurensk/react-native-map-cluster#readme
- Issues: https://github.com/laurensk/react-native-map-cluster/issues
- npm.io page: https://npm.io/package/react-native-map-cluster

## Dependencies (5)

- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [supercluster](https://npm.io/package/supercluster.md) ^6.0.2
- [react-native-maps](https://npm.io/package/react-native-maps.md) ^0.25.0
- [@mapbox/geo-viewport](https://npm.io/package/@mapbox/geo-viewport.md) ^0.4.0
- [@react-native-community/geolocation](https://npm.io/package/@react-native-community/geolocation.md) ^2.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.7.8 (latest) — 2021-01-13
- 1.7.7 — 2021-01-12
- 1.7.6 — 2021-01-12
- 1.7.5 — 2021-01-12
- 1.7.4 — 2021-01-12
- 1.7.3 — 2021-01-12
- 1.7.2 — 2021-01-12
- 1.7.1 — 2021-01-12
- 1.7.0 — 2021-01-12
- 1.6.2 — 2020-12-05
- 1.6.1 — 2020-12-05
- 1.6.0 — 2020-12-01

## README

# React Native Map Cluster
Create clustered map views in React Native with current user location, custom marker rendering, custom cluster rendering and custom callout rendering.

## Install
`npm i --save react-native-map-cluster`

## Usage

**NOTES:**

* the prop `key` of the markers rendered through `renderMarker` should not be left up to React. Instead, we strongly suggest to use an `id` in order the have unique keys while still taking advantage of React's recycling
* `ClusteredMapView` supports usual React children. Those children **won't be affected by clustering**, i.e. the behavior for those children is exactly the same as wrapping them around an [AirBnB's react-native-maps](https://github.com/airbnb/react-native-maps) instance
* Use `onMarkerPress` event on MapView instead of using `onPress` directly on Markers whenever possibile, in particular if you have a lot of pins and clusters. Within `onMarkerPress` you have access to the marker identifier through the `event.nativeEvent` attribute, hence you should be able to do everything you would do within an `onPress` function of a Marker

```JSX
import React, { Component } from 'react'
import { Marker, Callout } from 'react-native-maps'
import ClusteredMapView from 'react-native-map-cluster'

const INIT_REGION = {
  latitude: 41.8962667,
  longitude: 11.3340056,
  latitudeDelta: 12,
  longitudeDelta: 12
}

export default class MyClusteredMapView extends Component {

  renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
          coordinate = cluster.coordinate,
          clusterId = cluster.clusterId

    const clusteringEngine = this.map.getClusteringEngine(),
          clusteredPoints = clusteringEngine.getLeaves(clusterId, 100)

    return (
      <Marker coordinate={coordinate} onPress={onPress}>
        <View style={styles.myClusterStyle}>
          <Text style={styles.myClusterTextStyle}>
            {pointCount}
          </Text>
        </View>
        {
          /*
            Eventually use <Callout /> to
            show clustered point thumbs, i.e.:
            <Callout>
              <ScrollView>
                {
                  clusteredPoints.map(p => (
                    <Image source={p.image}>
                  ))
                }
              </ScrollView>
            </Callout>
           */
        }
      </Marker>
    )
  }

  renderMarker = (data) => <Marker key={data.id || Math.random()} coordinate={data.location} />

  render() {
    return (
      <ClusteredMapView
        style={{flex: 1}}
        data={this.state.data}
        initialRegion={INIT_REGION}
        ref={(r) => { this.map = r }}
        renderMarker={this.renderMarker}
        renderCluster={this.renderCluster} />
    )
  }
}
```

### Props

**Name** | **Type** | **Required** | **Default** | **Note**
---------|----------|--------------|-------------|---------
showsUserLocation | Bool | false | undefined | Show current location on map.
permissionsAndroid | Object | false | undefined | Needed when `showsUserLocation` is set to true. See example [here](https://reactnative.dev/docs/permissionsandroid#request).
radius | Number | false | window width * 4,5% | [SuperCluster radius](https://github.com/mapbox/supercluster#options).
extent | Number | false | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options).
minZoom | Number | false | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options).
maxZoom | Number | false | 16 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options).
width | Number | false | window width | map's width.
height | Number | false | window height | map's height.
data | Array <Object> | true | undefined | Objects must have an attribute `location` representing a `GeoPoint`, i.e. `{ latitude: x, longitude: y }`.
onExplode | Function | false | undefined | TODO
onImplode | Function | false | undefined | TODO
onClusterPress(clusterId, ?children) | Function | false |  | Add (or completey override) behaviours to the clusterPress handler. `children` is passed when default behavior is preserved (see `preserveClusterPressBehavior` prop).
preserveClusterPressBehavior | Bool | false | true | Whether `onClusterPress` prop should completely override module's behavior rather than integrate it.
clusterPressMaxChildren | Function | false | 100 | Max number of cluster leaves returned as second parameter of `onClusterPress`.
edgePadding | Object | false | { top: 10, left: 10, bottom: 10, right: 10 } | 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.
renderMarker | Function | true | undefined | Must return a react-native-maps' Marker component.
renderCluster | Function | true | undefined | Render the cluster.
animateClusters | Bool | false | true | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**.
layoutAnimationConf | LayoutAnimationConfig | false | `LayoutAnimation.Presets.spring` | Custom Layout animation configuration object for clusters animation during implode / explode **Works only on iOS**.
clusteringEnabled | Bool | false | true | Dynamically set whether to pass through clustering functions or immediately render markers as a normal mapview.
accessor | String\|Func | false | "location" | Accessor for item coordinate values. Could be a **string** (field name of an item object with latitude and longitude values) or a **function** (that describes how to access to coordinate data).

### Methods
**Name** | **Params** | **Description** | **Note**
---------|------------|-----------------|---------
getMapRef | none | Getter for underlying react-native-maps instance | [Official Doc](https://github.com/react-community/react-native-maps#component-api)
getClusteringEngine | none | Getter for underlying SuperCluster instance | [Official Doc](https://github.com/mapbox/supercluster)

## Credit

This repository is a fork of [react-native-maps-super-cluster](https://github.com/novalabio/react-native-maps-super-cluster) with many more features and updated implementations.

---
_Source: https://npm.io/package/react-native-map-cluster · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._