Repository navigation
fix(google-maps): align raster overlay under CSS scale transforms - #10843
chrisgervang wants to merge 1 commit into
Conversation
Google Maps reports container pixels and mouse event pixels in rendered units, while the overlay is positioned in CSS layout units. Measure the overlay pane origin in layout units, convert positions through div pixels, and scale event pixels back to layout units.
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| - Controller | ||
| - React integration | ||
| - Gesture event callbacks (e.g. `onDrag*`) | ||
| - CSS rotate or skew transforms on the map or its ancestors (scale transforms are supported) |
There was a problem hiding this comment.
The new limitation bullet also announces scale-transform support. The repository requires newly added support to be documented in docs/whats-new.md instead. Keep the rotate/skew limitation here and move the support announcement to that file. This requirement must be satisfied before merging.
Rule Used: In the deck.gl repository, use Remarks sections only for user-facing, actionable limitations; document newly added support in docs/whats-new.md instead. (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| for (const cssScale of [1, 0.5]) { | ||
| test(`GoogleMapsOverlay#raster CSS transform (scale:${cssScale})`, async () => { |
There was a problem hiding this comment.
The new test covers only raster maps with uniform scaling. But getEventPixel changes vector picking too, and getContainerPixelScale treats the two axes separately. Extend the test and mock to cover vector picking and unequal horizontal and vertical scales. Otherwise, either case could break while these tests still pass.
|
coverage: 83.594% (+0.08%) from 83.517% — chr/google-maps-css-transform into master |
This branch has not been deployed
2 participants
Closes #10587
Background
With a CSS
scale()transform on the map or an ancestor, Google Maps reports container pixels andevent.pixelin rendered units, whileGoogleMapsOverlaypositions its canvas in layout units. On raster maps the deck canvas is shifted, which clips layers, and on raster and vector maps hover and click pick the wrong object.Change List
getViewPropsFromOverlay: measure the pane origin in layout pixelspixelToLngLat: convert throughfromDivPixelToLatLnggetEventPixel: scaleevent.pixelback to layout pixelsVerified in
examples/basemap-browserwith a transform on<body>; the scale 0.5 unit test fails without the fix.scale(0.5): layers end at the shifted canvas edgescale(0.75, 0.5)scale(0.5), pointer on Schiphol (red ring)scale(0.5), pointer on Schiphol (red ring)Note
Medium Risk
Touches core overlay view-state and input coordinate math for all raster Google Maps integrations; limited to transform edge cases but incorrect math would break alignment or picking broadly.
Overview
Fixes misaligned deck canvases and wrong hover/click picking when the Google Map (or a parent) uses a CSS
scale()transform. Google reports container pixels andevent.pixelin rendered units while the overlay positions the canvas in layout pixels.getViewPropsFromOverlaynow derives canvas offsets viagetDivOrigin(pane origin in layout space, corrected withgetContainerPixelScalefromgetBoundingClientRectvsoffsetWidth/Height).pixelToLngLatmaps through div pixels (fromDivPixelToLatLng), andgetEventPixeldivides mouse pixels by the scale so Deck sees layout coordinates.Tests add raster overlay checks at
cssScale1 and 0.5; the mock Maps API models div vs container pixel offsets like the real API. Docs note scale transforms are supported; rotate/skew on the map or ancestors remain unsupported.Reviewed by Cursor Bugbot for commit dcc36e3. Bugbot is set up for automated code reviews on this repo. Configure here.