[Bug] GoogleMapsOverlay does not draw without map interaction
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Description
Description
The issue we are running into is that we load the Google map immediately, then later when we have data come in we use that to display a Deck.gl IconLayer. But this new layer doesn't appear unless the user interacts with the map, or we programmatically change some map property.
According to the Google Maps documentation, "The onDraw() method will then be called whenever a map property changes that could change the position of the element, such as zoom, center, or map type."
So as dumb as it sounds, this does seem like the intended behavior on Google's side, but it feels like calling GoogleMapsOverlay.setMap() should result in displaying the deck.gl layers no matter when it is called, without requiring hacks/user interaction.
We have a hacky workaround to trick the map into re-rendering by changing the map center by an infinitesimal amount, but we shouldn't have to do that:
const c = m.getCenter();
m.setCenter(new gmAPI.LatLng(c.lat() + 0.000000000001, c.lng()));
I was also able to hack a fix by calling requestRedraw() in the _onAdd() method of GoogleMapsOverlay
Flavors
- Script tag
- React
- Python/Jupyter notebook
- MapboxOverlay
- GoogleMapsOverlay
- CartoLayer
- ArcGIS
Expected Behavior
- Initialize
google.maps.Map() - Wait some amount of time for data to arrive from a database.
- Initialize a
deck.IconLayeranddeck.GoogleMapsOverlaywith the layer - Call
deck.GoogleMapsOverlay.setMap() - Immediately see the icons displayed on the map
Steps to Reproduce
https://codepen.io/samschurter/pen/zYgOvdL
Environment
- Framework version:
- "@deck.gl/geo-layers": "^9.0.17",
- "@deck.gl/google-maps": "^9.0.14",
- "@deck.gl/layers": "^9.0.14",
- Browser: Chrome 128
- OS: MacOS 14.6
Logs
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with modules/google-maps/src/google-maps-overlay.ts, especially the _onAdd() path referenced in the issue, and reproduce the behavior using the linked CodePen. Verify what happens when data arrives after google.maps.Map() initialization and GoogleMapsOverlay.setMap() is called. Done means the IconLayer appears immediately without map interaction or a manual map-property change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100