npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-cluster-map

1.0.3 • Public • Published

react-native-cluster-map

license Version npm Email

React Native MapView clustering component for iOS + Android


Made by CODEMPIRE

Examples

Zoom in Zoom out
Example zoom out Example zoom in
Cluster Expand Nested Cluster Expand
Example cluster expand Example 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

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 { clusterId: number, coordinate : LatLng } 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

install

npm i react-native-cluster-map

Downloadsweekly downloads

121

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability