CODEWITHSUNDEEP
google-maps-markersz-indexreact-native-maps
JulesUK
JulesUK

Reputation: 487

Change zIndex of custom marker or move to front or mimic marker pressed on react native maps

I have a react-native-map that works by loading data in an array and displays images as markers from info in array. I have a react-native-snap-carousel running on the map that when it snaps into place it animatesToRegion of the said marker.

This works great but if 2 or more markers are close together they overlap in order of the array. I need the marker at the location to be at the front. I can change the order of the array but this causes performance issues with re-renders and problems with keeping of track of indexes in other pages.

Is there a way that mimics the marker as pressed when animating to region? This would work without the need for zIndexes. Things I have tried :

I have tried changing the zIndex of the markers but this does not work on IOS.

I have tried editing the AIRMapMarker.m file with the following code that was a solution found on here posted a while ago but is not reliable at all :

- (void)setZIndex:(NSInteger)zIndex
{
    if (zIndex == 2) {  // added line
        [self setSelected:YES animated:NO]; // added line
    } else { // added line
        [self setSelected:NO animated:NO]; // added line
    } // added line
    _zIndex = zIndex;
    self.layer.zPosition = _zIndex;
}

Surely this is a very common issue and has a solution. I have looked everywhere.

Thanks

Upvotes: 1

Views: 273

Answers (2)

usama ijaz
usama ijaz

Reputation: 1

<Marker style={{ zIndex: selected ? 1 : 0 }} .../>

did not work for me but

<Marker style={{ zIndex: selected ? 1000 : 0 }} .../>

did 🎉

Upvotes: 0

JulesUK
JulesUK

Reputation: 487

I have managed to do it,

I added this :

const markerRefs = useRef([]);

I added this to the marker :

ref={(ref) => (markerRefs.current[index] = ref)}

and when I load the data, I can add this to a where statement to focus in one that marker :

markerRefs.current[index].showCallout(),

Simple but there is not a lot of information regarding this online, which is the easiest and only way(I think) to move the marker to the front of others(IOS mainly) If it is not that clear, shout me up and will go into more details. Thanks

Upvotes: 1

Related Questions