Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clustering on Apple maps does not render all markers #265

Open
CostinBiserica opened this issue Oct 10, 2023 · 0 comments
Open

clustering on Apple maps does not render all markers #265

CostinBiserica opened this issue Oct 10, 2023 · 0 comments

Comments

@CostinBiserica
Copy link

CostinBiserica commented Oct 10, 2023

I have a problem using the MapView imported from 'react-native-map-clustering'. Rendering markers dinamically does not render all markers, showing only some on the maps. It seems that it happens only when using Apple Maps, because when changing the provider to 'google', it works as intended.
I am using:

    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "^1.7.1",

The code is as follows:

<MapView
           ref={mapRef}
           clusterColor={Colors.red}
           // provider={PROVIDER_GOOGLE}
           style={{flex: 1}}
           initialRegion={{
             ...initialRegionLocation,
             latitudeDelta: LATITUDE_DELTA,
             longitudeDelta: LONGITUDE_DELTA
           }}
           showsUserLocation={hasLocation}>
           {mapMarkers.map((marker, index) => {
             return (
               <Marker
                 key={marker?.Id}
                 ref={ref => (markersRef.current[marker?.Id] = ref)}
                 coordinate={{
                   latitude: marker.Latitude,
                   longitude: marker.Longitude
                 }}
                 title={marker.Name}
                 description={marker.Address}
                 image={require('../../Images/pin.png')}>
                 <Callout
                   key={index}
                   onPress={() => {
                     navigate(
                       marker.Latitude,
                       marker.Longitude
                     );
                   }}>
                   <View
                     style={{
                       borderRadius: 5,
                       padding: 5,
                       maxWidth: Dimensions.get('window').width / 1.3
                     }}>
                     <Text style={{color: 'black', fontWeight: 'bold'}}>
                       {marker.Name}
                     </Text>
                     <Text style={{color: 'black'}} numberOfLines={2}>
                       {marker.Address}
                     </Text>
                     <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'center'
                       }}>
                       <Text style={{color: Colors.blue, marginRight: 5}}>
                         {t('translations:VIEW')}
                       </Text>
                       <Icon
                         style={{flex: 1}}
                         name="compass-outline"
                         size={16}
                         color={Colors.blue}
                       />
                     </View>
                   </View>
                 </Callout>
               </Marker>
             );
           })}
         </MapView>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant