@bam.tech/react-native-component-map-clustering
@bam.tech/react-native-component-map-clustering
npm i @bam.tech/react-native-component-map-clustering
@bam.tech/react-native-component-map-clustering

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

A collection of common React Native components

by bamlab

1.1.1 (see all)License:MITTypeScript:Not Found
npm i @bam.tech/react-native-component-map-clustering
Readme

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
MethodTypeNote
zoomOnMarker({latitude, longitude}, { top, bottom, right, left }) => voidZoom 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

PropTypeDefaultNote
clusteringbooleanFalse(Optional) When true enables clustering of Markers.
renderCluster(Cluster) => React.NodeRenders default clusters on Map(Optional) Render your custom clusters.
onPressCluster(Cluster) => voidonPress 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)]
  }
}
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate