[Bug]: PointAnnotation renders underneath other layers

[harishgupta01]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.72.7

Platform

iOS

@rnmapbox/maps version

10.1.31

Standalone component to reproduce

import React, { useState } from 'react';
import { LineLayer, ShapeSource, PointAnnotation } from '@rnmapbox/maps';
import { View } from 'react-native';
import getDistance from 'geolib/es/getDistance';
import { Modal } from '@components';
import { Button } from 'react-native-paper';
// import { polygonFeature } from '../../../../utils/map-helper';

const EditFieldBoundary = ({ polygon, onComplete }) => {
  const featureCollection = (poly) => {
    return {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: 'a-feature',
          properties: {},
          geometry: { type: 'Polygon', coordinates: [poly] }
        }
      ]
    };
  };

  const [selectedCoordinates, setSelectedCoordinates] = useState(polygon);
  const [modalVisible, setModalVisible] = useState(false);

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

  const draggingEditablePoint = (index, feature) => {
    const diff = getDistance(
      {
        latitude: feature.geometry.coordinates[1],
        longitude: feature.geometry.coordinates[0]
      },
      {
        latitude: draggedPoint.point[1],
        longitude: draggedPoint.point[0]
      }
    );
    if (diff > 30) {
      setModalVisible(true);
    } else {
      const updatedCoordinates = [...selectedCoordinates];
      updatedCoordinates[index] = feature.geometry.coordinates;
      setSelectedCoordinates(updatedCoordinates);
    }
  };

  const changeCoordinate = (index, feature) => {
    const newCoord = [feature.geometry.coordinates[0], feature.geometry.coordinates[1]];
    // if (!modalVisible) {
    const newPolygonCoords = [...selectedCoordinates];
    newPolygonCoords.splice(index, 1);
    newPolygonCoords.splice(index, 0, newCoord);

    setSelectedCoordinates(newPolygonCoords);
  };
  if (selectedCoordinates?.length === 0) {
    return null;
  }

  return (
    <>
      <Button
        testID="sendCodeButton"
        style={{ position: 'absolute', top: 120, backgroundColor: 'white', zIndex: 100011 }}
        onPress={() => {
          onComplete(selectedCoordinates);
        }}>
        done
      </Button>

      <ShapeSource id="dottedLineSource" shape={featureCollection(selectedCoordinates)}>
        <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(index, feature)}
              onDragEnd={(feature) => changeCoordinate(index, feature)}>
              <View
                style={{
                  zIndex: 100000,
                  width: 20,
                  height: 20,
                  borderRadius: 50,
                  backgroundColor: 'black',
                  justifyContent: 'center',
                  borderColor: 'white',
                  borderWidth: 2
                }}
              />
            </PointAnnotation>
          );
        })}

      <Modal
        type="warning"
        visible={modalVisible}
        title="Adjustments Exceeded Allowances"
        bodyContent="Boundary Adjustments are exceeding allowances."
        primaryButtonOnPress={() => {
          const updatedCoordinates = [...selectedCoordinates];
          updatedCoordinates[draggedPoint.index] = draggedPoint.point;
          setSelectedCoordinates(updatedCoordinates);
          setModalVisible(false);
        }}
        primaryButtonText="close"
      />
    </>
  );
};

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

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'polygon' is missing in props validation (react/prop-types) at example.jsx:10:30:
   8 | // import { polygonFeature } from '../../../../utils/map-helper';
   9 | 
> 10 | const EditFieldBoundary = ({ polygon, onComplete }) => {
     |                              ^
  11 |   const featureCollection = (poly) => {
  12 |     return {
  13 |       type: 'FeatureCollection',


error: 'onComplete' is missing in props validation (react/prop-types) at example.jsx:10:39:
   8 | // import { polygonFeature } from '../../../../utils/map-helper';
   9 | 
> 10 | const EditFieldBoundary = ({ polygon, onComplete }) => {
     |                                       ^
  11 |   const featureCollection = (poly) => {
  12 |     return {
  13 |       type: 'FeatureCollection',


2 errors found.```

[vaishnavi-techp]

I am also encountering the same issue. Is there any workaround for this?

[catarinadasilva]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'polygon' is missing in props validation (react/prop-types) at example.jsx:10:30:
   8 | // import { polygonFeature } from '../../../../utils/map-helper';
   9 | 
> 10 | const EditFieldBoundary = ({ polygon, onComplete }) => {
     |                              ^
  11 |   const featureCollection = (poly) => {
  12 |     return {
  13 |       type: 'FeatureCollection',


error: 'onComplete' is missing in props validation (react/prop-types) at example.jsx:10:39:
   8 | // import { polygonFeature } from '../../../../utils/map-helper';
   9 | 
> 10 | const EditFieldBoundary = ({ polygon, onComplete }) => {
     |                                       ^
  11 |   const featureCollection = (poly) => {
  12 |     return {
  13 |       type: 'FeatureCollection',


2 errors found.```

I was able to run the example, I've something similar but can't bring the PointAnnotations above the shapes

The example is in pure js, you may be trying to load in a ts project ar a .ts extension file.