Hello, this is just a continuation #4529. After successfully integrating harp.gl's map with deck.gl, I was experimenting with things and found my Icon Layer laid on top of the buildings of the map.

Normally in mapbox this could be solved by using the mapboxLayer and adding the icon layer beneath the building layer but harp.gl doesn't provide that sort of functionality.

In essence deckgl is just drawing to an overlay canvas which is laid on top of the base canvas (harpgl's map in this case) if I understood correct. Is there any way to inform the overlay canvas of the depth buffer of the base canvas so everything renders correctly?

An example screen. the red circles show where the icon should be behind the buildings.

Thanks.

For #1122 , provide an example to be updated of the integration of deck.gl with Google Maps.

@Pessimistress and @ibgreen , feel free to use your (mapping) expertise to correct this semi working example.

Works fine on latest 2.x, updating to 3.x causes scatterplots to quit rendering.

Additional info:

• Tested on 3.0.0-beta17
• Present on both core and fp64 layers
• Choropleth layer in the dame overlay works fine
• Using OSX Sierra on a MBP

Tested the latest dev branch demo and the core scatter layer works, but the fp64 does not.

Not sure if you're worried about it since it is a dev branch, but these layers don't work on the 3.x dev branch demo:

• Solid Choropleth
• Hexagon Select
• Extruded Choropleth

Description

Repro Steps

const heatMap_layer = new HeatmapLayer({ data: this.geoJson.features, id: 'heatmp-layer', opacity: 0.6, getPosition: d => d.geometry.coordinates, getWeight: d => d.properties['Max Capacity'], colorFormat: 'RGBA', colorRange: [[1, 152, 189, 255], [73, 227, 206, 255], [216, 254, 181, 255], [254, 237, 177, 255],[254, 173, 84, 255],[209, 55, 78, 255]], intensity: 1, radiusPixels: 80, threshold: 0.9 });

-->

Environment (please complete the following information):

• Framework Version: [e.g. deck.gl 7.2.3]
• Browser Version: [e.g. Chrome 71.0]
• OS: [e.g. Mac OS X 10.4]

Target Use case

Hello! I am developing something that looks like it will have off-screen (i.e not visible) custom BaseTileLayers that I would like to have loaded for quick use and I would love to be able to allocate cache size equally and/or have each layer take up a predetermined percentage of the memory.

Proposed feature

I'd like if we could implement the maxCacheSize of the TileCache as a function of memory (allowing the user to control a percentage config, perhaps). I see that there is a TODO for it already here so I just wanted to make my use-case known. I am aware that my last PR seems to have opened something of a can of worms as per #4139 (very excited for these improvements, by the way!!!) so I understand if this is not coming for a while (until the API and location of the TileCache are finalized).

Description

My usage of path layer leads to error: "Unknown shader module project32" Same goes for this example: https://deck.gl/showcases/gallery/highway

Repro Steps

Use example above.

Environment (please complete the following information):

• Framework Version:
• Browser Version: Version 76.0.3809.6 (Official Build) canary (64-bit)
• OS: Mac OS X 10.14.5

Logs

dist.min.js:1 deck: error while initializing PathLayer({id: 'path-layer'}) Error: Unknown shader module project32 at i (dist.min.js:1) at e.value (dist.min.js:1) at dist.min.js:1 at Array.map () at e.value (dist.min.js:1) at h (dist.min.js:1) at T (dist.min.js:1) at t.value (dist.min.js:1) at t.value (dist.min.js:1) at t.value (dist.min.js:1) value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 setProps @ dist.min.js:12 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 (anonymous) @ dist.min.js:1 Promise.then (async) value @ dist.min.js:1 e @ dist.min.js:1 o @ dist.min.js:12 (anonymous) @ 2416456071?v=5:147 dist.min.js:1 Uncaught (in promise) Error: Unknown shader module project32 at i (dist.min.js:1) at e.value (dist.min.js:1) at dist.min.js:1 at Array.map () at e.value (dist.min.js:1) at h (dist.min.js:1) at T (dist.min.js:1) at t.value (dist.min.js:1) at t.value (dist.min.js:1) at t.value (dist.min.js:1) i @ dist.min.js:1 value @ dist.min.js:1 (anonymous) @ dist.min.js:1 value @ dist.min.js:1 h @ dist.min.js:1 T @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 e @ dist.min.js:1 t @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 setProps @ dist.min.js:12 value @ dist.min.js:1 value @ dist.min.js:1 value @ dist.min.js:1 (anonymous) @ dist.min.js:1 Promise.then (async) value @ dist.min.js:1 e @ dist.min.js:1 o @ dist.min.js:12 (anonymous) @ 2416456071?v=5:147

I've got a Scatterplot that hides items in response to a time scrubber, which I've implemented by returning 0 from getRadius for items outside the active time range. getRadius is specified in updateTriggers as well, but I'm wondering if this is the most performant way to do this.

Would setting the alpha to 0 or filtering the items out of the data ahead of time be a better approach? I'm also curious if smoothly scrubbing through 1M+ points is a realistic goal or not. I've rendered up to about 7M points but things get pretty bogged down.

Background

Right now, only one feature is highlighted when autoHighlight property is enabled and the feature is split into several tiles. We would need to highlight the whole feature instead of only the hovered part.

I misunderstood the object index and returned the index within the provided data array instead of the picking index. Is there a way to get the picking index from a given property?

Change List

• Add highlightedObjectIndex to rendered sublayers in TileLayer.
• Implement getHighlightedObjectIndex in MVTTileLayer.
• Save hoveredFeatureId into MVTTileLayer state.

I use IconLayer with png sprite. Icons render with a small glitch, something like a gray border or shadow but originally they have only a white border.

Target Use Case

Currently deck.gl has a ClipExtension which allows rendering of layers clipped to rectangular region. This feature proposes adds a new extension, MaskExtension, which performs masking based on an arbitrary polygon region.

The MaskExtension would enable richer visualizations as clipping only by a rectangle is of limited use.

Proposal

The MaskExtension can be added to a deck.gl layer in the standard fashion:

const maskExtension = new MaskExtension();
new SolidPolygonLayer({
  data,
  getFillColor: [255, 0, 0],
  extensions: [maskExtension],
  maskPolygon: [[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]
});

The MaskExtension adds the following props:

• maskPolygon: polygon outline (format the same as that used by the SolidPolygonLayer data prop)
• maskEnabled: set to false to disable masking
• maskByInstance: whether to clip by pixel or by the geometry instance (analogous to ClipExtension.clipByInstance)

Below is a short video showing the MaskExtension in action.

The demo is composed of a number of different layers using the MaskExtension in different fashions:

• A GeoJsonLayer with US states. When a state is selected, its geometry is used for the maskPolygon
• A SolidPolygonLayer covering the entire USA with a solid green fill. This is masked using the maskPolygon. Thus when Texas is selected, it appears to have a green background
• A ArcLayer showing the links between sources and target (flights between cities). As the maskByInstance prop is true, all arcs originating inside the mask are showing in their entirety
• A ScatterplotLayer showing a buffer around each target. As the maskByInstance prop is set to false, these regions (in white) are clipped to the mask by pixel, and thus appear to be within the selected state.
• 2 ScatterplotLayers showing the sources and targets for the sources and targets. As the maskByInstance prop is true, the red and green circles are not clipped by pixel

Description

I am using the Deck.gl GoogleMapsOverlay with a Google map in an Angular application. It works just fine with the JIT compilation used most commonly by angular during development, but when the application is run with AOT compilation w/ Webpack as one would in a production environment, the resulting bundles don't load deck.gl correctly and all I see is the default google map. I believe it may be a treeshaking bug similar to #3213.

My current work-around is to load it via the CDN link (https://unpkg.com/[email protected]/dist.min.js) but that increases the bundle size considerably and breaks all IDE code suggestion support and whatnot.

Repro Steps

I created a simple angular project which demonstrates the issue. Refer to the README to get running quickly. https://github.com/SterlingMcCall/angular-deck-gl-error-demo

Environment:

• Framework Version: deck.gl 7.2.3 and earlier, 7.3.0-alpha.6
• Browser Version: Chrome, Firefox
• Webpack: tested with versions 4.19.1, 4.23.1, and 4.39.3

Logs

Unhandled Promise rejection: TIMER_QUERY ; Zone: <root> ; Task: Promise.then ; Value: Error: TIMER_QUERY
    at r (assert.js.pre-build-optimizer.js:3)
    at c (features.js.pre-build-optimizer.js:30)
    at features.js.pre-build-optimizer.js:10
    at Array.every (<anonymous>)
    at s (features.js.pre-build-optimizer.js:9)
    at Function.value (query.js.pre-build-optimizer.js:27)
    at animation-loop.js.pre-build-optimizer.js:147
    at e.invoke (zone.js.pre-build-optimizer.js:391)
    at t.run (zone.js.pre-build-optimizer.js:150)
    at zone.js.pre-build-optimizer.js:910 Error: TIMER_QUERY
    at r (http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:211879)
    at c (http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:494543)
    at http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:494339
    at Array.every (<anonymous>)
    at s (http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:494314)
    at Function.value (http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:384784)
    at http://localhost:4201/vendor.6ff8643349f59a82f6c2.js:1:613204
    at e.invoke (http://localhost:4201/polyfills.42fc305c63116b2cde64.js:1:7375)
    at t.run (http://localhost:4201/polyfills.42fc305c63116b2cde64.js:1:2578)
    at http://localhost:4201/polyfills.42fc305c63116b2cde64.js:1:14554

Description

https://github.com/visgl/deck.gl/blob/master/modules/core/src/utils/texture.ts#L14

I think this:

const internalTextures: Record<string, Texture2D> = {};

should actually be this:

const internalTextures: Record<string, boolean> = {};

https://github.com/visgl/deck.gl/blob/master/modules/core/src/utils/texture.ts#L14

Flavors

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

Expected Behavior

n/a

Steps to Reproduce

n/a

Environment

• Framework version:
• Browser:
• OS:

Logs

No response

Follow up of #7496

Change List

• Remove ad-hoc prop handling in FillStyleExtension, use core async resolution system
• image prop type accepts a new option to override default texture parameters
• Tests
• Docs

Description

Tile3DLayer example is broken. This link https://deck.gl/examples/tile-3d-layer/ is not rendering the 3d tile.

Flavors

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

Expected Behavior

No response

Steps to Reproduce

Go to this link https://deck.gl/examples/tile-3d-layer/, it is not rendering the 3d tile. I also can't render 3d tile from cesium ION in my code.

Environment

• Framework version:8.8.21
• Browser: Chrome

Logs

No response

Description

Hey all, if I have a ArcLine with a tooltip on the other side of the globe, the picking engine incorrectly assumes I am hovering over the line, despite it behind occluded by the globe itself.

This definitely does not seem like intended behavior, but I am not really sure how to go about fixing it.

Flavors

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

Expected Behavior

Tooltip only shows if you hover over the ArcLayer

Steps to Reproduce

Draw an ArcLayer from Australia to California. Add a tooltip and follow line beyond what is visible. Tooltip continues to show even when occluded by the globe.

Environment

• Framework version: [email protected]
• Browser: Chrome
• OS: M1 Mac (macOS Ventura)

Logs

No response

Description

https://user-images.githubusercontent.com/20474783/209679807-02fa8bc2-4311-478e-b762-9cb3505c3926.mp4

I'm using ScatterplotLayer and the circles that are drawn first (bottom ones) are hovered instead of the ones at the top when there's an overlap. Same with onClick.

Although it works fine when the map is pitched and billboard is set to true. Also works when interleaved:false

const overlay = useControl<IControl>(() => {
    return new MapboxOverlay({
      layers: [
         new ScatterplotLayer({
              data: [...],
              visible: true,
              pickable: true,
              stroked: true,
              autoHighlight: true,
              billboard: true,
              highlightColor: [...],
              radiusUnits: "meters",
              getRadius: 70,
              getLineColor: ...,
              getLineWidth: ...,
              beforeId: "country-label-lg"
         })
     ],
      interleaved: true,
    }) as IControl;
});

Is this a known issue or am I doing something wrong here ?

Flavors

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

Expected Behavior

• Circles that are on top should be picked (hovered/clicked)

Steps to Reproduce

/

Environment

• Framework version: 8.8.20
• Browser: Chromium 108.0.5359.125; Safari 16.1
• OS: macOS Ventura 13.0.1

Bumps wheel from 0.37.1 to 0.38.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.