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

Enhancement: Allow a "flyTo" prop to specify map behavior when updating location #260

Open
ajolipa opened this issue Mar 7, 2024 · 4 comments
Assignees
Labels
enhancement New feature or request

Comments

@ajolipa
Copy link
Contributor

ajolipa commented Mar 7, 2024

For purposes of the Path Viewer for Ground Beneath our Feet (and probably other future use cases), it would be useful to be able to specify to the PlaceMarker component that you would like to use the map.flyTo method rather than the map.jumpTo method (or whatever is currently being used) when the place data passed to the component updates.

Just as a possibly useful/related similar example, I had previously accomplished this in a similar-ish place marker component with the following useEffect hook:

  const [place, setPlace] = useState<FeatureCollection | undefined>(undefined);

  const map = useMap();

  useEffect(() => {
    fetch(props.uri)
      .then(res => res.json())
      .then(data => {
        const place = {
          ...data,
          properties: {
            ...data.properties,
            record_id: data.record_id
          }
        };

        setPlace({
          type: 'FeatureCollection',
          features: [place]
        });

        place?.geometry?.coordinates && props?.fly ? map.flyTo({ center: place.geometry.coordinates, zoom: props.defaultZoom || 12 }) : map.jumpTo({ center: place.geometry.coordinates, zoom: props.defaultZoom || 12 });
      });
  }, [props.uri])

The relevant thing here being that when the uri prop updates, the map either jumps or flies to the new location based on the value of the fly prop. Something similar for the PlaceMarker component would be useful.

@ajolipa ajolipa added the enhancement New feature or request label Mar 7, 2024
@dleadbetter
Copy link
Collaborator

Instead of hard-coding the animation into props, it might be nice to have an animation: string prop and let the component implement the animation.

@ajolipa
Copy link
Contributor Author

ajolipa commented Mar 7, 2024

@dleadbetter Not sure I completely follow; what would be an example of a value for the animation prop you're envisioning? And what do you mean by letting the component implement the animation?

@dleadbetter
Copy link
Collaborator

Just something like:

<PlaceMarker
  animation='fly'
/>

if (props.animation === 'fly') {
  map.flyTo();
}

@ajolipa
Copy link
Contributor Author

ajolipa commented Mar 8, 2024

Playing around with this further, my feeling is that it can be de-prioritized; it seems that the difference between the flyTo animation and the default animation that happens when the new box is drawn is not major enough to be urgent. Possibly an option as an enhancement in the future to allow more truly custom configured animation options, but for GBoF purposes I now think the default behavior should be fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants