diff --git a/superset-frontend/plugins/geoset-map-chart/src/layers/GeoSetLayer/GeoSetLayer.tsx b/superset-frontend/plugins/geoset-map-chart/src/layers/GeoSetLayer/GeoSetLayer.tsx index 659014ca9d..9753e7fd15 100644 --- a/superset-frontend/plugins/geoset-map-chart/src/layers/GeoSetLayer/GeoSetLayer.tsx +++ b/superset-frontend/plugins/geoset-map-chart/src/layers/GeoSetLayer/GeoSetLayer.tsx @@ -806,13 +806,13 @@ const DeckGLGeoJson = (props: DeckGLGeoJsonProps) => { propVisualConfig?.fillColor || formData.fillColorPicker, ); - // Extract defaultLegendNames from geojsonConfig for null category substitution + // Extract defaultLegendName from geojsonConfig for null category substitution const getDefaultLegendNames = (config: any): string[] => { try { const parsed = typeof config === 'string' ? JSON.parse(config) : (config ?? {}); - return Array.isArray(parsed?.colorByCategory?.defaultLegendNames) - ? parsed.colorByCategory.defaultLegendNames + return Array.isArray(parsed?.colorByCategory?.defaultLegendName) + ? parsed.colorByCategory.defaultLegendName : ['Other']; } catch { return ['Other']; @@ -867,11 +867,11 @@ const DeckGLGeoJson = (props: DeckGLGeoJsonProps) => { console.warn('🚨 Failed to parse categoryColorMapping', err); } - // Extract defaultLegendNames from parsed config + // Extract defaultLegendName from parsed config const defaultLegendNames = Array.isArray( - (parsedGeojsonConfig as any)?.colorByCategory?.defaultLegendNames, + (parsedGeojsonConfig as any)?.colorByCategory?.defaultLegendName, ) - ? (parsedGeojsonConfig as any).colorByCategory.defaultLegendNames + ? (parsedGeojsonConfig as any).colorByCategory.defaultLegendName : ['Other']; setCategories( diff --git a/superset-frontend/plugins/geoset-map-chart/src/transformProps.ts b/superset-frontend/plugins/geoset-map-chart/src/transformProps.ts index b542034a46..cc1a0160e1 100644 --- a/superset-frontend/plugins/geoset-map-chart/src/transformProps.ts +++ b/superset-frontend/plugins/geoset-map-chart/src/transformProps.ts @@ -324,8 +324,8 @@ export default function transformProps(chartProps: ChartProps) { : categoryColorMapping || {}; // Extract default legend names, fallback to ['Other'] - const defaultLegendNames = Array.isArray(colorByCategory?.defaultLegendNames) - ? colorByCategory.defaultLegendNames + const defaultLegendNames = Array.isArray(colorByCategory?.defaultLegendName) + ? colorByCategory.defaultLegendName : ['Other']; // For Line/LineString geometries, use strokeColor as the fallback for category coloring diff --git a/wiki/GeoSet-Map-Layer.md b/wiki/GeoSet-Map-Layer.md index d2a3bd6ba0..fa91459516 100644 --- a/wiki/GeoSet-Map-Layer.md +++ b/wiki/GeoSet-Map-Layer.md @@ -1,18 +1,16 @@ -# GeoSet Map Layer Chart +# GeoSet Map Layer -The **GeoSet Map Layer** (`deck_geoset_map_layer`) is the core chart type for rendering geospatial data. It renders a single layer of geographic features on an interactive map and is the building block for [[GeoSet Multi Map Chart|multi-layer maps]]. +The **GeoSet Map Layer** (`deck_geoset_map_layer`) is the core chart type for rendering geospatial data. It renders a single layer of geographic features on an interactive map and is the building block for [[GeoSet Multi Map|multi-layer maps]]. -Screenshot 2026-02-23 at 4 07 24 PM +Screenshot 2026-02-23 at 4 07 24 PM ## Creating a Chart 1. In Superset, go to **Charts → + Chart** 2. Select your dataset and choose **GeoSet Map Layer** as the chart type 3. In the **Map Configuration** panel, configure your layer -

- geoset-chart-selection - geojson-config-control-chart-builder -

+geoset-chart-selection +geoset-layer-chart-builder ## Map Configuration Controls @@ -90,21 +88,53 @@ Applies a single style to all features. Used when you don't need per-category or "strokeWidth": 2, "lineStyle": "solid", "fillPattern": "solid", - "pointType": "circle", - "pointSize": 10 + "pointType": "circle" } } ``` -| Field | Type | Description | -| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| `fillColor` | `[R, G, B, A]` | Fill color as RGBA (0–255) | -| `strokeColor` | `[R, G, B, A]` | Stroke/outline color as RGBA | -| `strokeWidth` | number | Stroke width in pixels | -| `lineStyle` | string | Line rendering style: `"solid"`, `"dashed"`, or `"dotted"`. Optional, defaults to `null`. | -| `fillPattern` | string | `"solid"` (required) | -| `pointType` | string | Icon name for point layers (e.g., `"circle"`, `"point"`, or any registered SVG icon). Optional, defaults to `null` (circle). | -| `pointSize` | integer | Static size of point icons in pixels (1–50). Optional, defaults to `null`. | +| Field | Type | Description | +| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| `fillColor` | `[R, G, B, A]` | Fill color as RGBA (0–255) | +| `strokeColor` | `[R, G, B, A]` | Stroke/outline color as RGBA | +| `strokeWidth` | number | Stroke width in pixels | +| `lineStyle` | string | Line rendering style: `"solid"`, `"dashed"`, or `"dotted"`. Optional, defaults to `null`. | +| `fillPattern` | string | `"solid"` (required) | +| `pointType` | string | Icon name for point layers: `"circle"`, `"point"`, `"marker"`, `"square"`, or `"triangle"`. Optional, defaults to `null` (circle). | + +### `pointSize` + +Controls the size of point icons. This is a **top-level** key (not inside `globalColoring`). It accepts either a static number or a dynamic data-driven configuration object. + +**Static** — a single pixel size applied to all points (1–200): + +```json +{ + "pointSize": 10 +} +``` + +**Dynamic** — sizes points based on a numeric column value: + +```json +{ + "pointSize": { + "valueColumn": "incident_size", + "startSize": 4, + "endSize": 30, + "lowerBound": null, + "upperBound": null + } +} +``` + +| Field | Type | Description | +| ------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `valueColumn` | string | The numeric column to map to point size | +| `startSize` | number | Pixel size at the lower bound (1–200) | +| `endSize` | number | Pixel size at the upper bound (1–200, must be greater than `startSize`) | +| `lowerBound` | number, string, or `null` | Value that maps to `startSize`. A number sets an absolute value, a string like `"25%"` uses the 25th percentile of the data, and `null` uses the data minimum. | +| `upperBound` | number, string, or `null` | Value that maps to `endSize`. A number sets an absolute value, a string like `"75%"` uses the 75th percentile of the data, and `null` uses the data maximum. | ### `colorByCategory` diff --git a/wiki/GeoSet-Multi-Map.md b/wiki/GeoSet-Multi-Map.md index 9048581db4..c0f9b79e94 100644 --- a/wiki/GeoSet-Multi-Map.md +++ b/wiki/GeoSet-Multi-Map.md @@ -1,8 +1,8 @@ -# GeoSet Multi Map Chart +# GeoSet Multi Map -The **GeoSet Multi Map** (`deck_geoset_multi_map`) chart type composes multiple [[GeoSet Map Layer Chart|GeoSet Map Layer]] charts into a single interactive map. Each sub-layer retains its own styling, data source, and legend configuration. +The **GeoSet Multi Map** (`deck_geoset_multi_map`) chart type composes multiple [[GeoSet Map Layer|GeoSet Map Layer]] charts into a single interactive map. Each sub-layer retains its own styling, data source, and legend configuration. -Screenshot 2026-02-23 at 4 08 10 PM +Screenshot 2026-02-23 at 4 08 10 PM ## Creating a Multi Map Chart @@ -11,10 +11,8 @@ The **GeoSet Multi Map** (`deck_geoset_multi_map`) chart type composes multiple 3. Select your dataset (used only for dashboard filters) and choose **GeoSet Multi Map** as the chart type 4. In the **Map** panel, add your layer charts via **GeoSet Layer Charts** -

- geoset-chart-selection - geoset-multi-chart-builder -

+geoset-chart-selection +geoset-mult-chart-builder ## Map Controls @@ -28,11 +26,11 @@ When checked, shows the **Viewport** control for setting a fixed map position. T ### Viewport -Sets the map center, zoom, pitch, and bearing for the static viewport. See [[GeoSet Map Layer Chart#Viewport|Viewport]] for details on how the controls work. +Sets the map center, zoom, pitch, and bearing for the static viewport. See [[GeoSet Map Layer#Viewport|Viewport]] for details on how the controls work. ### GeoSet Layer Charts -Select the [[GeoSet Map Layer Chart|GeoSet Map Layer]] charts to include. Only charts of type `deck_geoset_map_layer` appear in the list. +Select the [[GeoSet Map Layer|GeoSet Map Layer]] charts to include. Only charts of type `deck_geoset_map_layer` appear in the list. Each layer has a **settings popover** (gear icon) with per-layer options: @@ -57,7 +55,7 @@ If no layers have Auto Zoom enabled, the map canvas renders immediately after fe ## Multi-Layer Legend -When a Multi Map chart is rendered on a dashboard, a unified legend is shown covering all active layers. Each layer's legend entries come from the `legend` field in its [[GeoSet Map Layer Chart#legend|GeoJSON Config]]. +When a Multi Map chart is rendered on a dashboard, a unified legend is shown covering all active layers. Each layer's legend entries come from the `legend` field in its [[GeoSet Map Layer#legend|GeoJSON Config]]. ### Legend Features diff --git a/wiki/Getting-Started.md b/wiki/Getting-Started.md index a45b13ff89..bfcbaf86ac 100644 --- a/wiki/Getting-Started.md +++ b/wiki/Getting-Started.md @@ -77,6 +77,6 @@ docker compose down -v ## Next Steps -- Load the [[Sample Data and Demo Dashboards]] to see GeoSet in action -- Create your first map chart: [[GeoSet Map Layer Chart]] -- Combine multiple layers: [[GeoSet Multi Map Chart]] +- Load the [[Sample Dashboards]] to see GeoSet in action +- Create your first map chart: [[GeoSet Map Layer]] +- Combine multiple layers: [[GeoSet Multi Map]] diff --git a/wiki/Home.md b/wiki/Home.md index 693e41d27e..bcd0f7bb63 100644 --- a/wiki/Home.md +++ b/wiki/Home.md @@ -2,7 +2,7 @@ GeoSet is a geospatial data monitoring and visualization platform built on [Apache Superset](https://github.com/apache/superset). It extends Superset with custom deck.gl-based map visualization plugins purpose-built for exploring geographic data at scale. -Screenshot 2026-02-23 at 4 46 31 PM +geoset-example-dashboard ## What GeoSet Adds @@ -19,9 +19,9 @@ GeoSet is a geospatial data monitoring and visualization platform built on [Apac ## Pages - [[Getting Started]] — Install and run GeoSet with Docker -- [[GeoSet Map Layer Chart]] — Creating and configuring individual map layer charts -- [[GeoSet Multi Map Chart]] — Composing multiple layers into a single map -- [[Sample Data and Demo Dashboards]] — Loading the example Hurricane and Wildfire dashboards +- [[GeoSet Map Layer]] — Creating and configuring individual map layer charts +- [[GeoSet Multi Map]] — Composing multiple layers into a single map +- [[Sample Dashboards]] — Loading the example Hurricane and Wildfire dashboards - [[Development Guide]] — Local dev setup, plugin architecture, contributing - [[JSON Config Spec]] — Reference for the GeoSet Map Layer JSON configuration schema diff --git a/wiki/JSON-Config-Spec.md b/wiki/JSON-Config-Spec.md index 17b6577e4d..986cc87552 100644 --- a/wiki/JSON-Config-Spec.md +++ b/wiki/JSON-Config-Spec.md @@ -2,15 +2,59 @@ Reference for the GeoSet Map Layer JSON configuration object. This is the schema that controls how geographic features are styled, colored, and labeled. -- [Overview of Schema Fields](#overview-of-schema-fields) - - [Constraints](#constraints) -- [Field Specifications](#field-specifications) - - [globalColoring](#globalcoloring) - - [colorByCategory](#colorbycategory) - - [colorByValue](#colorbyvalue) - - [pointSize](#pointsize) - - [textOverlayStyle](#textoverlaystyle) - - [legend](#legend) +- [JSON Config Spec](#json-config-spec) + - [Complete Example](#complete-example) + - [Overview of Schema Fields](#overview-of-schema-fields) + - [Constraints](#constraints) + - [Field Specifications](#field-specifications) + - [globalColoring](#globalcoloring) + - [colorByCategory](#colorbycategory) + - [colorByValue](#colorbyvalue) + - [Constraints](#constraints-1) + - [pointSize](#pointsize) + - [Static](#static) + - [Dynamic (data-driven)](#dynamic-data-driven) + - [Constraints](#constraints-2) + - [textOverlayStyle](#textoverlaystyle) + - [legend](#legend) + +## Complete Example + +A full configuration showing all fields together. This example renders wind station points colored by `max_wind_speed` on a yellow-to-red gradient (using percentile bounds), with data-driven point sizing on the same column: + +```json +{ + "globalColoring": { + "fillColor": [40, 147, 179, 255], + "strokeColor": [0, 0, 0, 255], + "strokeWidth": 2, + "lineStyle": "solid", + "fillPattern": "solid", + "pointType": "circle" + }, + "colorByValue": { + "valueColumn": "max_wind_speed", + "startColor": [255, 255, 0, 255], + "endColor": [255, 0, 0, 255], + "lowerBound": "10%", + "upperBound": "90%", + "breakpoints": ["25%", "50%", "75%"] + }, + "pointSize": { + "valueColumn": "max_wind_speed", + "startSize": 4, + "endSize": 30, + "lowerBound": null, + "upperBound": null + }, + "legend": { + "title": "Wind Stations", + "name": null + } +} +``` + +> **Note:** `colorByCategory` and `colorByValue` are mutually exclusive — use one or the other, not both. When either is present, `legend.name` must be `null`. ## Overview of Schema Fields @@ -122,14 +166,14 @@ Given a hurricane dataset with a `max_wind_speed` column (in mph), this config c } ``` -| Field | Type | Required | Description | -| ------------- | ----------------------------------------------- | -------- | ----------------------------------------------------------- | -| `valueColumn` | string | **yes** | Numeric column to map to color. | -| `startColor` | `[R, G, B, A]` | **yes** | Color at the low end of the gradient. | -| `endColor` | `[R, G, B, A]` | **yes** | Color at the high end of the gradient. | -| `lowerBound` | number, percentage string, or `null` | no | Value mapped to `startColor`. `null` uses the data minimum. | -| `upperBound` | number, percentage string, or `null` | no | Value mapped to `endColor`. `null` uses the data maximum. | -| `breakpoints` | array of numbers or percentage strings | **yes** | Intermediate stops for the gradient. Can be empty (`[]`). | +| Field | Type | Required | Description | +| ------------- | -------------------------------------- | -------- | ----------------------------------------------------------- | +| `valueColumn` | string | **yes** | Numeric column to map to color. | +| `startColor` | `[R, G, B, A]` | **yes** | Color at the low end of the gradient. | +| `endColor` | `[R, G, B, A]` | **yes** | Color at the high end of the gradient. | +| `lowerBound` | number, percentage string, or `null` | no | Value mapped to `startColor`. `null` uses the data minimum. | +| `upperBound` | number, percentage string, or `null` | no | Value mapped to `endColor`. `null` uses the data maximum. | +| `breakpoints` | array of numbers or percentage strings | **yes** | Intermediate stops for the gradient. Can be empty (`[]`). | **Percentage bounds:** You can use strings like `"10%"` or `"90%"` for bounds and breakpoints. These are resolved against the actual data distribution on the frontend (e.g. `"10%"` means the 10th percentile of the data). This is useful when the data is skewed or contains outliers. diff --git a/wiki/Sample-Dashboards.md b/wiki/Sample-Dashboards.md index 06969eb9f3..aba4d35227 100644 --- a/wiki/Sample-Dashboards.md +++ b/wiki/Sample-Dashboards.md @@ -1,21 +1,21 @@ -# Sample Data and Demo Dashboards +# Sample Dashboards GeoSet ships with a self-contained demo stack that loads real geospatial data and pre-built dashboards so you can explore the platform without setting up your own data sources. -Screenshot 2026-02-23 at 3 40 56 PM +geoset-example-dashboard -helene-storm-data +helene-storm-data ## What's Included The demo stack loads three datasets from public APIs: -| Dataset | Source | Table | -|---|---|---| -| US State Boundaries | Census Bureau API | `census_state_boundaries` | -| Active Wildfire Locations | NIFC ArcGIS API | `nifc_wildfire_locations` | -| Hurricane Best Track | NHC/NOAA API | `nhc_best_track` | +| Dataset | Source | Table | +| ------------------------- | ----------------- | ------------------------- | +| US State Boundaries | Census Bureau API | `census_state_boundaries` | +| Active Wildfire Locations | NIFC ArcGIS API | `nifc_wildfire_locations` | +| Hurricane Best Track | NHC/NOAA API | `nhc_best_track` | These datasets power two multi-layer map charts inside the **GeoSet Example Dashboard**: