venits / react-native-map-clustering

React Native map clustering both for Android and iOS.

React Native Map Clustering

React Native module that handles map clustering for you.

Works with Expo and react-native-cli 🚀

This repo is proudly sponsored by:

React Native Templates & Starter Kits and Apps for easier start.

Demo

Installation

npm install react-native-map-clustering react-native-maps --save
// yarn add react-native-map-clustering react-native-maps

Full example

import React from "react";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => (
  <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
    <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 }} />
    <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
    <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
  </MapView>
);

export default App;

Props

Name	Type	Default	Note
clusterColor	String	#00B386	Background color of cluster.
clusterTextColor	String	#FFFFFF	Color of text in cluster.
clusterFontFamily	String	undefined	Font family of text in cluster.
onClusterPress(cluster, markers)	Function	() => {}	Allows you to control cluster on click event. Function returns information about cluster and its markers.
tracksViewChanges	Bool	false	Sets whether the cluster markers should track view changes. It's turned off by default to improve cluster markers performance.
width	Number	window width	map's width.
height	Number	window height	map's height.
radius	Number	window.width * 6%	SuperCluster radius.
extent	Number	512	SuperCluster extent.
minZoom	Number	1	SuperCluster minZoom.
maxZoom	Number	20	SuperCluster maxZoom.
minPoints	Number	2	SuperCluster minPoints.
preserveClusterPressBehavior	Bool	false	If set to true, after clicking on cluster it will not be zoomed.
edgePadding	Object	{ top: 50, left: 50, bottom: 50, right: 50 }	Edge padding for react-native-maps's fitToCoordinates method, called in onClusterPress for fitting to pressed cluster children.
animationEnabled	Bool	true	Animate imploding/exploding of clusters' markers and clusters size change. Works only on iOS.
layoutAnimationConf	LayoutAnimationConfig	LayoutAnimation.Presets.spring	LayoutAnimation.Presets.spring
onRegionChangeComplete(region, markers)	Function	() => {}	Called when map's region changes. In return you get current region and markers data.
onMarkersChange(markers)	Function	() => {}	Called when markers change. In return you get markers data.
superClusterRef	MutableRefObject	{}	Return reference to supercluster library. You can read more about options it has here.
clusteringEnabled	Bool	true	Set true to enable and false to disable clustering.
spiralEnabled	Bool	true	Set true to enable and false to disable spiral view.
renderCluster	Function	undefined	Enables you to render custom cluster with custom styles and logic.
spiderLineColor	String	#FF0000	Enables you to set color of spider line which joins spiral location with center location.

How to animate to region?

Full example of how to use animateToRegion().

import React, { useRef } from "react";
import { Button } from "react-native";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => {
  const mapRef = useRef();

  const animateToRegion = () => {
    let region = {
      latitude: 42.5,
      longitude: 15.2,
      latitudeDelta: 7.5,
      longitudeDelta: 7.5,
    };

    mapRef.current.animateToRegion(region, 2000);
  };

  return (
    <>
      <MapView
        ref={mapRef}
        initialRegion={INITIAL_REGION}
        style={{ flex: 1 }}
      />
      <Button onPress={animateToRegion} title="Animate" />
    </>
  );
};

export default App;

Support

Feel free to create issues and pull requests. I will try to provide as much support as possible over GitHub. In case of questions or problems, contact me at: [email protected]

Happy Coding 💖🚀

react-native-map-clustering's Issues

when maximum zoom markers is not showing

example:
map on load https://prnt.sc/hiw4oo
map after some zoom https://prnt.sc/hiw4u8
I not sure that It is bug in react-native-map-view, because before using your library markers was showing correct.
when I turn off clustering, markers are showing always
the problem in the code http://prntscr.com/hk7qe6

Custom cluster's text position

Is it possible to set the position of the cluster's text ?

There are props to define all cluster's text attributes, and also a method to set its background, but unfortunately it's not enough in my case since I also want to show the text in a specific position relative to the custom background I'm using.

onClusterPress app is crashing in andoird

When we click on cluster, that app is getting crashed in android, and working fine with debugging

<MapView
         //  region={this.state.reg}
           style={styles.map}
           ref = {(ref)=>this.mapView=ref}
           showsMyLocationButton={false}
           showsUserLocation={true}
           loadingEnabled={true}
           initialRegion={region}
           onPress={() => this.onMapPress()}
           onRegionChangeComplete={(reg) => {
             latDelta = reg.latitudeDelta;
             longDelta = reg.longitudeDelta;
             console.log(latDelta+'lat');
             console.log(longDelta+'long');
           }}
           toolbarEnabled={false}
           onMapReady={() => this.resetUserPosition()}
           radius={15}
           clusterTextColor='#006E81'
           clusterBorderWidth={5}
           clusterTextSize={14}
           customClusterMarkerDesign ={this.clusters()}              
           onClusterPress = {(coordinates,markers)=>{


             console.warn(markers)
            
             alert("testing clustering")

       }}
         >
           {this.markersArray()}
         </MapView>

here is the code

fitToElements sometimes zooms in way too far

I'm trying to have the map zoom in or out to show the different markers when filtering the markers.
Sometimes it works ok (though the cluster markers are sometimes outside the map somewhat).
But other times it seems to go crazy and zoom in as far as possible at a random spot on the map somewhere inside the area where the markers are.
It zooms in so far that a small building on the map covers the screen, and then it refuses to try zooming out again.

I assumed it could be an issue of the markers not being done being filtered yet, as it most often happened with text search filtering; so I added 5 second delay after filtering before calling fitToElements, but it doesn't help. When i change the code to use plain MapView without clustering it works fine.

I'm thinking the issue might be that the clustering is yanking markers in and out of the map while zooming causing the fitToElements to zoom even further when pseudo markers are removed until no markers are visible (and I assume those far outside the viewport are removed for performance reasons) and therefore it stops.
It seems to only happen when the filtering reduces the markers from covering the whole of Norway to just covering a city (especially one with a lot of markers).
When it's working okay, it seems tries to fit the center of the clusters that were there before zooming, instead of the actual markers, since it will zoom in and split a cluster and if I pan the map there is often other clusters or markers outside the viewport that was originally inside the cluster (seems to happen more far north than in the south of norway).

Is there some other method that is recommended when using clustering for zooming in?

Zoom to the next clustering split?

Right now I am using the onClusterPress and the animate function to zoom in on press, however, sometimes I have to tap a couple times in order to get to the next place where the clusters 'break apart'.

I was wondering if it's possible to zoom into the next cluster break?

It looks like if I could get an array back from the markers that are in the cluster, I could pass that to react-native-maps fitToSuppliedMarkers method perhaps?

I have tried playing around with the amount of zoom, and that got me closer to what I'm wanting, but not quite.

Thanks in advance!

Marker's ref not created

When creating marker, ref are not created. The following code works fine with react-native-maps MapView but fails when using react-native-map-clustering MapView :

<MapView
  region={{
    latitude: 46.847807,
    longitude: 2.924655,
    latitudeDelta: 50,
    longitudeDelta: 50,
  }}
  style={{
    flex: 1,
  }}
>
  {this.props.parks.map((park, i) => (
    <Marker
      coordinate={{
        latitude: parseFloat(park.lat),
        longitude: parseFloat(park.lng),
      }}
      ref={(c) => {
        this[`marker_${i}`] = c;
        console.log('ref', `marker_${i}`, this[`marker_${i}`]);
      }}
      onPress={() => {
        console.log('press', `marker_${i}`, this[`marker_${i}`]);
        this[`marker_${i}`].showCallout();
      }}
    >
      {this.renderCallout(park, i)}
    </Marker>
  ))}
</MapView>

Versions :
"react": "16.0.0-alpha.12",
"react-native": "^0.49",
"react-native-map-clustering": "^1.2.1",
"react-native-maps": "^0.16.4",

Undefined is not an object (evaluating 'item.props.cluster')

This code was working with react-native-maps MapView. It shows an error with this package.
<MapView
initialRegion={this.state}
clusterColor = '#000'
clusterTextColor = '#fff'
clusterBorderColor = '#fff'
clusterBorderWidth = {4}
ref = {(ref)=>this.mapView=ref}
onClusterPress={(coordinate)=>{
this.animate(coordinate);
}}
radius={25}
style={styles.map}
region={region}
showsUserLocation = {true}
>
{ this.renderMarker(selectedExplore)}
<WardBorder/>
</MapView>

And on WardBorder component

<Polygon
coordinates={cords}
strokeColor="rgba(0,0,0,0.2)"
fillColor="rgba(0,0,0,0.1)"
strokeWidth={1} />

But if i comment out the WardBorder (polygon) component marker is clustered.

When max zoomed out on map the clusters disappear

Maybe need to increase the max marker amount for the clusters. It looks like there are too many points to cluster so its hiding the cluster maybe?

Problem with first click on cluster

Hello!
I have a problem: when I click on cluster (which is located in the corner of the screen) - I see only animation (scroll to clicked scroll), but I decrease latitudeDelta and longitudeDelta when I call this.mapView._root.animateToRegion().
It works only when I click on the cluster first time. After first click, if I click on the same cluster it works correctly.
I record a video with this problem: http://jmp.sh/E6pXwLw

onPressCluster = (coordinates: any, markers: any) => {
      markerClickStatus.status = true;
      if (markerClickStatus.timer) clearTimeout(markerClickStatus.timer);
      markerClickStatus.timer = setTimeout(() => { markerClickStatus.status = false; }, 100);

      this.animateToRegion(coordinates);
      this.setState({
        coordinates,
        currentMarkers: markers.map((x: any) => this.props.benefitsOfCategories[x.item.key]),
      });
}

animateToRegion = (coordinates: any) => {
      const { region } = this.mapView.state;
      const minDelta = MAP_ZOOM.minDelta * MAP_ZOOM.scaleRate;

      const newRegion: IFullCoordinates = {
        latitude: coordinates.latitude || region.latitude,
        longitude: coordinates.longitude || region.longitude,
        latitudeDelta: Math.max(minDelta, this.state.region.latitudeDelta * MAP_ZOOM.scaleRate),
        longitudeDelta: Math.max(minDelta, this.state.region.longitudeDelta * MAP_ZOOM.scaleRate),
      };

      this.mapView._root.animateToRegion(newRegion, ANIMATION_DURATION);

      !this.state.delta && this.setState({
        delta: {
          lat: region.latitudeDelta,
          lng: region.longitudeDelta,
        },
      });
}

<MapWithClusters
            ref={(ref: any) => this.mapView = ref}
            clustering={clustering}
            region={this.state.region}
            style={styles.screen}
            showsUserLocation={true}
            followsUserLocation={true}
            customMapStyle={mapStyle}
            maxZoomLevel={MAP_ZOOM.max}
            minZoomLevel={MAP_ZOOM.min}
            onPress={this.onMapPress}
            showsMyLocationButton={false}
            onRegionChangeComplete={this.onRegionChangeComplete}
            onClusterPress={this.onPressCluster}
            clusterTextColor={CLUSTER_TEXT_ICON_COLOR}
            customClusterMarkerDesign={(<Image source={CLUSTER_ICON} style={styles.clusterMargin} />)}
          >
            {renderMarkers(this.props.benefitsOfCategories, this.onPressMarker)}
</MapWithClusters>

Versions:
react-native: 0.52.0
react-native-map: 0.19.0
react-native-map-clustering: 1.2.6

custom cluster marker text size.

Hi, is there any way to have custom text size for cluster marker. Because the text seems overflow if it doesn't fit the size of custom cluster marker. Appreciate if you can help. Thank you.

Performance issues when having >1000 markers.

Great job on this one I must say although I found that it couldn't handle >1000 markers without performance issues. Is this an issue with react-native-maps in general or with your mods?

Once zoomed into a single marker, custom marker is rendering a whole map for each point

I recently updated to get the makers array back in the onClusterPress event, which is helpful :)

However, now I am experiencing an issue where each custom marker, once no longer in a cluster, is rendering a whole new map.

Looks like the once it's no longer in a cluster, it's getting passed a type of MapView() instead of Feature and it's getting an item prop, whereas the cluster markers are not.

Seems like the change happens somewhere between v1.2.1 and v1.2.4. After going back down to 1.2.1 the custom markers render as expected.

Thanks in advance :)

sometimes after load map markers is not showing

example:
map on load https://prnt.sc/hiw4oo
map after some zoom https://prnt.sc/hiw4u8

onClusterPress doesn't work

onClusterPress={(coordinate)=>{
consloe.log("press");
}}

nothing happend.
Do I need to set something?

unable to AnimateToRegion

Hi Venits,

Thanks for the cool module,
but i'm getting error "this.mapRef.animateToRegion" is not a function when i trying to programatically animate to a region.

Can you please advise?

Thanks

Cluster Double Click

When i double click a cluster it opens one of the markers inside the cluster on iOS. How can i solve that issue? i tried to pass a function to onClusterPress but its not working.

Custom cluster's size

I noticed that when I'm using custom cluster in Android it is truncated once it's too big (~50), is this a known issue\limitation ?

"zoom" in "calculateClustersForMap" function becomes NaN

I'm getting the following error, randomly:

undefined is not an object (evaluating 'tree.range')

I checked within the code and found that for some cases getZoomLevel function returns zoom as NaN.

The particular case which I tracked was this:

bbox = [ 392.6867911219597, -28.446937064843333, -74.18819949030876, 148.92655940484119 ]
height = 592
width = 360

In the meanwhile, I'm gonna try something like this: zoom = this.getZoomLevel(bbox).zoom || 0;

I want to group markers by type

I have two types

• Customers
• Users

I want to make different marker cluster per types. How do I? @venits

Undefined is not an object (evaluating 'item.length') MapWithClustering.js:61

const { markerList } = this.props;

    if (markerList.length > 0) {
      return (
        <MapView 
          style={styles.map}
          region={this.state.region}
          showsUserLocation={true}
          showsCompass={true}
          loadingEnabled={true}
          clustering = {true}
          clusterColor = '#000'
          clusterTextColor = '#fff'
          clusterBorderColor = '#fff'
          clusterBorderWidth = {4}>

          {markerList.map((marker) => {
            return this.renderMarker(marker)
          })}

        </MapView>
      );
    }

and

 renderMarker(marker) {
      return (
        <Marker
          coordinate={marker.latlng} 
          key={marker.name} />
      );
    }
  }

I don't get it, with old MapView it was working fine.

Cluster not show if we wrap marker on custom component

Hi, thank you for this great library.

I've success fully implement this library and follow the example.
The clustering was working fine.

When I tried to create a custom component for my marker.
I tried to create a <JobMarker/> component that wrap Marker and Callout component.

Clustering not shown on the map.

How can I solve this?

Thank Your

2 or more markers with nearly the same coords stay always in the cluster

Hello,

if I have two or more markers that are almost at the same coords. The markers are not displayed. Even if I zoom 100% the clusters stays active. How can I fix that?

No onRegionChange callback

The original MapView from react-native-maps provides an onRegionChange callback, which can be used in the following case:

<MapView region={this.state.region} onRegionChange={(region) => this.setState({ region })} />

Without the callback the map is basically locked in place in this case.
Or is there a way to perhaps access the original MapView object?

superCluster in not defined

http://prntscr.com/hivgzk when I scroll i get the error

Cannot scroll map on iOS

I'm using react-native-maps through Expo for my app with your clustering module however on iOS the map is not able to scroll. All the markers and everything show up correctly but the map does not move around. Any help would be appreciated. Below is my map code.

               <MapView
                    clusterColor="#FB4F94"
                    clusterTextColor="#fff"
                    clusterBorderColor="#F86048"
                    clusterBorderWidth={0}
                    region={{
                        latitude: 52.5,
                        longitude: 19.2,
                        latitudeDelta: 6.5,
                        longitudeDelta: 6.5
                    }}
                    style={styles.mapView}
                >
                    {
                        this.state.markers.map((marker, i) => {
                            return (
                                <Marker
                                    key={i}
                                    onPress={this._show.bind(this, marker.image)}
                                    coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                                >
                                    <Image
                                        source={{uri: marker.image}}
                                        style={styles.markerImage}
                                    />
                                </Marker>
                            )
                        })
                    }
                </MapView>

I believe changing the 'region' prop to 'initialRegion' when you creacte the react-native-maps component will fix the issue so I have submitted a PR.

Alternative to onRegionChangeComplete

Since I cannot use onRegionChange here
Any idea how can I do something when I pan over the map?

Also how can I get the region if I need it in my state?

Does not support custom pins/markers

When I drop in my component for a custom pin I made, the generic pin is rendered. Any idea on a fix?

does not expand after animateToRegion

I sometimes have to do pan before the cluster expands after animateToRegion, any idea why?

Minimum distance setting to avoid overlapping clusters

Not sure if this is a missing setting, bug or just an undocumented setting.
It seems to me that the clusters some times are created too close together so that they overlap:

Perhaps the current minimum distance before markers are grouped is too small, at least when there's as many as in my sample data. Several clusters are overlapping so bad you cannot tell which number is on them; and onClusterPress becomes very unreliable since you cannot tell which one you're tapping.

To me it seems most logical to never create clusters that are within the radius of a neighbouring cluster.

Is this configurable somewhere or is this simply a bug?

Prop to exclude some markers

First, kudos for this great lib. I don't have so much time to dig into the source code but want to know is there is a way to exclude some markers from clustering. Thanks in advance.

onPress cluster component

How would you go about capturing the onPress event for the cluster component? I would like to zoom to the region of markers when pressing a cluster. It would also be nice if we could override the cluster component as well.

Custom cluster component where you pass an array of markers would let me render a price range for the clustered markers for instance.

Thanks again for the great clustering component!

Radius and Text Size are not changable.

Hello,

After review, I noticed that the radius and the clusterTextSize are still set to constant values and are not actually respecting user assignments.

MapView should not require a region if initialRegion is set

Currently react-native-map-clustering MapView crashes if the region is not set, but the initialRegion is. This is contrary to how the base react-native-map MapView behaves and causes annoying bugs (ex. map skips back to the previous region after the user moves the map) in the case that the dev wants to save the region via onRegionChangeComplete() in the redux store.

onClusterPress is not triggered

Hi Venits,

Thank you very much for this component.

I'm trying the onClusterPress method but is not being triggered because is undefined on the state.

Fix: I added locally onClusterPress to the default state and on the assignment made on createMarkers() but I'm not sure if that it's a good solution for you.

Thanks.

version 1.2, lost custom marker images

Love this library, its exactly what I need, however, I happen to check the repo and saw that 1.2 was out, so I upgraded, however, I have custom marker images as a child to showing a users avatar once zoomed in enough.

After switching to 1.2, all the custom images missing and instead it just showed the red pin icon.

So far I have just downgraded back to 1.1.6 and that seems to be working fine.

Thanks again for this library :)

Async load marker

Hi,

Is this library support async load marker? I try it by load from service and add it with redux but no marker display in my map.

Can't see the group of markers onClusterPress

I'm trying to get the group of markers as an object when I press a cluster however right now when I try to JSON.stringify the markers data (same as in the docs) it errors out because of cyclic structures (json.stringify cannot serialize cyclic structures). Is it possible to get the markers back as just an object? Thanks!

                <MapView
                    ref={component => {this._map = component;}}
                    clustering={true}
                    showsUserLocation={true}
                    showsMyLocationButton={false}
                    initialRegion={this.state.region}
                    onRegionChange={this._onRegionChange}
                    onClusterPress={(coordinates, markers) => {
                           console.warn(JSON.stringify(markers))
                    }}
                    style={styles.mapView}
                >

Callout out is not working

Callout out is not showing.

onClusterPress arguments have changed

It seems that what was passed to onClusterPress has recently changed.
We used to receive an object containing latitude and longitude (cf. 1st image), while we now receive an event (cf. 2nd image).

Is that an undocumented update ?

TypeError: Cannot read property 'range' of undefined

Way of reproduce (this is not 100% sure):

1. Put some clustered markers on map.
2. Scroll map from west to east for some time (5-10 seconds).
3. The application will throw an exception.

Result:

TypeError: Cannot read property 'range' of undefined
This error is located at:
...
at SuperCluster.getClusters (index.js:77)
    at MapWithClustering.calculateClustersForMap (MapWithClustering.js:139)
    at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)
    at MapWithClustering.createMarkersOnMap (MapWithClustering.js:99)
    at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)
    at MapWithClustering.componentWillReceiveProps (MapWithClustering.js:34)
    at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)

Conclusion:
It seems the tree object in getClusters method from supercluster is undefined:

getClusters: function (bbox, zoom) {
        var tree = this.trees[this._limitZoom(zoom)];
        var ids = tree.range(lngX(bbox[0]), latY(bbox[3]), lngX(bbox[2]), latY(bbox[1]));
        var clusters = [];
        for (var i = 0; i < ids.length; i++) {
            var c = tree.points[ids[i]];
            clusters.push(c.numPoints ? getClusterJSON(c) : this.points[c.id]);
        }
        return clusters;
    },

NPM Package out of date

It seems the npm package for this package is out of date. Npm says its on version 1.2.8 and not published for 2 months where as the package.json on Github is reading version 1.2.2 and updated in the last few days. Would be nice to keep the npm package update to date with Master.

Load more for markers

I am using redux and add markers from the state of redux
in first step cluster and markers is work fine but when i am loading more markers from database and put in redux state plugin get me this error :
Cannot read property 'length' of undefined

custom cluster marker doesn't work

Hi, i tried to use one of the props customClusterMarkerDesign but it didn't work. I follow exactly like the documentation. Appreciate if you could help

<MapView
     ref={(ref) => { this.mapView = ref; }}
     region={this.state.currentRegion}
     style={{ width, height }}
     onClusterPress={(coordinate) => { this.animateRegion(coordinate); }}
     customClusterMarkerDeisgn={(
     <Image
         style={{ width: 24, height: 34, tintColor: '#ff6600' }}
         source={ImageMarker}
     />
     )}
>
    {this.createMarker()}
</MapView>

MapView ref became this.root

This commit 9420a07#diff-b75bf6bb36e3beebc410d167c3ecb1e1R158 changes MapView ref from this._root to this.root.
I had to access this ref in order to use some method such as animateToRegion or fitToCoordinates.

Are we supposed to use this.root from now on ?

Thanks in advance.

I can't change zoom when make setState in regionChange

when my callback in region change to makes setState I cannot change map zoom. tested on IOS simulator

onRegionChange = { region => {
   this.setState(() => ({ region }))
}}

Custom Callout disappearing on map move

Whenever I tap on a marker close to the screen border, the callout is shown, the map "moves" in order to put selected marker in the center of the screen and the callout disappears.

I am using a custom callout
The issue seems to come from react-native-map-clustering, I haven't been able to reproduce it using react-native-maps.

Here are the versions I am using :

"react": "16.0.0-alpha.12",
"react-native": "^0.47",
"react-native-map-clustering": "^1.2.3",
"react-native-maps": "^0.16.4",

how to get marker coordinates which in cluster

I need get marker coordinates of cluster that in screenshot http://prntscr.com/hivu8e

Disable clusters at certain zoom level?

Use case / issue:
When at least two map markers are in the same location, I can't zoom in far enough to split them up, it just keeps showing the cluster marker with the number 2 on it.

I'm wondering if there is a way I could maybe disable the clustering at a certain zoom level, or somehow show both the markers below the cluster, when they are at the same location.

Not entirely sure it's possible, but just wanted to check if it might be :)

won't know how many markers are merged

When some markers are merged, we don't know how many
So, i suggest when some markers are merged, we should do as onClusterPress do (#3)
such as

customClusterMarkerDesign = ((coordinates,markers)=>{
(<Image style = {{width: imageWidth, height:imageHeight}}
source = {require('./customCluster.png')}/>)}}

ex: when 10 markers are merged, we based on type of them and show 10 and background of marker, we split 2 parts with red area is 30% and green area is 70%

Thank you

onClusterPress not call because componentWillReceiveProps not fired in MapWithClustering .js

HI, the first, i want to say deeply thank for you module
It's really helpful

But i got some problems,

My code is:

<MapView
onClusterPress={(coordinate) => {
alert("11212123" + prop);
}} ...

In class MapWithClustering , method componentWillReceiveProps is not fired

so method onClusterPress in class CustomMarker is undefined --> not fired too.

Problem 2, please add more information on onClusterPress such as onClusterPress(coordinate, markers) which markers are children of clustering

Thank for your helpful module