fix: deck.gl GeoJsonLayer Autozoom & fill/stroke options

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

@@ -23,6 +23,7 @@
     "lib"
   ],
   "dependencies": {
+    "@mapbox/geojson-extent": "^1.0.1",
     "@math.gl/web-mercator": "^3.2.2",
     "@types/d3-array": "^2.0.0",
     "bootstrap-slider": "^10.0.0",

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -20,13 +19,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GeoJsonLayer } from 'deck.gl';
-// TODO import geojsonExtent from 'geojson-extent';
+import geojsonExtent from '@mapbox/geojson-extent';
 
 import { DeckGLContainerStyledWrapper } from '../../DeckGLContainer';
 import { hexToRGB } from '../../utils/colors';
 import sandboxedEval from '../../utils/sandbox';
 import { commonLayerProps } from '../common';
 import TooltipRow from '../../TooltipRow';
+import fitViewport from '../../utils/fitViewport';
 
 const propertyMap = {
   fillColor: 'fillColor',
@@ -94,6 +94,9 @@ function setTooltipContent(o) {
   );
 }
 
+const getFillColor = feature => feature?.properties?.fillColor;
+const getLineColor = feature => feature?.properties?.strokeColor;
+
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
   const fd = formData;
   const fc = fd.fill_color_picker;
@@ -125,6 +128,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     stroked: fd.stroked,
     extruded: fd.extruded,
     pointRadiusScale: fd.point_radius_scale,
+    getFillColor,
+    getLineWidth: fd.line_width || 1,
+    getLineColor,
     ...commonLayerProps(fd, setTooltip, setTooltipContent),
   });
 }
@@ -151,13 +157,29 @@ class DeckGLGeoJson extends React.Component {
   };
 
   render() {
-    const { formData, payload, setControlValue, onAddFilter, viewport } =
+    const { formData, payload, setControlValue, onAddFilter, height, width } =
       this.props;
 
-    // TODO get this to work
-    // if (formData.autozoom) {
-    //   viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
-    // }
+    let { viewport } = this.props;
+    if (formData.autozoom) {
+      const points =
+        payload?.data?.features?.reduce?.((acc, feature) => {
+          const bounds = geojsonExtent(feature);
+          if (bounds) {
+            return [...acc, [bounds[0], bounds[1]], [bounds[2], bounds[3]]];
+          }
+
+          return acc;
+        }, []) || [];
+
+      if (points.length) {
+        viewport = fitViewport(viewport, {
+          width,
+          height,
+          points,
+        });
+      }
+    }
 
     const layer = getLayer(formData, payload, onAddFilter, this.setTooltip);
 
@@ -169,6 +191,8 @@ class DeckGLGeoJson extends React.Component {
         layers={[layer]}
         mapStyle={formData.mapbox_style}
         setControlValue={setControlValue}
+        height={height}
+        width={width}
       />
     );
   }

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

@@ -38,6 +38,8 @@ import {
   viewport,
   mapboxStyle,
   geojsonColumn,
+  autozoom,
+  lineWidth,
 } from '../../utilities/Shared_DeckGL';
 import { dndGeojsonColumn } from '../../utilities/sharedDndControls';
 
@@ -60,17 +62,15 @@ const config: ControlPanelConfig = {
     },
     {
       label: t('Map'),
-      controlSetRows: [
-        [mapboxStyle, viewport],
-        // TODO [autozoom, null], // import { autozoom } from './Shared_DeckGL'
-      ],
+      controlSetRows: [[mapboxStyle, viewport], [autozoom]],
     },
     {
       label: t('GeoJson Settings'),
       controlSetRows: [
         [fillColorPicker, strokeColorPicker],
         [filled, stroked],
         [extruded, null],
+        [lineWidth, null],
         [
           {
             name: 'point_radius_scale',