Search code examples
react-map-gl

How to detect that the mapbox viewport have been moved significantly to "search within this area"?

I am using "react-map-gl", nothing of the sort was available out of the box. What is the most preferred method for detecting this scenario?

Solution

  • This seems like a good place for the useEffect hook.

    viewport state changes whenever a user pans or zooms, so if you place these three properties in the useEffect dependency array, whatever logic within useEffect body will be invoked whenever the viewport state updates.

    Example

    useEffect(() => {

  // implement your search logic here
    
}, [viewport.latitude, viewport.longitude, viewport.zoom]);