React Native map clustering both for Android and iOS.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 40b11f4 Mar 17, 2018
Permalink
Failed to load latest commit information.
MapView Add files via upload Mar 17, 2018
README.md Add files via upload Mar 17, 2018
demo.gif Add files via upload Sep 2, 2017
index.js Add files via upload Sep 2, 2017
package.json Bump version Jan 5, 2018

README.md

React Native Map Clustering

Simple module that adds map clustering for both iOS and Android.

Pre requirements:

In general all you have to do to start:

npm install react-native-maps --save
react-native link react-native-maps
  • Minimum versions you need for this module:

    react: >=16.0
    react-native >=0.40
    react-native-maps >=0.15.0
    

Installation

All you have to do:

npm install react-native-map-clustering --save

Usage

Usage is very simple:

  1. Import MapView
import MapView from 'react-native-map-clustering';
  • Import Marker
import { Marker } from 'react-native-maps';
  1. Add this to your render method (you can put your own markers and region):
<MapView
    region={{latitude: 52.5, longitude: 19.2,
             latitudeDelta: 8.5, longitudeDelta: 8.5}}
    style={{width: mapWidth, height: mapHeight}}>
    <Marker coordinate={{latitude: 52.0, longitude: 18.2}} />
    <Marker coordinate={{latitude: 52.4, longitude: 18.7}} />
    <Marker coordinate={{latitude: 52.1, longitude: 18.4}} />
    <Marker coordinate={{latitude: 52.6, longitude: 18.3}} />
    <Marker coordinate={{latitude: 51.6, longitude: 18.0}} />
    <Marker coordinate={{latitude: 53.1, longitude: 18.8}} />
    <Marker coordinate={{latitude: 52.9, longitude: 19.4}} />
</MapView>
  1. That's all!.

Demo

Alt Text

Extra props to control your clustering


Name Type Default Note
clustering bool true Set true to enable and false to disable clustering.
clusterColor String #F5F5F5 Background color of cluster.
clusterTextColor String #FF5252 Color of text in cluster.
clusterBorderColor String #FF5252 Color of border. Set to transparent if you don't want borders.
clusterBorderWidth Int 1 Width of border. Set to 0 if you don't want borders.
onClusterPress Function null Allows you to control cluster on click event. Function returns coordinate of cluster.

Example of using props:

<MapView
    clustering = {true}
    clusterColor = '#000'
    clusterTextColor = '#fff'
    clusterBorderColor = '#fff'
    clusterBorderWidth = {4}
    region={{latitude: 52.5, longitude: 19.2,
             latitudeDelta: 8.5, longitudeDelta: 8.5}}
    style={{width: mapWidth, height: mapHeight}}>
</MapView>