GoogleMapsOverlay iconAtlas error: texImage2D: no bound PIXEL_UNPACK_BUFFER

[massimiliamanto74]

Discussed in #6510

^{Originally posted by mantox74 December 15, 2021}
Hallo everyone,
I'am new on deck.gl.
I'm trying to create a google map in Angular with about 380k of markers.
I use GoogleMapsOverlay and IconLayer (also the GeoJsonLayer has the same error) to add an iconAtlas to show 2 different markers.
This is an extract of my code:

import { GoogleMapsOverlay as DeckOverlay } from '@deck.gl/google-maps';
........
this.pointOverlay = new DeckOverlay();
this.renderLayer();
......
renderLayer() {
    this.pointOverlay.finalize();
    this.pointOverlay.setProps({
      layers: [
        new IconLayer({
          id: 'geojson_data',
          data: this.jsonData,
          getPosition: (d) => d.geometry.coordinates,
          getIcon: (d) => 'marker',
          iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
          iconMapping: {
            marker: {
              x: 128,
              y: 0,
              width: 128,
              height: 128,
            },
          },
          getSize: (d) => 5,
          sizeScale: 8,
          onClick: (info) =>
            info.object &&
            console.log('..'),
        }),
      ],
    });

    // show default layer
    this.pointOverlay.setMap(this.map);
  }

When I run my project and show the google map I have these console warning and black squares on map (no markers image):

1. WebGL: INVALID_OPERATION: texImage2D: no bound PIXEL_UNPACK_BUFFER
2. [.WebGL-0x7fd54f950600]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips

And then I have also this warning every time I move mouse on square.
[.WebGL-0x7fd54f950600]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

Here is the code problem:

This is my map with the black squares instead imageAtlas

I have searched on web what should be the problem but I can't find nothing. Also in documentation there is not any (or I can't find it).

Can any one suggest a solution?

[Pessimistress]

If you wish to report a bug, provide a CodeSandbox/repository that others can use to investigate the issue. If you are just looking for ideas, please use Discussions.

[mantox74]

Hi @Pessimistress,
you can find sandbox project here.
Thanks for help!

[Pessimistress]

As I suggested in the Discussion thread, your global Promise object is overwritten by a polyfill, so <Promise> instanceof Promise returns false:

I am not an Angular user so I do not know how you can configure your app to not do that. I know there are plenty of Angular apps using deck.gl so it's definitely possible.

[massimiliamanto74]

Hi @Pessimistress and thank you very much for your response and your debugging.
I am not very convinced that the problem is what you were suggesting because if I use the single icon instead iconAtlas I have the same result un the console but the icon is loaded as you can see in images below.

If the problem is the override of Promise object it should be unload also the single icon, i'm wrong?

I try to investigate more but I don't know very well dock.gl, GooglemapsOverlay and Webgl in deep....

[Pessimistress]

Auto packing through getIcon does not use the same mechanism as asynchronous props.

You will also find your app broken if you provide an URL to data.

[massimiliamanto74]

Your are right, with URL my app broken.
Thanks for your help, I will try to find some suggestions about fix this issue in the web.