[Bug] GoogleMapsOverlay demo not working on Samsung S22+

[tim-lloyd]

Description

This google demo page fails for Android S22+.

Flavors

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

Expected Behavior

Points

Steps to Reproduce

https://developers.google.com/maps/documentation/javascript/examples/deckgl-points

The problem was reported to me by a user with a Galaxy S22+ with One UI 4.1

I reproduced the problem on on an S22+ Android devices on the Samsung Developer Remote Test Lab https://developer.samsung.com/remotetestlab

Environment

• Framework version: per google demo page
• Browser: Samsung android native (and others)
• OS: Android 12 with One UI 4.1

Logs

No response

[Pessimistress]

Can you elaborate what "fails" means? Does the page crash? Does the map appear black?

[tim-lloyd]

Can you elaborate what "fails" means? Does the page crash? Does the map appear black?

As I understand it from the user, on page load, the map appears without any dots for an instant, then the map disappears (goes white, same as page background). If the user scrolls the page, or scrolls the map, or taps the map zoom buttons, then the map reappears briefly without dots, then instantly disappears again. The user also reports that the phone gets hot.

This is the behavior with chrome. Other browsers behave slightly differently, but all fail.

The user report is consistent with the behavior that I see when loading the page with chrome on a remote test device.

The user would be happy to communicate with you directly. If that would be useful, please contact me privately for details.

Background:

The user reported that a map that I have written wasn't working for him. Eventually I was able to reproduce his error on a remote S22+, but not on any other model so far. As far as I can tell at a distance, my deck.gl layer first experiences an immediate loss of context and is then blocked by the browser from recovering. It is entirely possible that I have made an error, so we used the google deck.gl demo page as a further diagnostic and found that it failed too, as described above.

Update:

I have an anecdotal report of similar behavior from a linux user, but I am awaiting some confirmation.

[felixpalmer]

Thanks for the details. We also did some testing and found while the Google demo page wasn't working then the example on https://deck.gl/examples/google-maps/ works fine. Could you confirm on your side that this is the case? Mobile browsers often have strict limits on how much memory a page can access so it is possible that root cause is not due to deck but something else in the application

[tim-lloyd]

Yes, https://deck.gl/examples/google-maps/ works fine on the problem device.

It doesn't seem likely to me that the problem (for my own page) is simply related to the amount of data because:

• the problem device (S22+) is new and capable.
• I have many old and challenged devices where my page (and the google demo) run as expected (for example an old S9)
• my data is ~2000 line segments, which I imagined to be well within the target capabilities of deck.gl.

I will attempt some experiments with restricted data, but do you see any other difference between the google demo page and the deck.gl demo page, apart from raw data quantity, that might be relevant?

[felixpalmer]

That would be really helpful if you could try and pin down where it goes wrong between the example on the deck demo page and your app.

Unfortunately the code for the Google demo page isn't available so it's hard to say. However I did have problems in the past with the page locking up on another (non-deck.gl) demo on the Google Vector maps page in the past, which is why the idea that this may not be down to deck came to mind

[tim-lloyd]

The following map to display one point doesn't work on some of the most recent Samsung mobile devices.

The failure is that the map displays but the point does not.

The failure devices are one user S22+ and some randomly assigned S22+ and S22 Remote Test Devices

[Edit: Added code formatting. Removed color spec (it was wrong anyway). Checked that useDevicePixels does not change error behaviour.]

<!DOCTYPE html>
<html>

<head>
    <title>deck.gl test</title>
    <style>
        #map {
            height: 100%;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script>
        window.RM = () => {

            const data = [
                {
                    "point": [
                        7.6229,
                        47.547501
                    ],
                }
            ];

            const map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 47.54730, lng: 7.62161 },
                zoom: 17,
            });

            const overlay = new deck.GoogleMapsOverlay({
                useDevicePixels: true,
            });

            overlay.setMap(map);

            const spotsLayer = new deck.ScatterplotLayer({
                id: 'rm-spots-layer',
                data: data,
                pickable: false,
                stroked: false,
                filled: true,
                radiusScale: 1,
                radiusMinPixels: 3,
                radiusMaxPixels: 20,
                radiusUnits: 'meters',
                getRadius: 10,
                getPosition: d => d.point,
            });

            overlay.setProps({
                layers: [spotsLayer],
            });
        };
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=xxxx&v=3&callback=RM"></script>
</body>
</html>

[felixpalmer]

Thanks for creating a more self-contained repro scenario. Can you post what appears in the console? Also could you try with:

const overlay = new deck.GoogleMapsOverlay({
 interleaved: false,
 useDevicePixels: true
});

[tim-lloyd]

Many thanks for your engagement.

interleaved: false

causes the map to display black, but with map controls showing. The map tiles display again after panning. But the expected overlay point does not appear.

Unfortunately I don't have access to the browser console on these devices. I can put you in touch with the owner of a problem device, if a more direct line of communication would be helpful. Or you can test yourself using the Samsung Remote Test Lab.

[tim-lloyd]

I extended the test code (above) to hook chrome console messages.

On the problem phone model, the browser console has only a "WebGL context is lost" message.

interleaved: false,
useDevicePixels: true,

(screenshot from a remote test device)

[tim-lloyd]

As I understand it from the user, on page load, the map appears without any dots for an instant, then the map disappears (goes white, same as page background). If the user scrolls the page, or scrolls the map, or taps the map zoom buttons, then the map reappears briefly without dots, then instantly disappears again. The user also reports that the phone gets hot.

This is the behavior with chrome. Other browsers behave slightly differently, but all fail.

The user report is consistent with the behavior that I see when loading the page with chrome on a remote test device.

The user would be happy to communicate with you directly. If that would be useful, please contact me privately for details.

Background:

The user reported that a map that I have written wasn't working for him. Eventually I was able to reproduce his error on a remote S22+, but not on any other model so far. As far as I can tell at a distance, my deck.gl layer first experiences an immediate loss of context and is then blocked by the browser from recovering. It is entirely possible that I have made an error, so we used the google deck.gl demo page as a further diagnostic and found that it failed too, as described above.

On Fri, 1 Apr 2022 at 16:57, Xiaoji Chen @.***> wrote:

Can you elaborate what "fails" means? Does the page crash? Does the map appear black?

— Reply to this email directly, view it on GitHub https://github.com/visgl/deck.gl/issues/6783#issuecomment-1086000857, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7XCFXYTHUKQIXL6UTZIW3VC4FEJANCNFSM5R3JCD6Q . You are receiving this because you authored the thread.Message ID: @.***>

[tim-lloyd]

Nudge. Anything we can do to give you more information?

[kindchri]

We are also having this problem. Any updates?

[tim-lloyd]

That is an unexpected response. Do you think that means the devs know of other hardware where deck.gl doesn't run? I thought this bug would be interesting because it is unusually specific, and therefore possibly informative.

Aside: I have no problems with an S21. I have a report of an S23 that doesn't have problems.

On Fri, 21 Apr 2023 at 06:56, Mark Litwintschik @.***> wrote:

Without naming names I've spoken to developers on this project on other channels. There is concern that there are a lot of mobile devices out there so supporting all of them would be an expensive endeavor. In reality, the latest iPhone and the latest flagship device from Samsung are 90% of what you need to support.

Not having Samsung support out of the box puts this offering far behind competitors. I've attached a screenshot of a 3D viewer from Esri complete with vectors and I can confirm it runs smoothly on the Samsung S22 Ultra. We need first-class support for Samsung's latest devices.

[image: Screenshot_20230421_074834_Brave] https://user-images.githubusercontent.com/359316/233544179-505c6843-078f-454a-b1eb-beecbe131943.jpg

— Reply to this email directly, view it on GitHub https://github.com/visgl/deck.gl/issues/6783#issuecomment-1517258364, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7XCFUNBH2DLNHIXOSUNR3XCIHRXANCNFSM5R3JCD6Q . You are receiving this because you authored the thread.Message ID: @.***>

[lm1]

Fixed in v8.9.24