How to work with mapbox marker clustors in react native?

Question

I am working with react-native-mapbox-gl. I have an array of locations which I am looping through to draw markers on the map. But there are some locations which are very closer to each other and are nearly not visible. I want to cluster all the locations which are near to each other so that when I click on it, it expands and show me all the locations which are into that cluster.

There is <MapboxGL.ShapeSource /> available in mapbox but it asks for a url in which lat long are to be loaded from. But I have an array with lat long of each location. Is there any other way I can make a cluster of locations in mapbox.

<Mapbox.MapView
 styleURL={Mapbox.StyleURL.Dark}
 zoomLevel={15}
 centerCoordinate={[locations[0].longitude, locations[0].latitude]}
 style={styles.container}
 showUserLocation={true}>

 {this.renderLocations(locations)}

</Mapbox.MapView>

render location function loops through the location array and shows markers on the map

renderLocations(locations) {
 return locations.map((loc, locIndex) => {
  return (
    <Mapbox.PointAnnotation
      key={`${locIndex}pointAnnotation`}
      id={`${locIndex}pointAnnotation`}
      coordinate={[loc.longitude, loc.latitude]}
      title={loc.name}>
      <Image source={require("../../../assets/images/marker.png")}/>
      <Mapbox.Callout title={loc.name} />
    </Mapbox.PointAnnotation>
  );
});

Fabrice Fontaine Fabrice Fontaine · Accepted Answer · 2020-02-13T18:36:57

You can use @turf/clusterDbScan like this :

let collection = MapboxGL.geoUtils.makeFeatureCollection();

results.forEach(result => {
  const geometry = {
    type: "Point",
    coordinates: [result.lon, result.lat]
  };
  let marker = MapboxGL.geoUtils.makeFeature(geometry);
  marker.id = result.id
  marker.properties = {
    ...yourProperties
  };
  collection = MapboxGL.geoUtils.addToFeatureCollection(collection, marker);
});

// Let Turf do the job !
const maxDistance = 0.005;
const clustered = turf.clustersDbscan(collection, maxDistance);

// Markers have no cluster property
const markers = clustered.features
  .filter( f => f.properties.cluster===undefined)
  .map(f => {
    return {...f.properties, coordinates: f.geometry.coordinates}
  })

// Clusters have one (cluster id)
let clusters = {};
clustered.features
  .filter( f => f.properties.cluster!==undefined)
  .forEach( f => {
    const { cluster, id} = f.properties;
    const { coordinates } = f.geometry;
    if (!clusters[cluster]) {
      clusters[cluster] = {
        id: `cluster_${cluster}`,
        count: 1,
        objects: [id],
        coordinates: coordinates
      }
      console.tron.log({clusters})
    }
    else {
      const { count } = clusters[cluster]
      const [lastX, lastY] = clusters[cluster].coordinates;
      const [x, y] = coordinates;
      const newX = ((lastX * count) + x) / (count+1);
      const newY = ((lastY * count) + y) / (count+1);
      clusters[cluster] = {
        ...clusters[cluster],
        count: count+1,
        objects: [...clusters[cluster].objects, id],
        coordinates: [newX, newY]
      }
    }
  })

this.setState({ markers, clusters: _.values(clusters) });

How to work with mapbox marker clustors in react native?

1 Answers