feat: map

runtime/canvas/component.go

@@ -45,6 +45,8 @@ func ValidateRendererProperties(renderer string, props map[string]any, metricsVi
 		return validatePivot(props, metricsViews)
 	case "leaderboard":
 		return validateLeaderboard(props, metricsViews)
+	case "map":
+		return validateMap(props, metricsViews)
 	case "custom_chart":
 		// TODO: Implement
 		return nil
@@ -386,6 +388,37 @@ func validateLeaderboard(props map[string]any, metricsViews map[string]*runtimev
 	return nil
 }
 
+// validateMap validates properties for map.
+func validateMap(props map[string]any, metricsViews map[string]*runtimev1.MetricsViewSpec) error {
+	mvn, mv, err := requireMetricsView(props, metricsViews)
+	if err != nil {
+		return err
+	}
+
+	geoDim, ok := pathutil.GetPathString(props, "geo_dimension")
+	if !ok {
+		return errors.New("renderer properties for map must include a string 'geo_dimension' property")
+	}
+	if !metricsViewHasDimension(mv, geoDim) {
+		return fmt.Errorf("referenced geo_dimension %q is not a dimension in metrics view %q", geoDim, mvn)
+	}
+
+	// Color can be a plain string (color literal) or a map with a "measure" key.
+	if raw, ok := pathutil.GetPath(props, "color"); ok {
+		if _, isString := raw.(string); !isString {
+			if err := validateOptionalMeasureField(mv, mvn, props, "color.measure"); err != nil {
+				return err
+			}
+		}
+	}
+
+	if err := validateOptionalMeasureField(mv, mvn, props, "size_measure"); err != nil {
+		return err
+	}
+
+	return validateOptionalDimensionField(mv, mvn, props, "tooltip_dimension")
+}
+
 // requireMetricsView extracts and validates the "metrics_view" property from renderer props.
 // It returns the metrics view name, spec, and nil error on success.
 func requireMetricsView(props map[string]any, metricsViews map[string]*runtimev1.MetricsViewSpec) (string, *runtimev1.MetricsViewSpec, error) {

web-common/package.json

@@ -79,6 +79,7 @@
     "jspdf": "^2.5.2",
     "lucide-svelte": "^0.298.0",
     "luxon": "^3.5.0",
+    "mapbox-gl": "^3.0.0",
     "marked": "^16.4.0",
     "match-sorter": "^6.3.1",
     "memoizee": "^0.4.17",

web-common/src/features/canvas/AddComponentDropdown.svelte

@@ -13,6 +13,7 @@
   import BigNumberIcon from "./icons/BigNumberIcon.svelte";
   import ChartIcon from "./icons/ChartIcon.svelte";
   import LeaderboardIcon from "./icons/LeaderboardIcon.svelte";
+  import MapIcon from "./icons/MapIcon.svelte";
   import TableIcon from "./icons/TableIcon.svelte";
   import TextIcon from "./icons/TextIcon.svelte";
   type MainMenuItem = {
@@ -29,6 +30,7 @@
     { id: "kpi_grid", label: m.canvas_kpi(), icon: BigNumberIcon },
     { id: "leaderboard", label: m.canvas_leaderboard(), icon: LeaderboardIcon },
     { id: "image", label: m.canvas_image(), icon: ChartIcon },
+    { id: "map", label: m.canvas_map(), icon: MapIcon },
   ];
 
   export let disabled = false;