JustFly1984 / react-google-maps-api

React Google Maps API
MIT License
1.76k stars 426 forks source link

Add Functional GroundOverlayF component #3174

Closed lkuich closed 1 year ago

lkuich commented 1 year ago

Please provide an explanation of the issue

Currently there isn't a functional version of GroundOverlay. I've made something small for the interm for my needs, but having a fully featured component would be awesome!

function GroundOverlayFunctional({ url, bounds, options, visible }: GroundOverlayProps) {
  const map = useContext<google.maps.Map | null>(MapContext)

  const imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(bounds.south, bounds.west),
    new google.maps.LatLng(bounds.north, bounds.east)
  );

  const groundOverlay = useMemo(() => {
    return new google.maps.GroundOverlay(url, imageBounds, options);
  }, []);

  useEffect(() => {
    if (groundOverlay !== null) {
      groundOverlay.setMap(map);
    }
  }, [map])

  useEffect(() => {
    if (typeof url !== 'undefined' && groundOverlay !== null) {
      groundOverlay.set("url", url);
      groundOverlay.setMap(map);
    }
  }, [groundOverlay, url]);

  useEffect(() => {
    if (typeof visible !== 'undefined' && groundOverlay !== null) {
      groundOverlay.setOpacity(visible ? 1 : 0);
    }
  }, [groundOverlay, visible]);

  useEffect(() => {
    const newBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(bounds.south, bounds.west),
      new google.maps.LatLng(bounds.north, bounds.east)
    );

    if (typeof bounds !== 'undefined' && groundOverlay !== null) {
      groundOverlay.set("bounds", newBounds);
      groundOverlay.setMap(map);
    }
  }, [groundOverlay, bounds])

  return null;
}

export const GroundOverlayF = memo(GroundOverlayFunctional);

Your Environment

os: mac

node --version

react version: 18.1.0

webpack version: 5.74.0

@babel version: 7.20.2

@react-google-maps/api version: 2.17.1

How does it behave?

No component exists.

How should it behave correctly?

A functional component for modern React should exist.

Basic implementation of incorrect behavior in codesandbox.com

JustFly1984 commented 1 year ago

Your PR is welcome.

lkuich commented 1 year ago

Thanks, I just opened a PR here: https://github.com/JustFly1984/react-google-maps-api/pull/3175