Custom markers are not grouped into a clustering marker

[lv2211]

I'm testing the library to implement the grouping markers function and I don't see any clustering markers displayed like the demo. I don't know whether anyone has encountered this issue before, please help me with this.

Below is the envrironment and some code snippets

Environments

• Device: Android Emulator - Pixel_3a_API_36
• react-native-maps: 1.20.1
• react-native-map-clustering: ^4.0.0
• expo: 53.0.22
• react-native: 0.79.5

Codes

// assign different alias to avoid duplicate name with MapView
import ClusteredMapView from 'react-native-map-clustering'; 
import MapView, { MapPressEvent, PROVIDER_GOOGLE } from 'react-native-maps';

const getMarkersFromVenues = useMemo(() => {
    if (!data) return [];
    const markers = data.map((venue) => {
      const isSelected = selectedVenueDetails?.id === venue.id;
      return (
        <FootprintMapMarker
          key={`${venue.id}${isSelected}`}
          venue={venue}
          isSelected={isSelected}
          handleOnSelect={() => setSelectedVenueDetails(venue)}
        />
      );
    });

    return markers;
  }, [data, selectedVenueDetails]);

return (
    <>
      <ClusteredMapView
        ref={mapRef}
        rotateEnabled={false}
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 0,
          longitude: 0,
          latitudeDelta: 0,
          longitudeDelta: 0,
        }}
        toolbarEnabled={false}
        onPress={handleDeselectVenue}
        moveOnMarkerPress={false}
        onMapReady={zoomToFitMarkers}
        clusteringEnabled={true}
      >
        {getMarkersFromVenues}
      </ClusteredMapView>
      {selectedVenueDetails && <FootprintVenueDetail {...selectedVenueDetails} />}
    </>
  );

return (
    <Marker
      identifier={`venue-marker-id-${venue.id}`}
      coordinate={{ latitude: venue.latitude, longitude: venue.longitude }}
      tracksViewChanges={isEnabledTrackChanges}
      onPress={handleOnSelect}
      zIndex={isSelected ? 999 : 1}
    >
      {/* This wrapper is used to avoid flickering issue on Android */}
      <View collapsable={false}>
        <View style={styles.markerContainer}>
          <View
            style={[
              styles.iconContainer,
              {
                backgroundColor: isSelected ? Color.night : Color.white,
              },
            ]}
          >
            {getVenueIcon(venue.venueType, isSelected ? Color.white : Color.night)}
          </View>
          <Triangle width={8} height={8} color={isSelected ? Color.night : Color.white} />
        </View>
      </View>
    </Marker>
  );

Actual

Expected

https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif

[alexcraviotto]

Same issue, did you fix it? @lv2211

[iqra-khaliq]

Same issue, did you fix it? @lv2211

[alexcraviotto]

Same issue, did you fix it? @lv2211

I already fix it!

The solution is giving 'coordinate' props to your custom Marker, like this:

<CustomMarker coordinate={{ latitude: m.latitude!, longitude: m.longitude! }} key={m.id} />

[iqra-khaliq]

@alexcraviotto above solution didn't work for me

[alexcraviotto]

@alexcraviotto above solution didn't work for me

Show me your code please.

[iqra-khaliq]

@alexcraviotto The issue is now fixed. The problem was caused by the custom markers.
I also downgraded the versions of react-native-maps and react-native-map-clustering, which resolved the problem.

[olyalass]

@iqra-khaliq please share which versions you use now?

[iqra-khaliq]

@olyalass Using "react-native-map-clustering": "3.4.2" with "react-native-maps": "1.7.1", I wrote a patch for react-native-map-clustering to fix issues that appeared after installing the package.

When using a CustomMarker component, it didn’t render correctly — it only worked when defined inline, like in the example below:
areas?.flatMap(item => item.slots.map((slot, index) => ( <Marker key={${item.id}-slot-${index}} coordinate={{ latitude: slot.latitude, longitude: slot.longitude, }} > {svgIcon.pop1} </Marker> )) );

[olyalass]

@iqra-khaliq thanks a lot!

[lv2211]

@olyalass Using "react-native-map-clustering": "3.4.2" with "react-native-maps": "1.7.1", I wrote a patch for react-native-map-clustering to fix issues that appeared after installing the package.

When using a CustomMarker component, it didn’t render correctly — it only worked when defined inline, like in the example below: areas?.flatMap(item => item.slots.map((slot, index) => ( <Marker key={${item.id}-slot-${index}} coordinate={{ latitude: slot.latitude, longitude: slot.longitude, }} > {svgIcon.pop1} </Marker> )) );

Can you share the content of the patch file you've created @iqra-khaliq?

[iqra-khaliq]

@lv2211

In my patch, I added a key to selectively include specific markers in the cluster, since I didn’t want all markers to be clustered. You can remove that part if it’s not needed for your use case.

I also created separate .tsx files for my marker types — so if you’re passing .tsx or .jsx components as markers, you don’t need to use inline markers.

In my case, using inline .svg icons in markers was causing crashes on iOS. I’ve shared an example below for reference

Example: cluster is false by default
<Marker cluster key={${slot.spot_id}} coordinate={{ latitude: slot.latitude, longitude: slot.longitude, }} onPress={() => handleSlotPress(slot)} tracksViewChanges > {getSvg(index)} </Marker>

react-native-map-clustering+3.4.2.patch