react native maps clustering

Question

I want to integrate maps in my react-native app, I am using the “react-native-maps” library for that https://github.com/airbnb/react-native-maps I want to use clustering but I am unable to find proper documentations related to that. Please help me to find documentation of how to integrate maps with clustering and also tell which library is best for the implementation of clustering for both platforms, iOS and Android.

Skindeep

Answer 1

You can use mapbox/supercluster repo, and here's a gist showing how to implements supercluster to React Native. It's initially developed for browser/node applications but you can still simply npm install and use it (javascript is javascript everywhere). Add the clustered markers into your MapView (originally shared here):

<MapView ref={ref => { this.map = ref; }}>
  { this.state.markers.map((marker, index) => {
    return (
      <MapView.Marker 
        coordinate={{ latitude: marker.geometry.coordinates[1], longitude: marker.geometry.coordinates[0] }}
        onPress={() => this.markerPressed(marker)}>
        <Marker model={place} active={this.isSelected(place)} />
      </MapView.Marker>
    );
  })}
</MapView>

Warning from an issue of react-native-maps:

The major issue is performance, if you need to display hundreds or thousands of markers you're gonna have to optimize the hell out of it, and this is where it gets really hard.

react-native-maps also have an active conflicting PR which solves this issue both in Android and iOS natively, but it waits for a merge. However, you can manually implement it.

Erroneous

Answer 2

You can use react-native-maps-super-cluster. This module wraps AirBnB's react-native-maps and uses MapBox's SuperCluster as clustering engine. This module is super easy to use.

Demo

There is one more library for clustering react-native-map-clustering.

Ylla

Answer 3

yarn add react-native-map-clustering

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


    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>
    );

Lure

Answer 4

How does this work with callouts? Using this code gives me an error: Element type is invalid: expected a string...

<Marker>
    <MapView.Callout tooltip>
        <Text>Test Text</Text>
    </MapView.Callout>                    
</Marker>

Hunnish