Add custom colorized vector icons examples for Flutter

MAPSFLT-411

Port the custom colorized vector icons example from GL JS to Flutter.
Demonstrates parameterized SVG icons with runtime color customization using the image
expression with color parameters.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: pjleonard37

example/lib/custom_colorized_vector_icons_example.dart

@@ -0,0 +1,117 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
+import 'example.dart';
+
+/// Example demonstrating custom colorized vector icons using parameterized SVG icons.
+/// This example shows how to dynamically color vector icons based on feature properties
+/// using the image expression with color parameters.
+///
+/// For this example to work, the SVGs must live inside the map style, like in the custom style
+/// used here. The SVG file was uploaded to Mapbox Studio with the name `flag`,
+/// making it available for customization at runtime.
+/// You can add vector icons to your own style in Mapbox Studio.
+class CustomColorizedVectorIconsExample extends StatefulWidget
+    implements Example {
+  @override
+  final Widget leading = const Icon(Icons.flag);
+  @override
+  final String title = 'Custom Colorized Vector Icons';
+  @override
+  final String subtitle =
+      'Dynamically color vector icons using parameterized SVGs';
+
+  @override
+  State<StatefulWidget> createState() =>
+      _CustomColorizedVectorIconsExampleState();
+}
+
+class _CustomColorizedVectorIconsExampleState
+    extends State<CustomColorizedVectorIconsExample> {
+  MapboxMap? mapboxMap;
+
+  @override
+  Widget build(BuildContext context) {
+    return MapWidget(
+      cameraOptions: CameraOptions(
+        center: Point(coordinates: Position(24.6881, 60.185755)),
+        zoom: 16.0,
+      ),
+      styleUri: 'mapbox://styles/mapbox-map-design/cm4r19bcm00ao01qvhp3jc2gi',
+      key: ValueKey<String>('mapWidget'),
+      onMapCreated: _onMapCreated,
+      onStyleLoadedListener: _onStyleLoaded,
+    );
+  }
+
+  _onMapCreated(MapboxMap mapboxMap) async {
+    this.mapboxMap = mapboxMap;
+  }
+
+  _onStyleLoaded(StyleLoadedEventData data) async {
+    await _addFlagSymbols();
+  }
+
+  /// Creates GeoJSON features with flag locations and colors.
+  List<Map<String, dynamic>> _createFlagFeatures() {
+    return [
+      _createFlagFeature(24.68727, 60.185755, 'red'),
+      _createFlagFeature(24.68827, 60.186255, 'yellow'),
+      _createFlagFeature(24.68927, 60.186055, '#800080'),
+    ];
+  }
+
+  /// Creates a feature with a flag at the specified location and color.
+  Map<String, dynamic> _createFlagFeature(
+      double longitude, double latitude, String color) {
+    return {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [longitude, latitude],
+      },
+      'properties': {
+        'flagColor': color,
+      },
+    };
+  }
+
+  Future<void> _addFlagSymbols() async {
+    if (mapboxMap == null) {
+      throw Exception("MapboxMap is not ready yet");
+    }
+
+    // Create GeoJSON FeatureCollection
+    final geojson = {
+      'type': 'FeatureCollection',
+      'features': _createFlagFeatures(),
+    };
+
+    // Add GeoJSON source with flag locations
+    await mapboxMap?.style.addSource(
+      GeoJsonSource(
+        id: 'points',
+        data: json.encode(geojson),
+      ),
+    );
+
+    // Create symbol layer with parameterized icon
+    // The expression uses the 'image' operator with a params object
+    // that maps the 'flag_color' parameter to the 'flagColor' property
+    final layer = SymbolLayer(
+      id: 'points',
+      sourceId: 'points',
+      iconImageExpression: [
+        'image',
+        'flag',
+        {
+          'params': {
+            'flag_color': ['get', 'flagColor']
+          }
+        }
+      ],
+    );
+
+    await mapboxMap?.style.addLayer(layer);
+  }
+}

example/lib/main.dart

@@ -4,6 +4,7 @@ import 'package:mapbox_maps_example/animation_example.dart';
 import 'package:mapbox_maps_example/camera_example.dart';
 import 'package:mapbox_maps_example/circle_annotations_example.dart';
 import 'package:mapbox_maps_example/cluster_example.dart';
+import 'package:mapbox_maps_example/custom_colorized_vector_icons_example.dart';
 import 'package:mapbox_maps_example/custom_header_example.dart';
 import 'package:mapbox_maps_example/draggable-annotations-example.dart';
 import 'package:mapbox_maps_example/edit_polygon_example.dart';
@@ -74,6 +75,7 @@ final List<Example> _allPages = <Example>[
   AnimatedRouteExample(),
   CustomHeaderExample(),
   TrafficLayerExample(),
+  CustomColorizedVectorIconsExample(),
 ];
 
 class MapsDemo extends StatelessWidget {