feat(deckgl): make map tiles configurable

[plavacquery]

SUMMARY

Allow to use different tiles than mapbox with deckgl map. Tiles informations can be add in superset config.py

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

In config.py set the following

DECKGL_BASE_MAP = [
     ['tile://https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', 'OpenStreetMap' ],
]

ENABLE_CORS = True
CORS_OPTIONS: dict[Any, Any] = {
    "origins": [
        "https://c.tile.openstreetmap.org",
    ]
}

And in TALISMAN_DEV_CONF
add "https://c.tile.openstreetmap.org" to 'connect-src' array

ADDITIONAL INFORMATION

• Has associated issue :Add tile layer (XYZ) support in deck.gl maps #27475
• Required feature flags:
• 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

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Eager DOM Access and JSON Parse ▹ view	✅ Fix detected
	Hardcoded map style string literal with unclear comparison ▹ view	🧠 Not in scope
	Ineffective Fallback MapStyle ▹ view	🧠 Not in scope
	Direct Props Mutation in Layers Function ▹ view	🧠 Incorrect
	Counter-intuitive validation return values ▹ view	🧠 Not in standard

Suppressed issues based on your team's Korbit activity

​

This issue	Is similar to	Because
lines 41:43: The code assumes data-bootstrap attribute contains valid JSON, but doesn't handle JSON.parse exceptions which could crash the application.	Unhandled JSON Parse Error	Similar issues were not addressed in the past

When you react to issues (for example, an upvote or downvote) or you fix them, Korbit will tune future reviews based on these signals.

Files scanned

​

File Path	Reviewed
superset-frontend/packages/superset-ui-core/src/validator/validateMapboxStylesUrl.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.tsx	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils.ts	✅
superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx	✅
superset/views/base.py	✅
superset/config.py	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• On any given comment that Korbit raises on your pull request, you can have a discussion with Korbit by replying to the comment.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ [email protected]

[github-actions]

@mistercrunch Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[mistercrunch]

Did a quick pass reviewing the PR, and overall seems like a great feature!

Curious, are these tiles served for free, no API key required? If it's all free and open, it seems like a better default over mapbox maybe (?)

About the bootstrap_data comment I made, I think it's probably fair to simply leave the config empty and find a better/scalable solution in the future for the frontend to retrieve backend configuration flags async if/when needed. Can leave an example of how to set it to a subset as a comment in config.py

NOTE: I fired up an ephemeral environment so anyone can take the feature for a test drive. Though I'm realizing that mapbox doesn't seem to work out-of-the-box, curious whether we can make OSM work in eph-envs & dev-envs.

[mistercrunch]

Errors in CI point to having to run npm install from the superset/superset-frontend folder

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.18%. Comparing base (e2a22d4) to head (f8a7a29).
Report is 3 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #32867       +/-   ##
===========================================
+ Coverage        0   83.18%   +83.18%     
===========================================
  Files           0      553      +553     
  Lines           0    39999    +39999     
===========================================
+ Hits            0    33272    +33272     
- Misses          0     6727     +6727     

Flag	Coverage Δ
hive	48.24% <100.00%> (?)
mysql	75.38% <100.00%> (?)
postgres	75.44% <100.00%> (?)
presto	52.69% <100.00%> (?)
python	83.18% <100.00%> (?)
sqlite	74.94% <100.00%> (?)
unit	61.31% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mistercrunch]

This helps catching these errors as you commit -> https://superset.apache.org/docs/contributing/development/#git-hooks

[justinpark]

@plavacquery Thanks for the contribution. Could you add the summary of the PR (and might be adding the screenshot of the changes)?

[edogev]

I understand correctly that after this revision, it will be possible to add styles from mapbox "mapbox://styles/..." to the superset directly via config_superset.ru?

If it has already been implemented. can you tell me how I can use the required style? Or is there another way to change the map language?

[mistercrunch]

What is config_superset.ru (!?)

[github-actions]

@mistercrunch Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[mistercrunch]

Triggering CI and generating an ephemeral environment to test the feature. Wondering if we should make this the default given that deckgl+mapbox doesn't work out of the box. Would be a much better experience for people trying out Superset to have an actual map out of the box without having to get/configure a mapbox api key. Might make sense to set this new default but make it configurable for those who have an API key and don't want openstreetmap as the default. Would require a new default and a note in UPDATING.md so let admins know that the default has changed and that they might want to configure the options.

[github-actions]

@mistercrunch Ephemeral environment spinning up at http://52.32.20.64:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[mistercrunch]

mmmh, ephemeral env has an issue from when the master branch had build issues. Please rebase or merge the lastest master in your branch plz

[plavacquery]

@mistercrunch So we can open a SIP that will make default osm tiles for deckgl and allow switching to mapbox tiles when a mapbox token is set in config.py file.

And in the meantime can we merge this MR that allow user to use OSM or other internal tiles with config.py ? The CI has passed

[mistercrunch]

I don't think a SIP is required. I think a note in UPDATING.md (where we document things that need admin attention when upgrading Superset like minor breaking changes and whatnot...) is sufficient, it would essentially say something like: "Open Street Map is the new default for deckgl visualization as it works out-of-the-box (as opposed to mapbox that requires an API key), if you have a mapbox API key and want to allow only Mapbox, please follow the steps documented here [link]"

So moving forward and in-scope for this PR:

• open street map is the default and works out of the box when firing up Superset with default config. Ideally, when creating an ephemeral environment from this PR, or simply firing docker compose up, deckgl would now work out-of-the-box on top of OSM
• Mapbox also enabled, but requires setting up an API key to work
• configuration/documentation allowing for Mapbox only, mimicking the behavior prior-to-this-PR. Administrators can disable/hide OSM if they desire

I think we can get consensus on this PR and move forward with all this (no need for a SIP)

[github-actions]

@mistercrunch Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[mistercrunch]

Saw new commits so I approved CI run and fired up a fresh ephemeral environment

[github-actions]

@mistercrunch Ephemeral environment spinning up at http://34.219.197.19:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[datasc24]

Hello ! This feature looks great ! Thanks @plavacquery !
@mistercrunch what's missing for this PR to be merged ?

[mistercrunch]

The 3 points from my earlier comments - if we all agree ->

So moving forward and in-scope for this PR:

* open street map is the default and works out of the box when firing up Superset with default config. Ideally, when creating an ephemeral environment from this PR, or simply firing docker compose up, deckgl would now work out-of-the-box on top of OSM
* Mapbox also enabled, but requires setting up an API key to work
* configuration/documentation allowing for Mapbox only, mimicking the behavior prior-to-this-PR. Administrators can disable/hide OSM if they desire

point 3 requires a new comment in ./UPDATING.md, something along the lines of "OpenStreetView has been promoted as the new default for Deck.gl visualization since it can be enabled by default without requiring an API key. If you have Mapbox set up and want to disable OpenStreeView in your environment, please follow the steps documented here".

Once that's all set up, I should be able to create an ephemeral environment or fire up docker compose up on this branch and when looking at the Deck.gl example dashboard, I should see OpenStreetView tiles.