feat!: use FeatureCollection in Layers (#353)

josxha · web-flow · commit f39eaa7c8b73 · 2025-09-23T18:29:28.000+02:00
This pr allows to add properties.

Still looking into improving the API design somehow, suggestions
welcome.
diff --git a/example/lib/layers_circle_page.dart b/example/lib/layers_circle_page.dart
@@ -12,11 +12,11 @@ class LayersCirclePage extends StatefulWidget {
 }
 
 class _LayersCirclePageState extends State<LayersCirclePage> {
-  final _points = <Point>[
-    const Point(Geographic(lon: 9.17, lat: 47.68)),
-    const Point(Geographic(lon: 9.17, lat: 48)),
-    const Point(Geographic(lon: 9, lat: 48)),
-    const Point(Geographic(lon: 9.5, lat: 48)),
+  final _points = <Feature<Point>>[
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 47.68))),
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9.5, lat: 48))),
   ];
 
   @override
@@ -31,7 +31,7 @@ class _LayersCirclePageState extends State<LayersCirclePage> {
         onEvent: (event) {
           if (event case MapEventClick()) {
             setState(() {
-              _points.add(Point(event.point));
+              _points.add(Feature(geometry: Point(event.point)));
             });
           }
         },
diff --git a/example/lib/layers_marker_page.dart b/example/lib/layers_marker_page.dart
@@ -14,11 +14,11 @@ class LayersMarkerPage extends StatefulWidget {
 }
 
 class _LayersMarkerPageState extends State<LayersMarkerPage> {
-  final _points = <Point>[
-    const Point(Geographic(lon: 9.17, lat: 47.68)),
-    const Point(Geographic(lon: 9.17, lat: 48)),
-    const Point(Geographic(lon: 9, lat: 48)),
-    const Point(Geographic(lon: 9.5, lat: 48)),
+  final _points = <Feature<Point>>[
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 47.68))),
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9.5, lat: 48))),
   ];
 
   bool _imageLoaded = false;
@@ -47,7 +47,7 @@ class _LayersMarkerPageState extends State<LayersMarkerPage> {
             case MapEventClick():
               // add a new marker on click
               setState(() {
-                _points.add(Point(event.point));
+                _points.add(Feature(geometry: Point(event.point)));
               });
             default:
               // ignore all other events
diff --git a/example/lib/layers_mixed_page.dart b/example/lib/layers_mixed_page.dart
@@ -15,11 +15,11 @@ class LayersMixedPage extends StatefulWidget {
 
 class _LayersMixedPageState extends State<LayersMixedPage> {
   final _random = Random.secure();
-  final _circlePoints = <Point>[
-    const Point(Geographic(lon: 9.17, lat: 47.68)),
-    const Point(Geographic(lon: 9.17, lat: 48)),
-    const Point(Geographic(lon: 9, lat: 48)),
-    const Point(Geographic(lon: 9.5, lat: 48)),
+  final _circlePoints = <Feature<Point>>[
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 47.68))),
+    const Feature(geometry: Point(Geographic(lon: 9.17, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9, lat: 48))),
+    const Feature(geometry: Point(Geographic(lon: 9.5, lat: 48))),
   ];
   Color _circleColor = Colors.orange.withValues(alpha: 0.5);
   PolylineLayer? _polylineLayer;
@@ -56,12 +56,14 @@ class _LayersMixedPageState extends State<LayersMixedPage> {
                       if (_polylineLayer == null) {
                         _polylineLayer = PolylineLayer(
                           polylines: [
-                            LineString.from(
-                              const [
-                                Geographic(lon: 9.17, lat: 47.68),
-                                Geographic(lon: 9.5, lat: 48),
-                                Geographic(lon: 9, lat: 48),
-                              ],
+                            Feature(
+                              geometry: LineString.from(
+                                const [
+                                  Geographic(lon: 9.17, lat: 47.68),
+                                  Geographic(lon: 9.5, lat: 48),
+                                  Geographic(lon: 9, lat: 48),
+                                ],
+                              ),
                             ),
                           ],
                         );
@@ -87,7 +89,7 @@ class _LayersMixedPageState extends State<LayersMixedPage> {
               onEvent: (event) {
                 if (event case MapEventClick()) {
                   setState(() {
-                    _circlePoints.add(Point(event.point));
+                    _circlePoints.add(Feature(geometry: Point(event.point)));
                   });
                 }
               },
diff --git a/example/lib/layers_polygon_page.dart b/example/lib/layers_polygon_page.dart
@@ -12,18 +12,20 @@ class LayersPolygonPage extends StatefulWidget {
 }
 
 class _LayersPolygonPageState extends State<LayersPolygonPage> {
-  final _polygons = <Polygon>[
-    Polygon.from(
-      const [
-        [
-          Geographic(lon: 8.201306116882563, lat: 48.107357488669464),
-          Geographic(lon: 8.885254895692924, lat: 48.09428546381665),
-          Geographic(lon: 8.759684141159909, lat: 47.69326800157776),
-          Geographic(lon: 9.631980099303235, lat: 48.08929468133098),
-          Geographic(lon: 8.68543348810175, lat: 48.45383566718806),
-          Geographic(lon: 8.201306116882563, lat: 48.107357488669464),
+  final _polygons = <Feature<Polygon>>[
+    Feature(
+      geometry: Polygon.from(
+        const [
+          [
+            Geographic(lon: 8.201306116882563, lat: 48.107357488669464),
+            Geographic(lon: 8.885254895692924, lat: 48.09428546381665),
+            Geographic(lon: 8.759684141159909, lat: 47.69326800157776),
+            Geographic(lon: 9.631980099303235, lat: 48.08929468133098),
+            Geographic(lon: 8.68543348810175, lat: 48.45383566718806),
+            Geographic(lon: 8.201306116882563, lat: 48.107357488669464),
+          ],
         ],
-      ],
+      ),
     ),
   ];
 
@@ -38,11 +40,13 @@ class _LayersPolygonPageState extends State<LayersPolygonPage> {
         ),
         onEvent: (event) {
           if (event case MapEventClick()) {
-            final points = _polygons.first.rings.first.inserted(0, [
+            final points = _polygons.first.geometry!.rings.first.inserted(0, [
               event.point,
             ]);
             setState(() {
-              _polygons[0] = Polygon.from([points.positions]);
+              _polygons[0] = Feature(
+                geometry: Polygon.from([points.positions]),
+              );
             });
           }
         },
diff --git a/example/lib/layers_polyline_page.dart b/example/lib/layers_polyline_page.dart
@@ -12,13 +12,15 @@ class LayersPolylinePage extends StatefulWidget {
 }
 
 class _LayersPolylinePageState extends State<LayersPolylinePage> {
-  final _polylines = <LineString>[
-    LineString.from(
-      const [
-        Geographic(lon: 9.17, lat: 47.68),
-        Geographic(lon: 9.5, lat: 48),
-        Geographic(lon: 9, lat: 48),
-      ],
+  final _polylines = <Feature<LineString>>[
+    Feature(
+      geometry: LineString.from(
+        const [
+          Geographic(lon: 9.17, lat: 47.68),
+          Geographic(lon: 9.5, lat: 48),
+          Geographic(lon: 9, lat: 48),
+        ],
+      ),
     ),
   ];
 
@@ -34,9 +36,13 @@ class _LayersPolylinePageState extends State<LayersPolylinePage> {
         onEvent: (event) {
           if (event case MapEventClick()) {
             // add the clicked point to the line
-            final newChain = _polylines.first.chain.inserted(0, [event.point]);
+            final newChain = _polylines.first.geometry!.chain.inserted(0, [
+              event.point,
+            ]);
             setState(() {
-              _polylines[0] = LineString.from(newChain.positions);
+              _polylines[0] = Feature(
+                geometry: LineString.from(newChain.positions),
+              );
             });
           }
         },
diff --git a/example/lib/offline_page.dart b/example/lib/offline_page.dart
@@ -336,29 +336,31 @@ class _OfflineMapPage extends StatelessWidget {
             color: Colors.red,
             width: 3,
             polylines: [
-              LineString.from(
-                [
-                  Geographic(
-                    lon: bounds.longitudeWest,
-                    lat: bounds.latitudeSouth,
-                  ),
-                  Geographic(
-                    lon: bounds.longitudeWest,
-                    lat: bounds.latitudeNorth,
-                  ),
-                  Geographic(
-                    lon: bounds.longitudeEast,
-                    lat: bounds.latitudeNorth,
-                  ),
-                  Geographic(
-                    lon: bounds.longitudeEast,
-                    lat: bounds.latitudeSouth,
-                  ),
-                  Geographic(
-                    lon: bounds.longitudeWest,
-                    lat: bounds.latitudeSouth,
-                  ),
-                ],
+              Feature(
+                geometry: LineString.from(
+                  [
+                    Geographic(
+                      lon: bounds.longitudeWest,
+                      lat: bounds.latitudeSouth,
+                    ),
+                    Geographic(
+                      lon: bounds.longitudeWest,
+                      lat: bounds.latitudeNorth,
+                    ),
+                    Geographic(
+                      lon: bounds.longitudeEast,
+                      lat: bounds.latitudeNorth,
+                    ),
+                    Geographic(
+                      lon: bounds.longitudeEast,
+                      lat: bounds.latitudeSouth,
+                    ),
+                    Geographic(
+                      lon: bounds.longitudeWest,
+                      lat: bounds.latitudeSouth,
+                    ),
+                  ],
+                ),
               ),
             ],
           ),
diff --git a/lib/src/layer/circle_layer.dart b/lib/src/layer/circle_layer.dart
@@ -4,10 +4,10 @@ part of 'layer.dart';
 ///
 /// {@category Layers}
 @immutable
-class CircleLayer extends Layer<Point> {
+class CircleLayer extends Layer<Feature<Point>> {
   /// Create a new [CircleLayer] instance.
   const CircleLayer({
-    required List<Point> points,
+    required List<Feature<Point>> points,
     this.radius = 5,
     this.color = const Color(0xFF000000),
     this.blur = 0,
diff --git a/lib/src/layer/layer.dart b/lib/src/layer/layer.dart
@@ -14,7 +14,7 @@ part 'polyline_layer.dart';
 ///
 /// {@category Layers}
 @immutable
-sealed class Layer<G extends Geometry> {
+sealed class Layer<G extends Feature<Geometry>> {
   const Layer._({required this.list});
 
   /// The [List] of layers.
diff --git a/lib/src/layer/layer_manager.dart b/lib/src/layer/layer_manager.dart
@@ -13,7 +13,7 @@ class LayerManager {
     for (final (index, layer) in layers.indexed) {
       final source = GeoJsonSource(
         id: layer.getSourceId(index),
-        data: GeometryCollection(layer.list).toText(),
+        data: FeatureCollection(layer.list).toText(),
       );
       style.addSource(source);
       style.addLayer(layer.createStyleLayer(index));
@@ -40,12 +40,12 @@ class LayerManager {
       if (oldLayer case Layer()) {
         style.updateGeoJsonSource(
           id: layer.getSourceId(index),
-          data: GeometryCollection(layer.list).toText(),
+          data: FeatureCollection(layer.list).toText(),
         );
       } else {
         final source = GeoJsonSource(
           id: layer.getSourceId(index),
-          data: GeometryCollection(layer.list).toText(),
+          data: FeatureCollection(layer.list).toText(),
         );
         style.addSource(source);
       }
diff --git a/lib/src/layer/marker_layer.dart b/lib/src/layer/marker_layer.dart
@@ -4,10 +4,10 @@ part of 'layer.dart';
 ///
 /// {@category Layers}
 @immutable
-class MarkerLayer extends Layer<Point> {
+class MarkerLayer extends Layer<Feature<Point>> {
   /// Create a new [MarkerLayer] instance.
   const MarkerLayer({
-    required List<Point> points,
+    required List<Feature<Point>> points,
     this.iconAllowOverlap = false,
     this.iconIgnorePlacement = false,
     this.iconOptional = false,
diff --git a/lib/src/layer/polygon_layer.dart b/lib/src/layer/polygon_layer.dart
@@ -4,10 +4,10 @@ part of 'layer.dart';
 ///
 /// {@category Layers}
 @immutable
-class PolygonLayer extends Layer<Polygon> {
+class PolygonLayer extends Layer<Feature<Polygon>> {
   /// Create a new [PolygonLayer] instance.
   const PolygonLayer({
-    required List<Polygon> polygons,
+    required List<Feature<Polygon>> polygons,
     this.color = const Color(0xFF000000),
     this.outlineColor = const Color(0xFF000000),
   }) : super._(list: polygons);
diff --git a/lib/src/layer/polyline_layer.dart b/lib/src/layer/polyline_layer.dart
@@ -4,10 +4,10 @@ part of 'layer.dart';
 ///
 /// {@category Layers}
 @immutable
-class PolylineLayer extends Layer<LineString> {
+class PolylineLayer extends Layer<Feature<LineString>> {
   /// Create a new [PolylineLayer] instance.
   const PolylineLayer({
-    required List<LineString> polylines,
+    required List<Feature<LineString>> polylines,
     this.color = const Color(0xFF000000),
     this.width = 1,
     this.gapWidth = 0,
diff --git a/test/annotation/annotation_manager_test.dart b/test/annotation/annotation_manager_test.dart
@@ -34,7 +34,7 @@ void main() {
     testWidgets('add and remove layers', (tester) async {
       final manager = LayerManager(style, []);
       const layer1 = CircleLayer(
-        points: [Point(Geographic(lon: 0, lat: 0))],
+        points: [Feature(geometry: Point(Geographic(lon: 0, lat: 0)))],
       );
 
       manager.updateLayers([layer1]);
diff --git a/test/annotation/models_test.dart b/test/annotation/models_test.dart
