performant-software / react-components

A library of shared React components
https://performant-software.github.io/react-components/
MIT License
1 stars 1 forks source link

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

Open ajolipa opened 6 months ago

ajolipa commented 6 months ago

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.

dleadbetter commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

Just something like:

<PlaceMarker
  animation='fly'
/>

if (props.animation === 'fly') {
  map.flyTo();
}
ajolipa commented 6 months ago

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.