Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
lib
Cluster.js
MapView.js
README.md
index.js
package.json
yarn.lock

README.md

Map with clustering

Installation

yarn add @bam.tech/react-native-component-map-clustering

Dependencies:

Usage

Children

⚠ For each custom marker, add the following props:

  • id
  • coordinate : { longitude, latitude }

Ref

Ref methods from react-native-maps such as animateToRegion()
Extra methods
Method Type Note
zoomOnMarker ({latitude, longitude}, { top, bottom, right, left }) => void Zoom on a marker & place it on the screen. left, right, top, bottom are in between 0 & 1. They represent out far to the right, left, top, or bottom to place the marker.

Props

Props from the react-native-maps API

Other props

Prop Type Default Note
clustering boolean False (Optional) When true enables clustering of Markers.
renderCluster (Cluster) => React.Node Renders default clusters on Map (Optional) Render your custom clusters.
onPressCluster (Cluster) => void onPress not handled (Optional) Handle onPress on default clusters.
setRef `(React ref) => void (Optional) Get the MapView ref

Types

type Cluster {
  properties : {
    cluster: Boolean
    cluster_id: Number
    point_count: Number
    point_count_abbreviated: String
  }
  geometry: {
    coordinates: [(longitude), (latitude)]
  }
}