react-native-cluster-map

React Native MapView clustering component for iOS + Android

---

Made by CODEMPIRE

Examples

Zoom in	Zoom out
Cluster Expand	Nested Cluster Expand

Installation

1. Install react-native-maps

2. Install this component

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

Usage

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

<ClusterMap
  region={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <Marker coordinate={{ latitude: 37.78725, longitude: -122.434 }} />
  <Marker coordinate={{ latitude: 37.789, longitude: -122.431 }} />
  <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
</ClusterMap>;

Custom Cluster Marker

You can customize cluster marker with renderClusterMarker prop

MyMap.jsx

import { Marker } from "react-native-maps";
import { MyCluster } from "./MyCluster";

// ...

renderCustomClusterMarker = (count) => <MyCluster count={count} />

render () {
  const { markers, region } = this.state;
  return (
    <ClusterMap
      renderClusterMarker={this.renderCustomClusterMarker}
      region={region}
    >
      {markers.map((marker) => (
          <Marker {...marker} />
      ))}
    <ClusterMap>
  )
}

MyCluster.jsx

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export const MyCluster = (props) => {
  const { count } = props;
  return (
    <View style={styles}>
      <Text>{count}</Text>
    </View>
  );
};

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 <MapView /> 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 <MapView /> Events