Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MateusPequeno opened this issue Mar 24, 2023 · 0 comments

Comments

@MateusPequeno
Copy link

MateusPequeno commented Mar 24, 2023

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant