feat(deckgl-map): add tile server layer support

[fxprunayre]

SUMMARY

In the DeckGL map plugin we can only select a Mapbox style from the predefined list or typing a new Mapbox style URL.

This change add support for tile server layer making use of Deck.gl TileLayer. The well known OpenStreeMap layer provided by https://[abc].tile.openstreetmap.org/{z}/{x}/{y}.png is added to the list making easier for users not having a Mapbox account to have a background layer on map charts.

It has been tested with other tile server URL

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Choose Mapbox, Openstreetmap or use a custom mapbox or tile URL

OSM background layer

TESTING INSTRUCTIONS

Select the OpenStreetMap background layer or paste a tile server URL eg. tile://https://tile.osm.ch/name-it/{z}/{x}/{y}.png, tile://https://c.tile.openstreetmap.org/{z}/{x}/{y}.png

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

[github-actions]

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

[fxprunayre]

When running npm run type, I still see some issues

plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.tsx:108:11 - error TS2345: Argument of type 'TileLayer<any, { data: string; minZoom: 0; maxZoom: 19; tileSize: 256; renderSubLayers: (props: any) => BitmapLayer<{ data: undefined; image: any; bounds: [number, number, number, number]; }>[]; }>' is not assignable to parameter of type 'Layer<{}> | (() => Layer<{}>)'.

TileLayer extends CompositeLayer. Superset codebase is quite new to me, so any guidance appreciated.

[datasc24]

Hello ! Any update on this PR ?

[rusackas]

Relates to a SIP where we want to move from MapBox to MapLibre:
#28356

[rusackas]

Closing and reopening to kickstart CI.

[rusackas]

Maybe @Mattc1221 would be interested in reviewing this!

[datasc24]

Tank you @rusackas ! And thank you in advance @Mattc1221 !

[rusackas]

Looks like the frontend build is failing CI, but I'm re-running it in case we get lucky.

[lum4chi]

Hello, is this feature still in progress? It seems missing just the last mile. I've read about a mapbox switch to maplibre, but meanwhile this feature will be very valuable! I'm really not into frontend dev, but willing to help if someone can provide additional info on the failing pipeline step.

[lum4chi]

I managed to get this feature works with just 2 additional changes to superset/config.py:

1. Enabling CORS and adding openstreetmap as origin:

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

2. Appending openstreetmap also in TALISMAN_CONFIG (both prod and dev config)

"connect-src": [
      "'self'",
      "https://api.mapbox.com",
      "https://events.mapbox.com",
      "https://c.tile.openstreetmap.org",
  ],

Can be these the cause of the failing pipeline?

Anyway, thanks @fxprunayre for your work!

[heyromnivan]

Looks like there's a newer PR with pretty much the same functionality #32867

[fxprunayre]

Done in #34204

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.36%. Comparing base (2a5b5fe) to head (55e122c).
⚠️ Report is 3063 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #27476   +/-   ##
=======================================
  Coverage   67.36%   67.36%           
=======================================
  Files        1909     1909           
  Lines       74678    74676    -2     
  Branches     8325     8324    -1     
=======================================
- Hits        50309    50308    -1     
+ Misses      22318    22317    -1     
  Partials     2051     2051           

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