Can't press ShapeSource on top of UserLocation

Hello,

I have a SymbolLayer located underneath the UserLocation, and I wish the SymbolLayer to be pressable. But it seems it can’t be done: when I press the icon, it is actually the UserLocation which is pressed, and the UserLocation onPress event doesn’t have any argument and doesn’t have a pointerEvents prop or equivalent.

Is there a way to get to the SymbolLayer ?

Again, great repo, and greater to become, thanks all for the work done !

[arnaudambro]

Alright, with a proper utilisation of belowLayerID and aboveLayerId, I got this working. SUppose your SymbolLayer within your ShapeSource has an id of markersSymbol, here is the code I used for the UserLocation

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { withTheme } from 'styled-components';

const layerStyles = (circleColor) => ({
  pluse: {
    circleRadius: 15,
    circleColor,
    circleOpacity: 0.2,
    circlePitchAlignment: 'map',
  },
  background: {
    circleRadius: 9,
    circleColor: '#fff',
    circlePitchAlignment: 'map',
  },
  foreground: {
    circleRadius: 6,
    circleColor,
    circlePitchAlignment: 'map',
  },
});


const MyUserLocation = ({ theme: { color: { primary } } }) =>
  <MapboxGL.UserLocation
    visible
    animated
  >
    <MapboxGL.CircleLayer
      key="mapboxUserLocationPluseCircle"
      id="mapboxUserLocationPluseCircle"
      belowLayerID='markersSymbol'
      style={layerStyles(primary).pluse}
    />
    <MapboxGL.CircleLayer
      key="mapboxUserLocationWhiteCircle"
      id="mapboxUserLocationWhiteCircle"
      belowLayerID='markersSymbol'
      style={layerStyles(primary).background}
    />
    <MapboxGL.CircleLayer
      key="mapboxUserLocationBlueCicle"
      id="mapboxUserLocationBlueCicle"
      belowLayerID='markersSymbol'
      aboveLayerID="mapboxUserLocationWhiteCircle"
      style={layerStyles(primary).foreground}
    />
  </MapboxGL.UserLocation>

export default withTheme(MyUserLocation)

[lpfunding]

@kristfal I don’t think this is a narrow usecase… If anyone has custom markers rendered (think of the earthquake example) which are clickable, none can be clicked if they are within a 1inch by 1inch square of UserLocation…