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