JoshuaJADaniel opened a new pull request, #36201: URL: https://github.com/apache/superset/pull/36201
### 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](https://deck.gl/docs/api-reference/layers/geojson-layer). 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 https://github.com/user-attachments/assets/f99802ef-cdb2-47da-a367-3e978f362cb8 #### Icon Support Demo https://github.com/user-attachments/assets/86ece538-01cf-4d07-9d23-3b7dbda5b83a ### TESTING INSTRUCTIONS 1. Create a GeoJSON dataset. <details> <summary>Click here for the sample dataset from the demo</summary> <br />You can use this query to create a dataset in Superset using the SQL Lab interface: ```sql 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 ``` </details> 1. Create a `deck.gl Geojson` chart/visualization using the dataset created in step 1. 1. Under the `Query` section, fill the required `GeoJson Column` field (if using the sample dataset, select `JSON`). 1. 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](https://a.basemaps.cartocdn.com/spotify_dark/1/0/0.png) (it is hosted on cartocdn, which is included in the default CSP). ### ADDITIONAL INFORMATION - [x] Has associated issue: #34621 - [x] Required feature flags: `ENABLE_JAVASCRIPT_CONTROLS` - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [x] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
