[Bug]: onPress triggers when i click outside of the Mapbox ShapeSource

[mounssif]

Mapbox Implementation

Mapbox GL

Mapbox Version

10.11.1

Platform

iOS

@rnmapbox/maps version

10.0.0-beta.11

Standalone component to reproduce

import React, { useEffect, useState, useRef } from 'react';

import { useAuth  } from '../../hooks/auth';
import { SuccessMessage, SuccessMessageText } from '../../components/Messages/Success'
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StyleSheet, View, Text, TouchableOpacity, Modal, Image, ImageBackground } from 'react-native';
import Mapbox, { Map } from '@rnmapbox/maps';
import { Container, ButtonLogout, ButtonLogoutText, styles } from './styles';
import Geolocation from 'react-native-geolocation-service';
import FeatherIcon from 'react-native-vector-icons/Feather';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
const logoImage = require('./assets/logo.png'); 


const alcoData = {
  type: 'FeatureCollection',
  features: [
    {
      "type": "Feature",
      "properties": {
        "weight": 0,
        "id": "223",
        "type": "xx",
        "clean_type": "xx",
        "channel": "xx",
        "city": "xx",
        "country": "xx",
        "timeago": "1 ago",
        "message": "xx",
        "street": "xx",
        "img_url": "",
        "date": "Y-m-d H:i:s",
        "color": "#ffd800",
        "overlay_color": "#ffd800",
        "background_url": "bg_flash_1.jpg"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.1234567,
          51.234567
        ]
      }
    }
  ]
};

const bugReportExample: React.FC = () => {
  const mapElem = useRef<HTMLDivElement>(null);
 
  const [heatmapData, setHeatmapData] = useState([]);
  const [error, setError] = useState(null);
  const [zoomLevel, setZoomLevel] = useState(7);
  const [map, setMap] = useState<Map | null>(null);
  const [selectedFeature, setSelectedFeature] = useState(null);
  const camera = useRef<Camera>(null);

  updateCamera();

  const handleOnPress = (event) => {
    if (event.features.length > 0) {
      const feature = event.features[0];
      console.log(feature);
      setSelectedFeature(feature);
    }
  };

  const onClosePopup = () => {
    setSelectedFeature(null);
  };

  
  return (
     <>
      <Container>
        <View style={styles.page}>
          <View style={styles.container}>

            <Mapbox.MapView 
                      style={styles.map}
                      styleURL="mapbox://styles/mapbox/dark-v10"
                      showUserLocation={true}
                      zoomEnabled={false}
                    >
           

              {location && (
                <Mapbox.Camera
                  zoomLevel={zoomLevel}
                  ref={camera}
                />
              )}

              <Mapbox.UserLocation visible={true} />

              {location && (
                <Mapbox.MarkerView
                  id="marker"
                  coordinate={location}
                />
              )}

            
              {alcoData.length > 0 && (
               
               <Mapbox.ShapeSource 
                hitbox={false}
                 id="heatmapAlcoSource" 
                 shape={{ type: 'FeatureCollection', features: alcoData }} 
                 options={{ cacheKey: `${Date.now()}` }}
                 onPress={handleOnPress}>
                  
                  <Mapbox.CircleLayer
                    id="heatmapCircle"
                    style={{
                      circleRadius: 10,
                      circleOpacity: 1,
                      circleBlur: 1.1,
                      circleColor: '#ff6161',
                      circleStrokeWidth: 2,
                      circleStrokeColor: '#ff6161',
                  }}
                  />
              </Mapbox.ShapeSource>
              )}

            </Mapbox.MapView>
          </View>
        </View>


      </Container>
    </>
  );
}

export default bugReportExample;

Observed behavior and steps to reproduce

The problem can be understood from the example image given below, where if I click on the yellow position (outside the circlelayer), the circlelayer (white marking) gets triggered.

Expected behavior

I am looking for ideas or suggestions on how to modify the code so that the onPress event is only triggered when clicking on the circlelayer object within the shapesource.

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: '../../hooks/auth' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:4:1:
  2 | import React, { useEffect, useState, useRef } from 'react';
  3 | 
> 4 | import { useAuth  } from '../../hooks/auth';
    | ^
  5 | import { SuccessMessage, SuccessMessageText } from '../../components/Messages/Success'
  6 | import AsyncStorage from '@react-native-async-storage/async-storage';
  7 | import { StyleSheet, View, Text, TouchableOpacity, Modal, Image, ImageBackground } from 'react-native';


error: '../../components/Messages/Success' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:5:1:
  3 | 
  4 | import { useAuth  } from '../../hooks/auth';
> 5 | import { SuccessMessage, SuccessMessageText } from '../../components/Messages/Success'
    | ^
  6 | import AsyncStorage from '@react-native-async-storage/async-storage';
  7 | import { StyleSheet, View, Text, TouchableOpacity, Modal, Image, ImageBackground } from 'react-native';
  8 | import Mapbox, { Map } from '@rnmapbox/maps';


error: './styles' import is restricted from being used by a pattern. Repo example should complete - it should not use files from your project (no-restricted-imports) at example.tsx:9:1:
   7 | import { StyleSheet, View, Text, TouchableOpacity, Modal, Image, ImageBackground } from 'react-native';
   8 | import Mapbox, { Map } from '@rnmapbox/maps';
>  9 | import { Container, ButtonLogout, ButtonLogoutText, styles } from './styles';
     | ^
  10 | import Geolocation from 'react-native-geolocation-service';
  11 | import FeatherIcon from 'react-native-vector-icons/Feather';
  12 | import { PanGestureHandler, State } from 'react-native-gesture-handler';


error: 'require' is not defined (no-undef) at example.tsx:13:19:
  11 | import FeatherIcon from 'react-native-vector-icons/Feather';
  12 | import { PanGestureHandler, State } from 'react-native-gesture-handler';
> 13 | const logoImage = require('./assets/logo.png'); 
     |                   ^
  14 | 
  15 | 
  16 | const alcoData = {


error: 'Camera' is not defined (no-undef) at example.tsx:57:25:
  55 |   const [map, setMap] = useState<Map | null>(null);
  56 |   const [selectedFeature, setSelectedFeature] = useState(null);
> 57 |   const camera = useRef<Camera>(null);
     |                         ^
  58 | 
  59 |   updateCamera();
  60 | 


error: 'updateCamera' is not defined (no-undef) at example.tsx:59:3:
  57 |   const camera = useRef<Camera>(null);
  58 | 
> 59 |   updateCamera();
     |   ^
  60 | 
  61 |   const handleOnPress = (event) => {
  62 |     if (event.features.length > 0) {


6 errors found.```

[mfazekas]

ShapeSource has a hitbox - see https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox

[mounssif]

                hitbox={false}

As you can see in my bug report example, I used the hitbox, I tried false and true....

[mfazekas]

@mounssif hitbox is not boolean:

maps/src/components/ShapeSource.tsx

Lines 130 to 142 in a2b81d7

	/**
	* Overrides the default touch hitbox(44x44 pixels) for the source layers
	*/
	hitbox?: {
	/**
	* `width` of hitbox
	*/
	width: number;
	/**
	* `height` of hitbox
	*/
	height: number;
	};