feat(chart): support icons and text in the `deck.gl Geojson` visualization #36201

JoshuaJADaniel · 2025-11-20T08:25:48Z

SUMMARY

The deck.gl Geojson visualization allows users to visualize point, line, and polygon geometries on maps using the GeoJSON specification. Currently, users can only render points as circles, however, deck.gl's GeoJsonLayer supports rendering points as circles, icons, and/or text according to the GeoJsonLayer documentation.

This pull request extends the existing functionality, allowing users to additionally render points as labels and/or icons.

Approach

To support both basic and advanced use cases, we implemented two configuration flows for adding labels and/or icons:

"Basic" flow: This is the common case where users just want to show labels and/or icons with little customization. The user can customize the labels and/or icons using only UI controls.
"Advanced" flow: This is the niche case where users need more per-point customization and/or would like to set options not exposed in the basic flow. The user does this by typing in a JavaScript function that returns a configuration object aligned with deck.gl's documentation.

Rationale

deck.gl's GeoJsonLayer supports many options for labels and icons, but exposing all of them in the UI would lead to a cluttered experience. The approach taken here avoids cluttering the UI while flexibly supporting both basic and advanced use cases.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Text/Label Support Demo

text-feature.mp4

Icon Support Demo

icon-feature.mp4

TESTING INSTRUCTIONS

Create a GeoJSON dataset.

Click here for the sample dataset from the demo

You can use this query to create a dataset in Superset using the SQL Lab interface:

SELECT '{
  "type": "FeatureCollection",
  "name": "Top 10 Most Populous US States (2024 Estimates)",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-121.468926, 38.555605]
      },
      "properties": {
        "longName": "California",
        "shortName": "CA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-97.7431, 30.2672]
      },
      "properties": {
        "longName": "Texas",
        "shortName": "TX"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.27277, 30.4518]
      },
      "properties": {
        "longName": "Florida",
        "shortName": "FL"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.781339, 42.659829]
      },
      "properties": {
        "longName": "New York",
        "shortName": "NY"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-76.875613, 40.269789]
      },
      "properties": {
        "longName": "Pennsylvania",
        "shortName": "PA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-89.650373, 39.78325]
      },
      "properties": {
        "longName": "Illinois",
        "shortName": "IL"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-83.000647, 39.962245]
      },
      "properties": {
        "longName": "Ohio",
        "shortName": "OH"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.39, 33.76]
      },
      "properties": {
        "longName": "Georgia",
        "shortName": "GA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-78.638, 35.771]
      },
      "properties": {
        "longName": "North Carolina",
        "shortName": "NC"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.5467, 42.7335]
      },
      "properties": {
        "longName": "Michigan",
        "shortName": "MI"
      }
    }
  ]
}' as JSON

Create a deck.gl Geojson chart/visualization using the dataset created in step 1.
Under the Query section, fill the required GeoJson Column field (if using the sample dataset, select JSON).
Under the GeoJson Settings section, configure label and/or icon settings as was shown in the demo videos.

Notes

For JavaScript mode, ensure that the ENABLE_JAVASCRIPT_CONTROLS feature flag is enabled.
For icons, image URLs must conform to your configured CSP settings. For the demo, I added https://static.thenounproject.com to the connect-src directive in the CSP found in superset/config.py. If you simply want to test icons without modifying the CSP, you can try this sample image URL (it is hosted on cartocdn, which is included in the default CSP).

ADDITIONAL INFORMATION

Has associated issue: Fixes Feature request: Support icons and/or text points in deck.gl GeoJSON chart #34621
Required feature flags: ENABLE_JAVASCRIPT_CONTROLS
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

…arity

bito-code-review · 2025-11-20T08:25:58Z

Code Review Agent Run #b486f3

Actionable Suggestions - 0

Review Details

Files reviewed - 5 · Commit Range: f187f7a..c79c175
- superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.test.ts
- superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx
- superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts
- superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx
- superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/controls.ts
Files skipped - 0
Tools
- Eslint (Linter) - ✔︎ Successful
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

AI Code Review powered by

SupersetOdT · 2025-11-20T17:33:22Z

Waouw !! Great !! Congratulation !

+1 !!!

sadpandajoe · 2025-11-20T18:29:17Z

@DamianPendrak mind taking a look since it's deck.gl

Copilot

Pull Request Overview

This pull request adds support for rendering GeoJSON points as text labels and/or icons in the deck.gl GeoJSON visualization. Previously, points could only be rendered as circles. The feature provides both a "basic" UI-driven configuration flow and an "advanced" JavaScript-driven flow for users who need more customization.

Adds label rendering with configurable property name, color, size, and units
Adds icon rendering with configurable URL, size, and units
Provides JavaScript mode for advanced per-point customization of labels and icons

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/controls.ts`	Adds BLACK_COLOR constant for default label color
`superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.tsx`	Exports jsFunctionControl for use in GeoJSON control panel
`superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts`	Adds UI controls for enabling and configuring labels and icons in both basic and JavaScript modes
`superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx`	Implements label and icon rendering logic, including helper functions to compute options from form data or JavaScript output
`superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.test.ts`	Adds unit tests for the new helper functions that compute label and icon options

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts

rusackas · 2025-11-25T22:56:26Z

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/controls.ts

  return [];
 }

 export const PRIMARY_COLOR = { r: 0, g: 122, b: 135, a: 1 };


@msyavuz @mistercrunch if anyone's keeping a punch list somewhere of themable things, this PRIMARY_COLOR setting could be a good one to match with the theme's primary color.

github-actions · 2025-11-25T22:59:33Z

🎪 Showtime is building environment on GHA for c79c175

rusackas

This looks SO cool!

The only thing I'd like to request right now (to prevent XSS attacks) is to put the Javascript forms and the checkboxes to reveal them behind the ENABLE_JAVASCRIPT_CONTROLS feature flag by adding isFeatureEnabled(FeatureFlag.ENABLE_JAVASCRIPT_CONTROLS) where relevant. A lot of orgs have that flag turned off for (very good) safety reasons.

Otherwise, this is complete awesomeness!

rusackas · 2025-11-25T23:07:09Z

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts

+              description: t(
+                'The image URL of the icon to display for GeoJSON points. ' +
+                  'Note that the image URL must conform to the content ' +
+                  'security policy (CSP) in order to load correctly.',


Appreciate the CSP note! Very important :D

github-actions · 2025-11-25T23:12:18Z

🎪 Showtime deployed environment on GHA for c79c175

• Environment: http://34.213.178.163:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

… is not enabled

JoshuaJADaniel · 2025-11-26T07:06:59Z

This looks SO cool!

The only thing I'd like to request right now (to prevent XSS attacks) is to put the Javascript forms and the checkboxes to reveal them behind the ENABLE_JAVASCRIPT_CONTROLS feature flag by adding isFeatureEnabled(FeatureFlag.ENABLE_JAVASCRIPT_CONTROLS) where relevant. A lot of orgs have that flag turned off for (very good) safety reasons.

Otherwise, this is complete awesomeness!

@rusackas Thank you, and valid security concern! I made this change in 740b3c2.

Joshua Daniel added 8 commits November 20, 2025 00:13

fix(chart): resolve issue where undefined colors triggered exception

f187f7a

feat(chart): add text/label support to Geojson layer

ecd9208

feat(chart): add icon support to Geojson layer

a19f59a

refactor(chart): rename Geojson icon and text option functions for cl…

6587b6c

…arity

test(chart): add tests for Geojson text option functions

9e663a1

test(chart): add tests for Geojson icon option functions

c74c3fb

refactor(chart): reword Geojson test descriptions

3fccb15

fix(chart): check whether JS input is function before invoking it

c79c175

pull-request-size bot added the size/XL label Nov 20, 2025

github-actions bot added the plugins label Nov 20, 2025

dosubot bot added the viz:charts:deck.gl Related to deck.gl charts label Nov 20, 2025

JoshuaJADaniel changed the title ~~Feature/support icons and text in geojson chart~~ feat(chart): support icons and text in the deck.gl Geojson visualization Nov 20, 2025

sadpandajoe requested review from Copilot, kgabryje and rusackas November 20, 2025 18:28

Copilot started reviewing on behalf of sadpandajoe November 20, 2025 18:29 View session

Copilot finished reviewing on behalf of sadpandajoe November 20, 2025 18:33

Copilot AI reviewed Nov 20, 2025

View reviewed changes

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts Show resolved Hide resolved

rusackas reviewed Nov 25, 2025

View reviewed changes

rusackas added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Nov 25, 2025

rusackas requested changes Nov 25, 2025

View reviewed changes

rusackas reviewed Nov 25, 2025

View reviewed changes

github-actions bot added the 🎪 🔒 showtime-blocked label Nov 26, 2025

JoshuaJADaniel force-pushed the feature/support-icons-and-text-in-geojson-chart branch from d8c00e8 to c79c175 Compare November 26, 2025 06:46

fix(chart): hide label/icon JavaScript controls when the feature flag…

740b3c2

… is not enabled

JoshuaJADaniel requested a review from rusackas November 26, 2025 07:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(chart): support icons and text in the `deck.gl Geojson` visualization #36201

feat(chart): support icons and text in the `deck.gl Geojson` visualization #36201

JoshuaJADaniel commented Nov 20, 2025 •

edited by sadpandajoe

Loading

Uh oh!

bito-code-review bot commented Nov 20, 2025 •

edited

Loading

Code Review Agent Run #b486f3

Uh oh!

SupersetOdT commented Nov 20, 2025

Uh oh!

sadpandajoe commented Nov 20, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

rusackas Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

rusackas left a comment

Uh oh!

rusackas Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

JoshuaJADaniel commented Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(chart): support icons and text in the deck.gl Geojson visualization #36201

Are you sure you want to change the base?

feat(chart): support icons and text in the deck.gl Geojson visualization #36201

Conversation

JoshuaJADaniel commented Nov 20, 2025 • edited by sadpandajoe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

Approach

Rationale

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Text/Label Support Demo

Icon Support Demo

TESTING INSTRUCTIONS

Notes

ADDITIONAL INFORMATION

Uh oh!

bito-code-review bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #b486f3

Uh oh!

SupersetOdT commented Nov 20, 2025

Uh oh!

sadpandajoe commented Nov 20, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

rusackas Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

rusackas left a comment

Choose a reason for hiding this comment

Uh oh!

rusackas Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

JoshuaJADaniel commented Nov 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(chart): support icons and text in the `deck.gl Geojson` visualization #36201

feat(chart): support icons and text in the `deck.gl Geojson` visualization #36201

JoshuaJADaniel commented Nov 20, 2025 •

edited by sadpandajoe

Loading

bito-code-review bot commented Nov 20, 2025 •

edited

Loading