Merge branch 'master' into chr/mapbox-widget-support

Author: chrisgervang

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
       should_build: ${{ steps.permitted.outputs.result }}
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Fetch remote branches
         run: |
@@ -42,10 +42,10 @@ jobs:
       NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'

.github/workflows/scorecard.yml

@@ -33,12 +33,12 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@62b2cac7ed8198b15735ed49ab1e5cf35480ba46 # v2.4.0
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
         with:
           results_file: results.sarif
           results_format: sarif
@@ -60,14 +60,14 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@9e8d0789d4a0fa9ceb6b1738f7e269594bdd67f0 # v3.28.9
+        uses: github/codeql-action/upload-sarif@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
         with:
           sarif_file: results.sarif

.github/workflows/test.yml

@@ -18,10 +18,10 @@ jobs:
       contents: read
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -52,10 +52,10 @@ jobs:
       contents: read
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -80,10 +80,10 @@ jobs:
         python-version: [3.8]
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -92,7 +92,7 @@ jobs:
         run: corepack enable yarn
 
       - name: Use Python ${{ matrix.python-version }}
-        uses: actions/setup-python@65d7f2d534ac1bc67fcd62888c5f4f3d2cb2b236 # v4.7.1
+        uses: actions/setup-python@42375524e23c412d93fb67b49958b491fce71c38 # v5.4.0
         with:
           python-version: ${{ matrix.python-version }}
 

.github/workflows/website.yml

@@ -28,12 +28,12 @@ jobs:
     if: ${{ github.repository_owner == 'visgl' && needs.check_branch.outputs.should_deploy }}
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           token: ${{ secrets.WEBSITE_DEPLOY_TOKEN }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -54,7 +54,7 @@ jobs:
         run: (cd website && yarn build)
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@15de0f09300eea763baee31dff6c6184995c5f6a # 4.7.2
+        uses: JamesIves/github-pages-deploy-action@d92aa235d04922e8f08b40ce78cc5442fcfbfa2f # 4.8.0
         with:
           token: ${{ secrets.WEBSITE_DEPLOY_TOKEN }}
           branch: gh-pages

.nvmrc

@@ -1 +1 @@
-18.19.0
+18.20.8

CONTRIBUTING.md

@@ -10,7 +10,7 @@ PRs and bug reports are welcome, and we are actively looking for new maintainers
 The **master** branch is the active development branch.
 
 Building deck.gl locally from the source requires node.js `>=18`. Further limitations on the Node version may be imposed by [puppeteer](https://github.com/puppeteer/puppeteer#usage) and [headless-gl](https://github.com/stackgl/headless-gl#supported-platforms-and-nodejs-versions).
-We use [yarn](https://yarnpkg.com/en/docs/install) to manage the dependencies of deck.gl. The project's automated builds use Node [corepack](https://github.com/nodejs/corepack) to manage the yarn version. For local development, you can use [volta](https://docs.volta.sh/guide/getting-started), [nvm](https://github.com/nvm-sh/nvm), or any other Node version manager of your choice - configuration files are provided for all major tools (.nvmrc and volta settings in package.json).
+We use [yarn](https://yarnpkg.com/en/docs/install) to manage the dependencies of deck.gl. The project's automated builds use Node [corepack](https://github.com/nodejs/corepack) to manage the yarn version. For local development, you can use [nvm](https://github.com/nvm-sh/nvm) or any other Node version manager of your choice - a `.nvmrc` configuration file is provided.
 
 ```bash
 git checkout master

bindings/pydeck-carto/requirements/requirements-dev.txt

@@ -1,4 +1,4 @@
-black==22.3.0
+black==24.3.0
 carto-auth>=0.2.0
 flake8==4.0.1
 ipython>=7.8.0

docs/api-reference/core/layer.md

@@ -142,12 +142,16 @@ If this callback is supplied and returns `true`, the error is marked as handled
 
 Layers can be interacted with using these properties.
 
-#### `pickable` (boolean, optional) {#pickable}
+#### `pickable` (boolean | '3d', optional) {#pickable}
 
 * Default: `false`
 
 Whether the layer responds to mouse pointer picking events.
 
+When set to `true`, the layer can be picked and the picking info will contain 2D coordinates (assuming z=0).
+
+When set to `'3d'`, the layer can be picked with depth picking enabled. The `coordinate` field in the [picking info object](../../developer-guide/interactivity.md#the-pickinginfo-object) will be a 3D point, unprojected onto the actual picked geometry. This is useful for getting accurate 3D coordinates in layers with elevation or 3D models, but comes with a performance overhead.
+
 #### `onHover` (Function, optional) {#onhover}
 
 This callback will be called when the mouse enters/leaves an object of this deck.gl layer with the following parameters:

docs/developer-guide/interactivity.md

@@ -602,7 +602,7 @@ The picking engine returns "picking info" objects which contains a variety of fi
 | `object` | any | The object that was picked. This is typically an element from the layer's `props.data` array, but can vary from layer to layer. This field is usually only present when picking from layers where `props.data` [is an array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#description), unless indicated otherwise in the layer's documentation.|
 | `x`      | number | Mouse position x relative to the viewport. |
 | `y`      | number | Mouse position y relative to the viewport. |
-| `coordinate` | number[] | Corresponding point of the mouse position in the coordinate system of the layer. When using the built-in callbacks, this coordinate is 2D, assuming z=0 (i.e. on sea level in a geospatial dataset). You may optionally acquire a 3D position with a performance overhead by [calling the picking engine directly](#calling-the-picking-engine-directly). |
+| `coordinate` | number[] | Corresponding point of the mouse position in the coordinate system of the layer. When using the built-in callbacks, this coordinate is 2D, assuming z=0 (i.e. on sea level in a geospatial dataset). You may optionally acquire a 3D position by setting the layer's [`pickable`](../api-reference/core/layer.md#pickable) prop to `'3d'`, or by [calling the picking engine directly](#calling-the-picking-engine-directly) with `unproject3D: true`. Note that 3D picking comes with a performance overhead. |
 | `viewport` | Viewport | The viewport that the picked object belongs to. |
 
 

examples/basemap-browser/index.html

@@ -8,58 +8,126 @@
         box-sizing: border-box;
       }
       body {
-        font-family: Helvetica, Arial, sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
         margin: 0;
         overflow: hidden;
         display: flex;
         height: 100vh;
         width: 100vw;
+        font-size: 13px;
+        color: #374151;
       }
       #controls {
-        width: 320px;
+        width: 260px;
         flex-shrink: 0;
-        background: #fff;
-        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
+        background: #f9fafb;
+        border-right: 1px solid #e5e7eb;
         overflow-y: auto;
       }
       #control-panel {
-        padding: 12px 24px;
-        font-size: 13px;
-        line-height: 2;
-        color: #6b6b76;
+        padding: 12px 16px;
+        line-height: 1.4;
+      }
+      #control-panel > h3:first-of-type {
+        margin: 0 0 8px 0;
+        font-size: 15px;
+        font-weight: 600;
+        color: #111827;
+        letter-spacing: -0.01em;
+      }
+      #control-panel h3 {
+        margin: 12px 0 6px 0;
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
         text-transform: uppercase;
-        outline: none;
+        letter-spacing: 0.05em;
+      }
+      #control-panel h4 {
+        margin: 0 0 4px 0;
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
       }
       #control-panel label {
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 13px;
       }
       #control-panel input[type="checkbox"] {
-        margin-left: 10px;
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        cursor: pointer;
+        accent-color: #3b82f6;
       }
       #control-panel select {
-        margin-left: 10px;
         width: 100%;
-        max-width: 250px;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        background: #fff;
+        font-size: 13px;
+        color: #374151;
+        cursor: pointer;
+      }
+      #control-panel select:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
       }
       .section {
-        border-top: 1px solid #ddd;
-        padding-top: 10px;
-        margin-top: 10px;
+        padding: 8px 0;
+        border-bottom: 1px solid #e5e7eb;
       }
-      .example-name {
-        font-weight: bold;
-        color: #333;
-        margin-bottom: 5px;
+      .section:last-child {
+        border-bottom: none;
       }
-      h3 {
-        margin: 10px 0 5px;
-        color: #333;
+      .label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #6b7280;
+        margin-bottom: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+      }
+      .fps-meter {
+        text-align: center;
+        padding: 12px 0 !important;
+        background: #fff;
+        margin: 0 -16px;
+        padding-left: 16px !important;
+        padding-right: 16px !important;
+        border-bottom: 1px solid #e5e7eb;
       }
       #map {
         flex: 1;
         position: relative;
         overflow: hidden;
       }
+      /* Debug info styling */
+      #control-panel .section div {
+        font-size: 12px;
+        line-height: 1.6;
+      }
+      #control-panel .section div b {
+        font-weight: 500;
+        color: #6b7280;
+      }
+      /* Testing instructions */
+      #control-panel .section p {
+        margin: 0 0 6px 0;
+        font-size: 11px;
+        line-height: 1.5;
+        color: #6b7280;
+      }
+      #control-panel .section p b {
+        color: #374151;
+      }
     </style>
   </head>
   <body>