I'm encountering a weird bug with my deck.gl map. The polygons all load, but some of them get colored in appropriately, while others don't. When I zoom into these uncolored areas, some more color appears, but when I zoom back out it goes away again.
Here's a chunk of my code:
\\config stuff
deckgl = new deck.DeckGL({
container: "map",
map: maplibregl,
mapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
initialViewState: {
latitude: 38.302222210685656,
longitude: -98.51898888084287,
zoom: 4
},
controller: {dragPan: true, scrollZoom:true},
layers: [
new deck.carto.CartoLayer({
id: 'polygons',
connection: "carto_dw",
type: deck.carto.MAP_TYPES.TABLE,
data: "carto-dw-ac-whspeled.shared.polys",
getFillColor: deck.carto.colorBins({
attr: "time",
domain: [3, 6, 9, 12, 15, 18, 21, 24, 27, 30],
colors: [[255, 247, 236, 150],
[254, 232, 200, 150],
[253, 212, 158, 150],
[253, 187, 132, 150],
[252, 141, 89, 150],
[239, 101, 72, 150],
[215, 48, 31, 150],
[179, 0, 0, 150],
[127, 0, 0, 150],
[102, 31, 31, 150],
[77, 0, 0, 150]]
}),
getLineColor: false,
lineWidthMaxPixels: 0,
useDevicePixels:false
}),
\\other layers + tooltips
Example: One city gets loaded but not the other
I've tried doing some optimization recommended by the documentation (turning off pickable and useDevicePixels). Not sure what else to try.
Is this a Web GL rendering issue? Is there anything I can change to make things better?
Thanks!