Merge pull request #3154 from joshuapaling/OverlayViewBounds

Author: JustFly1984

packages/react-google-maps-api/src/components/dom/Overlay.tsx

@@ -1,4 +1,4 @@
-import { getOffsetOverride } from './dom-helper'
+import { getOffsetOverride, getLayoutStyles } from './dom-helper'
 
 type fnPixelPositionOffset = (
   offsetWidth: number,
@@ -7,23 +7,27 @@ type fnPixelPositionOffset = (
 export function createOverlay(
   container: HTMLElement,
   pane: keyof google.maps.MapPanes,
-  position: google.maps.LatLng | google.maps.LatLngLiteral,
+  position?: google.maps.LatLng | google.maps.LatLngLiteral,
+  bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral,
   getPixelPositionOffset?: fnPixelPositionOffset
 ) {
   class Overlay extends google.maps.OverlayView {
     container: HTMLElement
     pane: keyof google.maps.MapPanes
-    position: google.maps.LatLng | google.maps.LatLngLiteral
+    position: google.maps.LatLng | google.maps.LatLngLiteral | undefined
+    bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral | undefined
 
     constructor(
       container: HTMLElement,
       pane: keyof google.maps.MapPanes,
-      position: google.maps.LatLng | google.maps.LatLngLiteral
+      position?: google.maps.LatLng | google.maps.LatLngLiteral,
+      bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral
     ) {
       super()
       this.container = container
       this.pane = pane
       this.position = position
+      this.bounds = bounds
     }
 
     onAdd(): void {
@@ -33,22 +37,26 @@ export function createOverlay(
 
     draw(): void {
       const projection = this.getProjection()
-      const point = projection.fromLatLngToDivPixel(this.position)
       const offset = {
         ...(this.container
           ? getOffsetOverride(this.container, getPixelPositionOffset)
           : {
             x: 0,
             y: 0,
           }),
-      }
-      if (point === null) {
-        return
+        }
+
+      const layoutStyles = getLayoutStyles(
+        projection,
+        offset,
+        this.bounds,
+        this.position
+      )
+
+      for (const [key, value] of Object.entries(layoutStyles)) {
+        this.container.style[key] = value
       }
 
-      this.container.style.transform = `translate(${point.x + offset.x}px, ${
-        point.y + offset.y
-      }px)`
     }
 
     onRemove(): void {
@@ -57,5 +65,5 @@ export function createOverlay(
       }
     }
   }
-  return new Overlay(container, pane, position)
+  return new Overlay(container, pane, position, bounds)
 }

packages/react-google-maps-api/src/components/dom/OverlayView.stories.tsx

@@ -21,12 +21,14 @@ export default {
   component: OverlayViewF,
 } as ComponentMeta<typeof OverlayViewF>
 
+
 const getPixelPositionOffset = (width: number, height: number) => ({
   x: -(width / 2),
   y: -(height / 2),
 })
 const Template: ComponentStory<typeof OverlayViewF> = () => {
-  return (
+const newZealand = new google.maps.LatLngBounds({lat: -46.641, lng: 166.509}, {lat: -34.450, lng: 178.517})
+return (
     <GoogleMap mapContainerStyle={mapContainerStyle} zoom={3} center={center}>
       {locations.map((location, index) => (
         <OverlayViewF
@@ -47,6 +49,23 @@ const Template: ComponentStory<typeof OverlayViewF> = () => {
           </div>
         </OverlayViewF>
       ))}
+
+      <OverlayViewF
+        mapPaneName={OVERLAY_LAYER}
+        bounds={newZealand}
+        position={{lat: -46.641, lng: 166.509}}
+        >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(255,255,0,0.4)',
+            fontSize: '12px',
+          }}
+        >
+          Overlay with Bounds
+        </div>
+      </OverlayViewF>
     </GoogleMap>
   )
 }

packages/react-google-maps-api/src/components/dom/OverlayView.tsx

@@ -70,7 +70,7 @@ export interface OverlayViewProps {
   children?: ReactNode | undefined
   // required
   mapPaneName: PaneNames
-  position: google.maps.LatLng | google.maps.LatLngLiteral
+  position?: google.maps.LatLng | google.maps.LatLngLiteral | undefined
   getPixelPositionOffset?:
     | ((offsetWidth: number, offsetHeight: number) => { x: number; y: number })
     | undefined
@@ -90,6 +90,7 @@ export const OVERLAY_MOUSE_TARGET: PaneNames = `overlayMouseTarget`
 
 function OverlayViewFunctional({
   position,
+  bounds,
   mapPaneName,
   zIndex,
   onLoad,
@@ -109,9 +110,10 @@ function OverlayViewFunctional({
       container,
       mapPaneName,
       position,
+      bounds,
       getPixelPositionOffset
     )
-  }, [container, mapPaneName, position])
+  }, [container, mapPaneName, position, bounds])
 
   useEffect(() => {
     onLoad?.(overlay)