E
E
Evgeny Popov2016-10-12 17:38:34
Google Maps
Evgeny Popov, 2016-10-12 17:38:34

How to calculate an array of clusters based on coordinates, scale/relative radius?

At the moment, clustering is not implemented in the google maps components for react-native, there are only some references to the react components (which are tied to the original google api js library included) and plans in the roadmap.
In the native component of the maps of the platform (in particular, android), clustering exists and successfully works, for example, in a native script.
I would like to find a ready-made solution, if there is one, which would produce an array of cluster markers as an output, and expect the following as input: a list of markers, a scale (zoom), a relative radius in which the markers should be clustered. Relative since the radius changes depending on the scale.
The original example
I found just such a library , but there it is done regarding the "offset".
There are various options for complex solutions where the card component is a mandatory parameter, but in this case, when it is impossible to connect, there is no way to use them. Yes, and it is not clear why if the presence of a card in my opinion is absolutely redundant.
Perhaps someone met options or maybe I missed something in react-native itself?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Evgeny Popov, 2016-10-15
@Kaaboeld

Question removed, solution:
supercluster + geo-viewport + lat/lngDelta region:

export function region(points) {
    if(isNaN(points[0].latitude) ) return null;
  var minX, maxX, minY, maxY;

  // init first point
  ((point) => {
    minX = point.latitude;
    maxX = point.latitude;
    minY = point.longitude;
    maxY = point.longitude;
  })(points[0]);

  // calculate rect
  points.map((point) => {
    minX = Math.min(minX, point.latitude);
    maxX = Math.max(maxX, point.latitude);
    minY = Math.min(minY, point.longitude);
    maxY = Math.max(maxY, point.longitude);
  });

  console.log(points, minX,maxX, (minX + maxX) / 2)
  var midX = (minX + maxX) / 2;
  var midY = (minY + maxY) / 2;
  var midPoint = [midX, midY];

  var deltaX = (maxX - minX);
  var deltaY = (maxY - minY);

  return {
    latitude: midX, longitude: midY,
    latitudeDelta: deltaX, longitudeDelta: deltaY,
  };
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question