[Bug]: PointAnnotation renders underneath other layers

[vaishnavi-techp]

Mapbox Implementation

Mapbox GL

Mapbox Version

10.1.32

React Native Version

0.74.5

Platform

iOS, Android

@rnmapbox/maps version

10.1.32-beta.11

Standalone component to reproduce

import React, { useState } from 'react';
import { LineLayer, ShapeSource, PointAnnotation } from '@rnmapbox/maps';
import { View } from 'react-native';
import { Button } from 'react-native-paper';

const EditFieldBoundary = () => {
 const featureCollection = () => {
   return {
     type: 'FeatureCollection',
     features: [
       {
         type: 'Feature',
         id: 'a-feature',
         properties: {},
geometry: {
           type: 'LineString',
           coordinates: [74,7354736583765,36.84765843584],
         },
       }
     ]
   };
 };

 const [selectedCoordinates, setSelectedCoordinates] = useState();
 const [draggedPoint, setDraggedPoint] = useState({ index: -1, point: null });

 const draggingEditablePoint = (feature) => {
  console.log(feature)
 };

 const changeCoordinate = (feature) => {
  console.log(feature)
 }

 return (
   <>
     <ShapeSource id="dottedLineSource" shape={featureCollection()}>
       <LineLayer
         id="dottedLineLayer"
         sourceID="dottedLineSource"
         style={{
           lineWidth: 2,
           lineColor: 'white',
           lineDasharray: ['literal', [1, 1]]
         }}
       />
     </ShapeSource>
     {selectedCoordinates?.length > 0 &&
       selectedCoordinates?.map((coord, index) => {
         return (
           <PointAnnotation
             key={`vertex-${index}`}
             id={`vertex-${index}`}
             coordinate={coord}
             style={{ zIndex: 1000 }}
             draggable
             onSelected={(feature) => {}}
             onDragStart={(feature) => {
               setDraggedPoint({
                 index,
                 point: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]]
               });
             }}
             onDrag={(feature) => draggingEditablePoint(feature)}
             onDragEnd={(feature) => changeCoordinate(feature)}>
             <View
               style={{
                 zIndex: 100000,
                 width: 20,
                 height: 20,
                 borderRadius: 50,
                 backgroundColor: 'black',
                 justifyContent: 'center',
                 borderColor: 'white',
                 borderWidth: 2
               }}
             />
           </PointAnnotation>
         );
       })}
   </>
 );
};

export default EditFieldBoundary;

Observed behavior and steps to reproduce

I have a use case where I need to show a circle shape for all the vertices for the polygon and should able to drag the vertices circle to adjust the polygon shape (Attached Image). I am using Pint Annotation along with the LineLayer for this use case but point annotation always comes underneath the line layer. I have tried solutions like setting the higher zIndex for the point annotation or rendering point annotation after line layer rendering is done but nothing seems to be working. Could someone please help here since this is a blocker for the whole feature?

Expected behavior

There should be a way where i should able move the point annotation above any other layer.

Notes / preliminary analysis

No response

Additional links and references

No response

[ourdudekyle]

You can use getAnnotationsLayerID to have your line layer place itself below the annotations:

<LineLayer
    id="dottedLineLayer"
    sourceID="dottedLineSource"
    belowLayerID={Mapbox.getAnnotationsLayerID("PointAnnotations")}
    style={{
         lineWidth: 2,
         lineColor: 'white',
         lineDasharray: ['literal', [1, 1]]
    }}
/>

Android will need a PointAnnotation to be rendered first, for this to work.

[rohit9625]

It works, thanks @ourdudekyle.