Skip to content

[Bug] Globe with TileLayer (OSM) not visible only in windows. #9853

@spiderdab

Description

@spiderdab

Description

Hi, one of my app has the possibility to switch between GlobeView and PlaneView and suddenly, after more than 2 years of good working, around one month ago, the GlobeView stopped to show the TileLayer in windows 10 and 11, in FF, Chrome and Edge.
Linux and Mac are ok.

I prepared a minimal app, with only the Deck, a GlobeView and a TileLayer and the problem is the same.
Tha strange thing is that if I navigate the url: https://deck.gl/docs/api-reference/core/globe-view there I can see the globe with tiles also under windows.

I cannot find info online on this bug, it appears as I'm the only one seeing it, but the example is so minimal and took from the docs, that I think it should happen to everyone.

Flavors

  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CARTO
  • ArcGIS

Expected Behavior

A (OSM) world map should be seen as a globe texture

Steps to Reproduce

Deck.gl version: tried with 8.8, but also with 9.2.2

Minimal code to reproduce (Angular):
app.html:

<div>TEST DECK.GL</div>
<canvas id="test-map"></canvas>

app.ts:

import { Component, OnInit } from '@angular/core';
import { Deck, _GlobeView as GlobeView } from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';
import { BitmapLayer} from '@deck.gl/layers';

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {

  ngOnInit(): void {

    const layer = new TileLayer({
      id: 'TileLayer',
      data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
      maxZoom: 19,
      minZoom: 0,

      renderSubLayers: props => {
        const {boundingBox} = props.tile;

        return new BitmapLayer(props, {
          data: undefined,
          image: props.data,
          bounds: [boundingBox[0][0], boundingBox[0][1], boundingBox[1][0], boundingBox[1][1]]
        });
      },
      pickable: true
    });

    let deck = new Deck({
      parameters: {
        cullMode: 'back'
      },
      views: new GlobeView({
        resolution: 10
      }),
      initialViewState: {
        longitude: 2.27,
        latitude: 48.86,
        zoom: 3,
        minZoom: 0,
        maxZoom: 20
      },
      controller: true,
      canvas: 'test-map',

      layers: [
        layer
      ]
    });
  }
}

Environment

  • Framework version: @deck.gl/core @deck.gl/layers @deck.gl/geo-layers all at v9.2.2 and at v8.8
  • Browser: Chrome, Firefox and Edge
  • OS: Windows 10 or 11

Logs

The same code in linux have no problem and no errors in console.
in windows (Firefox) the errors are the following:

deck: can't access property "luma", gl is null undefined deck.js:65:61
ERROR TypeError: can't access property "maxTextureDimension2D", this.device.limits is undefined
    getMaxDrawingBufferSize canvas-context.js:169
    _handleResize canvas-context.js:267
    _resizeObserver canvas-context.js:116
    _CanvasContext canvas-context.js:116
    WebGLCanvasContext webgl-canvas-context.js:18
    WebGLDevice webgl-device.js:89
    create webgl-adapter.js:84
    createDevice luma.js:61
    _createDevice deck.js:567
    Deck deck.js:223
    ngOnInit app.ts:34
    Angular 26
    <anonymous> main.ts:5
root_effect_scheduler.mjs:3624:23
ERROR TypeError: can't access property "luma", gl is null
    createBrowserContext create-browser-context.js:34
    WebGLDevice webgl-device.js:104
    create webgl-adapter.js:84
    createDevice luma.js:61
    _createDevice deck.js:567
    Deck deck.js:223
    ngOnInit app.ts:34
    Angular 26
    <anonymous> main.ts:5
root_effect_scheduler.mjs:3624:23
Uncaught (in promise) TypeError: can't access property "luma", gl is null
    createBrowserContext create-browser-context.js:34
    WebGLDevice webgl-device.js:104
    create webgl-adapter.js:84
    createDevice luma.js:61
    _createDevice deck.js:567
    Deck deck.js:223
    ngOnInit app.ts:34
    Angular 26
    <anonymous> main.ts:5

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions