[Bug] Google map satellite 3D view rotation bug

dana-ngis commented 2 years ago

Description

I am developing an application with is using Google Maps as a base map (using Angular front-end) and Deck.gl to render layers on top of the map. first of all, I find out that deck gl is not supporting rendering layers on the 3D view so I turned the layers off as soon as the user zoom-in in satellite view which will cause to turn on the 3D mode. after google map will reach to the level which can show 3D map there will be another feature that let user rotate the map by 90 degrees either clockwise or counterclockwise. this feature will work just for 90 degrees counterclockwise and 90 degrees back to the default view. I have checked the example on google official website which is using deck.gl as an example and appears they are facing the same issue. here is the link to an example: https://developers.google.com/maps/documentation/javascript/examples/deckgl-points

The steps to reproduce the bug is: 1- click on satellite view 2- zoom-in to metro areas such as San Francisco up to the level where you get a tilt button on the left-bottom of the map 3- click on clockwise rotation or double click on counter clockwise rotation

here is my browser console after facing the problem:

zone.js:182 Uncaught TypeError: Cannot read properties of null (reading '0')
    at Module.transformMat4 (vec4.js:486:1)
    at transformVector (math-utils.js:6:18)
    at pixelsToWorld (web-mercator-utils.js:179:33)
    at WebMercatorViewport.unproject (viewport.js:87:32)
    at getBounds (get-bounds.js:14:1)
    at WebMercatorViewport.getBounds (web-mercator-viewport.js:154:30)
    at WebMercatorViewport.get subViewports [as subViewports] (web-mercator-viewport.js:101:1)
    at DrawLayersPass._drawLayers (layers-pass.js:36:1)
    at DrawLayersPass.render (layers-pass.js:9:1)
    at DeckRenderer.renderLayers (deck-renderer.js:40:1)

you can see obviously some tiles will get missed and all text become funky:

Flavors

[ ] React
[ ] Python/Jupyter notebook
[ ] MapboxLayer
[X] GoogleMapsOverlay
[ ] CartoLayer
[X] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

No response

Steps to Reproduce

1- click on satellite view 2- zoom-in to metro areas such as San Francisco up to the level where you get a tilt button on the left-bottom of the map 3- click on clockwise rotation or double click on counter clockwise rotation

Environment

Framework version: Angular version 12, googlemaps version 1.12.0, deck.gl version 8.6.4
Browser: Chrome Version 97.0.4692.71, Edge Version 97.0.1072.62, Safari Version 15.2
OS: Windows pro10/11, macOS Monterey 12.1

Logs

No response

felixpalmer commented 2 years ago

Could you create a jsfiddle to demonstrate the issue? Tilt&rotation is working fine for me, see: https://jsfiddle.net/felixp/724v6hxy

What version of Google Maps are you using? The tilt/rotation only works with the new Google Vector Maps (https://developers.google.com/maps/documentation/javascript/webgl?hl=en)

dana-ngis commented 2 years ago

Hi Felixpalmer, check this out, I have set your center to Sydney and zoomed in to get the google rotation buttons available on map. https://jsfiddle.net/rcqawyjt/13/ I am getting the same problem in this example. I am using the latest version of Google Vector Maps.

felixpalmer commented 2 years ago

Thanks. I can repro the issue with this minimal setup:

function initMap() {
  let map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: -33.871507110816374, lng: 151.20968783548236},
    heading: -27, mapId: 'hybrid', mapTypeId: 'satellite', tilt: 45, zoom: 17
  });

  const overlay = new deck.GoogleMapsOverlay({layers: []});
  overlay.setMap(map);
}

initMap();

In Sydney it seems that the aerial imagery is available from multiple different headings, and the Google Maps do something different when the view is rotated. I will add this my list of tasks

visgl / deck.gl