Package Exports

react-native-cluster-map-hwan

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-cluster-map-hwan) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Install react-native-maps
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

Custom Marker Example

Props

Props	Type	Default	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	():ReactNode	() => { return <CustomClusterMarker /> }	Returns cluster marker component
style	StyleProp	absoluteFillObject	Styling for MapView

Also contains react-native-maps <MapView /> Props

Events

Event Name	Returns	Notes
onClusterClick	void	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