react-native-map-clustering

react-native-map-clustering copied to clipboard

Hi.

I have several markers with exact same coordinates. They are grouped in a cluster. Then I press on the cluster and zoom-in so that the spiral of the markers is shown. When the markers from the spiral are pressed, their Callouts are not shown.

The minimal example with a default callout is below. The title of 'marker3' and 'marker4' will be shown by pressing on the corresponding markers. For 'marker1' and 'marker2' it will not be shown.

import React from 'react';
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 title="marker1" coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker title="marker2" coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker title="marker3" coordinate={{ latitude: 52.6, longitude: 18.3 }} />
    <Marker title="marker4" coordinate={{ latitude: 51.6, longitude: 18.0 }} />
  </MapView>
);

export default App;

Maybe I am misusing smth. Is there any workaround?

Tried with and without custom Callout. Tried to create references to each marker and then from marker's onPress call showCallout(). Did not work.

Hi,

I encounter the same issue, did you by any chance found a workaround since then?

I was thinking about adding a small random variation to the locations but that's quite dirty.

Ok actually I was able to mitigate the issue by setting maxZoom to 15:

import React from 'react';
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 }} maxZoom={15}>
    <Marker title="marker1" coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker title="marker2" coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker title="marker3" coordinate={{ latitude: 52.6, longitude: 18.3 }} />
    <Marker title="marker4" coordinate={{ latitude: 51.6, longitude: 18.0 }} />
  </MapView>
);

export default App;