-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
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