maps: Can't press ShapeSource on top of UserLocation

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)

@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…

Workaround can be to put a transparent layer on top of the layer in the shape source with a higher index than user location.

We could accept a PR with a prop on UserLocation that disables the on press listener, but I honestly feel like this is a very narrow usecase with a functional workaround.

@arnaudambro Thank you very much for your help! I’m getting a step closer to what i’m looking for.

With your solution, user is hidden below the symbol so it can not be seen. What I’m trying to do is to have user on the top of the symbol but the user layer not capturing onPress event that way the layer of the symbol could catch the onPress event.

For know I did set a pulse circleRadius larger than my symbol that way the user can still guess where he is located on the map by seeing a part of the pulse circle. Bad UX but better than seeing nothing 😄