Plugin usage confusion

[AlexMachin1997]

Hi,

I'm interested in using react-native-maps-super-cluster, but I'm super confused about how it works.

So I was looking at the example, and I see this method:

  renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
          coordinate = cluster.coordinate,
          clusterId = cluster.clusterId

    // use pointCount to calculate cluster size scaling
    // and apply it to "style" prop below

    // eventually get clustered points by using
    // underlying SuperCluster instance
    // Methods ref: https://github.com/mapbox/supercluster
    const clusteringEngine = this.map.getClusteringEngine(),
          clusteredPoints = clusteringEngine.getLeaves(clusterId, 100)

    return (
      <Marker coordinate={coordinate} onPress={onPress}>
        <View style={styles.myClusterStyle}>
          <Text style={styles.myClusterTextStyle}>
            {pointCount}
          </Text>
        </View>
        {
          /*
            Eventually use <Callout /> to
            show clustered point thumbs, i.e.:
            <Callout>
              <ScrollView>
                {
                  clusteredPoints.map(p => (
                    <Image source={p.image}>
                  ))
                }
              </ScrollView>
            </Callout>

            IMPORTANT: be aware that Marker's onPress event isn't really consistent when using Callout.
           */
        }
      </Marker>
    )
  }

However, when the method is referenced in the map component, it only passes a reference, there are no arguments. See the example below.

     <ClusteredMapView
        style={{flex: 1}}
        data={this.state.data}
        initialRegion={INIT_REGION}
        ref={(r) => { this.map = r }}
        renderMarker={this.renderMarker}
        renderCluster={this.renderCluster} />

I'm super confused where cluster, onPress from renderCluster function args are used. When a method is used traditionally, the method is referenced, and the args are passed in, but that doesn't seem to be the case.

UPDATE:

Also, what is this sample looping through? No array is specified/

renderMarker = (data) => <Marker key={data.id || Math.random()} coordinate={data.location} />

If some could help me out with my confusion it would be great.

Cheers,

Alex

[AlexMachin1997]

Anyone ????

[nunobasto]

The props data (this.state.data) in <ClusteredMapView has to be an array of locations.
Something like [{location: { latitude: x, longitude: y }}, {location: { latitude: a, longitude: b }}, ...]
(besides location, each item can have more properties, like title, for instance)

The arguments for renderMarker and renderCluster are not needed in the reference, only in the function. For instance, renderMarker receives an argument data that references each of the markers.

[39otrebla]

@nunobasto thanks.