[Bug]: PointAnnotation order cannot be managed (zIndex; symbolSortKey; key; id; sorting)

[RyanTG]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.13

Standalone component to reproduce

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView 
          style={styles.map}
          scaleBarEnabled={false}
          pitchEnabled={false}
          rotateEnabled={false}
        >
          <Mapbox.PointAnnotation
            id={'10'}
            key={'10'}
            style={{zIndex: 10}}
            symbolSortKey={10}
            coordinate={[4.31, 5.97]}
          >
            <View
              style={[{
                backgroundColor: 'yellow',
                },
                styles.marker
              ]}
            />
          </Mapbox.PointAnnotation>
          <Mapbox.PointAnnotation
            id={'30'}
            key={'30'}
            style={{zIndex: 30}}
            symbolSortKey={30}
            coordinate={[4.41, 5.87]}
          >
            <View
              style={[{
                backgroundColor: 'green',
                },
                styles.marker
              ]}
            />
          </Mapbox.PointAnnotation>
          <Mapbox.PointAnnotation
            id={'20'}
            key={'20'}
            style={{zIndex: 20}}
            symbolSortKey={20}
            coordinate={[4.51, 5.77]}
          >
            <View
              style={[{
                backgroundColor: 'red',
                },
                styles.marker
              ]}
            />
          </Mapbox.PointAnnotation>
        </Mapbox.MapView>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1
  },
  marker: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: 0,
  }
});

This is something of a general Issue. Is it a bug report or a feature request? It is a request to identify, or create, some method to manage the order of Point Annotations.

Observed behavior and steps to reproduce

Example contains 3 PointAnnotation markers situated near one another. Zoom in a little and you can see how they overlap each other.

The observed behavior is that the order of the markers (how they overlap each others) is based on an unknown methodology (though my seems like it might be based on painting from lower right to upper left), and various attempts to manage the order are not working.

Expected behavior

I would expect symbolSortKey or zIndex or even the sorting of the PointAnnotations to affect the order.

Notes / preliminary analysis

Methods include:

• Sorting the PointAnnotation components (as in, actually moving one before another in the code)
• Applying an id that denotes order
• Applying a key that denotes order
• Applying a zIndex to the style that denotes order
• Applying a symbolSortKey (which is a prop that appears to be available in both the Android and iOS code) that denotes order.

Other observed behavior is that when pitchEnabled or rotateEnabled are true, playing with those will end up changing the order (markers will suddenly hop on top of another).

In summary, there seems to be no clear way to manage the order of the markers when using Point Annotation.

[mfazekas]

@RyanTG symbolSortKey and symbolZOrder applies for symbol layer. PointAnnotation doesn't have such properties see https://github.com/rnmapbox/maps/blob/main/docs/PointAnnotation.md

[RyanTG]

I suspected as much. But then when I saw

symbolSortKey on

https://docs.mapbox.com/android/maps/api/10.16.0/mapbox-maps-android/com.mapbox.maps.plugin.annotation.generated/-point-annotation/
and
https://docs.mapbox.com/ios/maps/api/10.2.0/Structs/PointAnnotation.html
and
https://github.com/mapbox/mapbox-maps-ios/blob/2444553f8c550707dbc9730fb8979c9dbad997a8/Sources/MapboxMaps/Annotations/Generated/PointAnnotationManager.swift#L397

I thought perhaps there was a chance it was available to PointAnnotations.

From looking here, it seems like symbolSortKey might be a static value?