nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 699 forks source link

Could onRegionDidChange event result bring the screenPointX, screenPointY just like in onPress? #1729

Open MateusPequeno opened 1 year ago

MateusPequeno commented 1 year ago

I'm facing a problem while using queryRenderedFeaturesAtPoint function, this function is expecting to receive coordinates do load the Features from my mapbox polygn, the problem i'm facing is that whenever i call this function on onRegionDidChange it dosen't work, i've tryed many different things, sending the events coordinates, turning the coordinates into a a point by usage of getPointInView and sending the events coordinates but it didn't work, i also tried to use the getCenter to get the center of the map and turn the lat and long using getPointInView again and sending it to queryRenderedFeaturesAtPoint, didn't work, even when i'm sending fixed values the queryRenderedFeaturesAtPoint keeps returning a different result whenever i call onRegionDidChange, but whenever i use the onPress, the event returns me values like the screenPointX, screenPointY and sending those to queryRenderedFeaturesAtPoint it gets me the exact expected result, sadly i need this to work with onRegionDidChange because i need that whenever the user drags the map, to get the center of the map values. Thx in advance.

const handleMapPress = async event => {
    const {screenPointX, screenPointY} = event.properties;
    const mapFeaturesAtPoint =
      await mapRef.current.queryRenderedFeaturesAtPoint([
        screenPointX,
        screenPointY,
      ]);
    setLocation(event.geometry.coordinates);
    //console.log('mapFeaturesAtPoint:::', JSON.stringify(mapFeaturesAtPoint));
    await getInfo(mapFeaturesAtPoint);
  };
const handleRegionDidChange = async event => {
    const center = await mapRef.current.getCenter();
    const longitude = parseFloat(center[0]);
    const latitude = parseFloat(center[1]);
    const projectCenter = [longitude, latitude];
    console.log('PREVIOUSprojectCenter', projectCenter)
    const pointInView = await mapRef.current.getPointInView(projectCenter);
    const mapFeaturesAtPoint =
      await mapRef.current.queryRenderedFeaturesAtPoint(pointInView);
    await getInfo(mapFeaturesAtPoint);
  };
 <Mapbox.MapView
        style={styles.map}
        onRegionDidChange={event => handleRegionDidChange(event)}
        onPress={event => handleMapPress(event)}
        ref={mapRef}
        showUserLocation={true}
        logoEnabled={false}
        attributionEnabled={true}
        surfaceView={true}
        styleURL={'mapbox://styles/infopaysimplex/ckoa5kvni53s318lodwzjq0v2'}>
        {location && (
          <Mapbox.Camera
            ref={camRef}
            zoomLevel={15}
            centerCoordinate={location}
            duration={1000}
          />
        )}
        <Mapbox.UserLocation
          visible={true}
          renderMode="normal"
          showsUserHeadingIndicator={true}
          userLocationVerticalAlignment={0.5}
          iconImage="my-icon"
        />
      </Mapbox.MapView>