feat(deckgl): make map tiles configurable

Author: plavacquery

superset-frontend/package-lock.json

@@ -21,16 +21,20 @@ import { t } from '../translation';
 
 /**
  * Validate a [Mapbox styles URL](https://docs.mapbox.com/help/glossary/style-url/)
+ * or a title server URL.
  * @param v
  */
 export default function validateMapboxStylesUrl(v: unknown) {
   if (
     typeof v === 'string' &&
     v.trim().length > 0 &&
-    v.trim().startsWith('mapbox://styles/')
+    (v.trim().startsWith('mapbox://styles/') ||
+      v.trim().startsWith('tile://http'))
   ) {
     return false;
   }
 
-  return t('is expected to be a Mapbox URL');
+  return t(
+    'is expected to be a Mapbox URL (eg. mapbox://styles/...) or a tile server URL (eg. tile://http...)',
+  );
 }

superset-frontend/packages/superset-ui-core/src/validator/validateMapboxStylesUrl.ts

@@ -29,6 +29,11 @@ describe('validateMapboxStylesUrl', () => {
         'mapbox://styles/foobar/clp2dr5r4008a01pcg4ad45m8',
       ),
     ).toEqual(false);
+    expect(
+      validateMapboxStylesUrl(
+        'tile://https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      ),
+    ).toEqual(false);
   });
 
   [
@@ -40,7 +45,7 @@ describe('validateMapboxStylesUrl', () => {
   ].forEach(value => {
     it(`should not validate ${value}`, () => {
       expect(validateMapboxStylesUrl(value)).toEqual(
-        'is expected to be a Mapbox URL',
+        'is expected to be a Mapbox URL (eg. mapbox://styles/...) or a tile server URL (eg. tile://http...)',
       );
     });
   });

superset-frontend/packages/superset-ui-core/test/validator/validateMapboxStylesUrl.test.ts

@@ -24,10 +24,11 @@
     "lib"
   ],
   "dependencies": {
-    "@deck.gl/aggregation-layers": "^9.0.38",
-    "@deck.gl/core": "^9.0.37",
-    "@deck.gl/layers": "^9.0.38",
-    "@deck.gl/react": "^9.1.4",
+    "@deck.gl/aggregation-layers": "^9.1.9",
+    "@deck.gl/core": "^9.1.9",
+    "@deck.gl/geo-layers": "^9.1.9",
+    "@deck.gl/layers": "^9.1.9",
+    "@deck.gl/react": "^9.1.9",
     "@mapbox/geojson-extent": "^1.0.1",
     "@math.gl/web-mercator": "^4.1.0",
     "@types/d3-array": "^2.0.0",

superset-frontend/plugins/legacy-preset-chart-deckgl/package.json

@@ -37,6 +37,11 @@ import { JsonObject, JsonValue, styled, usePrevious } from '@superset-ui/core';
 import Tooltip, { TooltipProps } from './components/Tooltip';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { Viewport } from './utils/fitViewport';
+import {
+  MAPBOX_LAYER_PREFIX,
+  TILE_LAYER_PREFIX,
+  buildTileLayer,
+} from './utils';
 
 const TICK = 250; // milliseconds
 
@@ -92,6 +97,19 @@ export const DeckGLContainer = memo(
     );
 
     const layers = useCallback(() => {
+      if (
+        props.mapStyle?.startsWith(TILE_LAYER_PREFIX) &&
+        props.layers.some(
+          l => typeof l !== 'function' && l?.id === 'tile-layer',
+        ) === false
+      ) {
+        props.layers.unshift(
+          buildTileLayer(
+            props.mapStyle.replace(TILE_LAYER_PREFIX, ''),
+            'tile-layer',
+          ),
+        );
+      }
       // Support for layer factory
       if (props.layers.some(l => typeof l === 'function')) {
         return props.layers.map(l =>
@@ -100,7 +118,7 @@ export const DeckGLContainer = memo(
       }
 
       return props.layers as Layer[];
-    }, [props.layers]);
+    }, [props.layers, props.mapStyle]);
 
     const { children = null, height, width } = props;
 
@@ -115,11 +133,13 @@ export const DeckGLContainer = memo(
             viewState={viewState}
             onViewStateChange={onViewStateChange}
           >
-            <StaticMap
-              preserveDrawingBuffer
-              mapStyle={props.mapStyle || 'light'}
-              mapboxApiAccessToken={props.mapboxApiAccessToken}
-            />
+            {props.mapStyle?.startsWith(MAPBOX_LAYER_PREFIX) && (
+              <StaticMap
+                preserveDrawingBuffer
+                mapStyle={props.mapStyle || 'light'}
+                mapboxApiAccessToken={props.mapboxApiAccessToken}
+              />
+            )}
           </DeckGL>
           {children}
         </div>

superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.tsx

@@ -29,6 +29,28 @@ import {
 import { D3_FORMAT_OPTIONS, sharedControls } from '@superset-ui/chart-controls';
 import { columnChoices, PRIMARY_COLOR } from './controls';
 
+let deckglTiles;
+
+export const DEFAULT_DECKGL_TILES = [
+  ['mapbox://styles/mapbox/streets-v9', 'Streets'],
+  ['mapbox://styles/mapbox/dark-v9', 'Dark'],
+  ['mapbox://styles/mapbox/light-v9', 'Light'],
+  ['mapbox://styles/mapbox/satellite-streets-v9', 'Satellite Streets'],
+  ['mapbox://styles/mapbox/satellite-v9', 'Satellite'],
+  ['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'],
+];
+
+const getDeckGLTiles = () => {
+  if (!deckglTiles) {
+    const appContainer = document.getElementById('app');
+    const { common } = JSON.parse(
+      appContainer?.getAttribute('data-bootstrap') || '{}',
+    );
+    deckglTiles = common?.deckgl_tiles ?? DEFAULT_DECKGL_TILES;
+  }
+  return deckglTiles;
+};
+
 const DEFAULT_VIEWPORT = {
   longitude: 6.85236157047845,
   latitude: 31.222656842808707,
@@ -372,17 +394,10 @@ export const mapboxStyle = {
     renderTrigger: true,
     freeForm: true,
     validators: [validateMapboxStylesUrl],
-    choices: [
-      ['mapbox://styles/mapbox/streets-v9', t('Streets')],
-      ['mapbox://styles/mapbox/dark-v9', t('Dark')],
-      ['mapbox://styles/mapbox/light-v9', t('Light')],
-      ['mapbox://styles/mapbox/satellite-streets-v9', t('Satellite Streets')],
-      ['mapbox://styles/mapbox/satellite-v9', t('Satellite')],
-      ['mapbox://styles/mapbox/outdoors-v9', t('Outdoors')],
-    ],
-    default: 'mapbox://styles/mapbox/light-v9',
+    choices: getDeckGLTiles(),
+    default: getDeckGLTiles()[0][0],
     description: t(
-      'Base layer map style. See Mapbox documentation: %s',
+      'Mapbox base layer map style (see Mapbox documentation: %s) or tile server URL.',
       'https://docs.mapbox.com/help/glossary/style-url/',
     ),
   },

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx

@@ -25,10 +25,15 @@ import {
   QueryFormData,
   SequentialScheme,
 } from '@superset-ui/core';
+import { GeoBoundingBox, TileLayer } from '@deck.gl/geo-layers';
+import { BitmapLayer, PathLayer } from '@deck.gl/layers';
 import { hexToRGB } from './utils/colors';
 
 const DEFAULT_NUM_BUCKETS = 10;
 
+export const MAPBOX_LAYER_PREFIX = 'mapbox://';
+export const TILE_LAYER_PREFIX = 'tile://';
+
 export type Buckets = {
   break_points: string[];
   num_buckets: string;
@@ -190,3 +195,42 @@ export function getBuckets(
 
   return buckets;
 }
+
+export function buildTileLayer(url: string, id: string) {
+  interface TileLayerProps {
+    id: string;
+    data: string;
+    minZoom: number;
+    maxZoom: number;
+    tileSize: number;
+    renderSubLayers: (props: any) => (BitmapLayer | PathLayer)[];
+  }
+
+  interface RenderSubLayerProps {
+    tile: {
+      bbox: GeoBoundingBox;
+    };
+    data: any;
+  }
+
+  return new TileLayer({
+    data: url,
+    id,
+    minZoom: 0,
+    maxZoom: 19,
+    tileSize: 256,
+
+    renderSubLayers: (props: RenderSubLayerProps): BitmapLayer[] => {
+      const { west, north, east, south } = props.tile.bbox as GeoBoundingBox;
+
+      // Ajouter une BitmapLayer
+      const bitmapLayer = new BitmapLayer(props, {
+        data: undefined,
+        image: props.data,
+        bounds: [west, south, east, north],
+      });
+
+      return [bitmapLayer];
+    },
+  } as TileLayerProps);
+}

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

@@ -418,6 +418,27 @@ class D3Format(TypedDict, total=False):
 D3_FORMAT: D3Format = {}
 
 
+# Override the default mapbox tiles
+# Default values are equivalent to
+# DECKGL_BASE_MAP = [
+#   ['mapbox://styles/mapbox/streets-v9', 'Streets'],
+#   ['mapbox://styles/mapbox/dark-v9', 'Dark'],
+#   ['mapbox://styles/mapbox/light-v9', 'Light'],
+#   ['mapbox://styles/mapbox/satellite-streets-v9', 'Satellite Streets'],
+#   ['mapbox://styles/mapbox/satellite-v9', 'Satellite'],
+#   ['mapbox://styles/mapbox/outdoors-v9', 'Outdoors'],
+# ]
+# for adding your own map tiles, you can use the following format:
+# - tile:// + your_personal_url or openstreetmap_url
+#   example:
+#   DECKGL_BASE_MAP = [
+#       ['tile://https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', 'OpenStreetMap']
+#    ]
+# Enable CORS and set map url in origins option.
+# Add also map url in connect-src of TALISMAN_CONFIG variable
+DECKGL_BASE_MAP: list[list[str, str]] = None
+
+
 # Override the default d3 locale for time format
 # Default values are equivalent to
 # D3_TIME_FORMAT = {
@@ -821,7 +842,7 @@ class D3TimeFormat(TypedDict, total=False):
 
 # CORS Options
 # NOTE: enabling this requires installing the cors-related python dependencies
-# `pip install .[cors]` or `pip install apache_superset[cors]`, depending
+# `pip install .[cors]` or `pip install apache-superset[cors]`, depending
 ENABLE_CORS = False
 CORS_OPTIONS: dict[Any, Any] = {}
 

superset/config.py

@@ -337,6 +337,7 @@ def cached_common_bootstrap_data(  # pylint: disable=unused-argument
         "d3_format": conf.get("D3_FORMAT"),
         "d3_time_format": conf.get("D3_TIME_FORMAT"),
         "currencies": conf.get("CURRENCIES"),
+        "deckgl_tiles": conf.get("DECKGL_BASE_MAP"),
         "feature_flags": get_feature_flags(),
         "extra_sequential_color_schemes": conf["EXTRA_SEQUENTIAL_COLOR_SCHEMES"],
         "extra_categorical_color_schemes": conf["EXTRA_CATEGORICAL_COLOR_SCHEMES"],