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).

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.

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

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.

I used the below to plot using METER_OFFSET. Results are quite good until the points are very far from the Origin, where they start moving away from their positions plotted using LNGLAT. Any idea to get it more accurate with the lnglat positions?

class Layer extends ScatterplotLayer {
    constructor(props) {
        super(props)
    }

    calculateInstancePositions(attribute) {
        const { data, getPosition, projectionMode, positionOrigin } = this.props
        const { viewport } = this.context
        const { value } = attribute
        let i = 0
        for (const point of data) {
            let position = getPosition(point)
            if (projectionMode === COORDINATE_SYSTEM.METER_OFFSETS) {
                const lngLatDelta = [
                    position[0] - positionOrigin[0],
                    position[1] - positionOrigin[1]
                ]
                position = viewport.lngLatDeltaToMeters(lngLatDelta)
                if (
                    (lngLatDelta[0] < 0 && position[0] > 0) ||
                    (lngLatDelta[0] > 0 && position[0] < 0)
                ) {
                    position[0] *= -1
                }
                if (
                    (lngLatDelta[1] < 0 && position[1] < 0) ||
                    (lngLatDelta[1] > 0 && position[1] > 0)
                ) {
                    position[1] *= -1
                }
            }
            value[i++] = get(position, 0)
            value[i++] = get(position, 1)
            value[i++] = get(position, 2) || 0
        }
    }
}

Description

Trying to show

       "html": '<b>value:</b> {properties.valuePerSqm}',

But it doesn't seem to support the substitution.

Flavors

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

Expected Behavior

No response

Steps to Reproduce

import pydeck

DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
LAND_COVER = [[[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]]

INITIAL_VIEW_STATE = pydeck.ViewState(
  latitude=49.254,
  longitude=-123.13,
  zoom=11,
  max_zoom=16,
  pitch=45,
  bearing=0
)

geojson = pydeck.Layer(
    'GeoJsonLayer',
    DATA_URL,
    opacity=0.8,
    stroked=False,
    filled=True,
    extruded=True,
    wireframe=True,
    get_elevation='properties.valuePerSqm / 20',
    get_fill_color='[255, 255, properties.growth * 255]',
    get_line_color=[255, 255, 255],
    pickable=True
)

r = pydeck.Deck(
    layers=[geojson],
    initial_view_state=INITIAL_VIEW_STATE,
    tooltip={
       "html": '<b>value:</b> {properties.valuePerSqm}',
       "style": {
            "backgroundColor": "steelblue",
            "color": "white"
       }
    }
)

r

Environment

• Framework version: [email protected]
• pydeck: 0.6
• Browser: Chrome
• OS: Linux

Logs

No response

For #4161

Support up to 4 mask layers. maskId is now required to enable masking. If maskId is not found, it is treated as if maskEnabled: false.

@felixpalmer Do we still need maskEnabled in this case?

Change List

• MaskEffect
• MaskExtension
• Test app
• Unit tests

Target Use Case

So someone can view multiple tooltips at once

Proposal

Like folium markers? https://python-visualization.github.io/folium/quickstart.html

Description

I followed the example to use a DeckGL custom layer in Mapox.

It works well but the Custom Layer gets repeated even if I set the renderWorldCopies to false in Mapbox.

Is there any way we can prevent this behaviour

?

Flavors

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

Expected Behavior

No response

Steps to Reproduce

var map = new mapboxgl.Map({ container: 'ParcoursMap', center: [-20.276018, 50.220830], zoom: 1.6, pitch: 25, //maxPitch: 50, bearing: 0, minZoom: 1, maxZoom: 15, renderWorldCopies: false, });

Environment

• Framework version: [email protected]
• Browser: All
• OS: All

Logs

No response

For https://github.com/visgl/deck.gl/issues/6508

Change List

• Add pbf dependency
• Schema for binary data format
• Parse pbf and display using CartoLayer

Description

Tooltip throws error in edge cases o clear way to reproduce. After look in codebase it seems that the "this.tooltip" is not there

// If view state has changed, clear tooltip if (this.tooltip.isVisible && this.viewManager.needsRedraw()) { this.tooltip.setTooltip(null); }

Code Loc

Flavors

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

Expected Behavior

Should not make an error

Steps to Reproduce

` <DeckGL viewState={viewport} layers={deckGlLayers} ContextProvider={MapContext.Provider} onViewStateChange={({ viewState }) =>{ mapControl.updateViewPort({ ...viewState, }); }} controller={{inertia: true}} onLoad={() => updateMapState(true)} onError={() => {}} getCursor={({isDragging}) => isDragging ? 'grabbing' : 'default'} onClick={(e) => mapControl.clickHandler(e)} getTooltip={(e) => { if (!e.layer) return null;

                // console.log(e.layer)
                if (!e.object) {
                    return null;
                }
        
                // Sensor markers
                if (e.object.isMarker) {
                    return e.object.name;
                }

                return null;
            }}
        >

`

Environment

• Framework version:[email protected]
• Browser:97.0.4692.71
• OS: OS 12.1

Logs

No response

For #6575

Background

FontAtlasManager uses LRU Cache to keep 3 most used font atlases in memory. This is fine for typical use cases but it becomes performance bottleneck when much more than 3 fonts (or combination of font-family, font-weight ...) is needed.

Change List

• Introduce TextLayer.fontAtlasCacheLimit static setter to recreate the LRU cache with new limit
• Add documentation to TexLayer
• Add tests

Target Use Case

FontAtlasManager uses LRU Cache to keep 3 most used font atlases in memory. This is fine for typical use cases but it becomes performance bottleneck when much more than 3 fonts (or combination of font-family, font-weight ...) is needed.

If you need for example 15 different fonts in your application, FontAtlasManager keeps recreating them because it can't keep all of them in memory.

Proposal

Introduce a function that allows setting the LRU cache limit in such use cases.

Description

I am developing an application with is using Google Maps as a base map (using Angular front-end) and Deck.gl to render layers on top of the map. first of all, I find out that deck gl is not supporting rendering layers on the 3D view so I turned the layers off as soon as the user zoom-in in satellite view which will cause to turn on the 3D mode. after google map will reach to the level which can show 3D map there will be another feature that let user rotate the map by 90 degrees either clockwise or counterclockwise. this feature will work just for 90 degrees counterclockwise and 90 degrees back to the default view. I have checked the example on google official website which is using deck.gl as an example and appears they are facing the same issue. here is the link to an example: https://developers.google.com/maps/documentation/javascript/examples/deckgl-points

The steps to reproduce the bug is: 1- click on satellite view 2- zoom-in to metro areas such as San Francisco up to the level where you get a tilt button on the left-bottom of the map 3- click on clockwise rotation or double click on counter clockwise rotation

here is my browser console after facing the problem:

zone.js:182 Uncaught TypeError: Cannot read properties of null (reading '0')
    at Module.transformMat4 (vec4.js:486:1)
    at transformVector (math-utils.js:6:18)
    at pixelsToWorld (web-mercator-utils.js:179:33)
    at WebMercatorViewport.unproject (viewport.js:87:32)
    at getBounds (get-bounds.js:14:1)
    at WebMercatorViewport.getBounds (web-mercator-viewport.js:154:30)
    at WebMercatorViewport.get subViewports [as subViewports] (web-mercator-viewport.js:101:1)
    at DrawLayersPass._drawLayers (layers-pass.js:36:1)
    at DrawLayersPass.render (layers-pass.js:9:1)
    at DeckRenderer.renderLayers (deck-renderer.js:40:1)

you can see obviously some tiles will get missed and all text become funky:

Flavors

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

Expected Behavior

No response

Steps to Reproduce

1- click on satellite view 2- zoom-in to metro areas such as San Francisco up to the level where you get a tilt button on the left-bottom of the map 3- click on clockwise rotation or double click on counter clockwise rotation

Environment

• Framework version: Angular version 12, googlemaps version 1.12.0, deck.gl version 8.6.4
• Browser: Chrome Version 97.0.4692.71, Edge Version 97.0.1072.62, Safari Version 15.2
• OS: Windows pro10/11, macOS Monterey 12.1

Logs

No response

Bumps trim-off-newlines from 1.0.1 to 1.0.3.

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.