feat: Renamed all the Layer to StyleLayer. (#139)

- [X] Rename all the `Layer`s to `StyleLayer`s
- [X] Rename `AnnotationLayer`s to `Layer`s
- [X] Rename `createLayer` method to `createStyleLayer`
- [X] Rename `AnnotationManager` to `LayerManager`
- [X] Rename `annotation` to `layer` folder
- [X] Rename `annotations` pages to `layers` in `example`
- [X] Rename `layers` pages to `style_layers` in `example`

Closes a task of #113

Author: gabbopalma

example/integration_test/controller_test.dart

@@ -154,7 +154,7 @@ void main() {
       // ensure no crash if a layer does not exist
       await ctrl.removeLayer('notExisting');
 
-      const layer = RasterLayer(id: 'rasterLayer', sourceId: 'source');
+      const layer = RasterStyleLayer(id: 'rasterLayer', sourceId: 'source');
       await ctrl.addLayer(layer);
       await ctrl.removeLayer(layer.id);
     });
@@ -356,7 +356,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = BackgroundLayer(id: '1', color: Colors.black);
+    const layer = BackgroundStyleLayer(id: '1', color: Colors.black);
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -365,7 +365,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = FillLayer(id: '1', sourceId: 'source1');
+    const layer = FillStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -374,7 +374,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = CircleLayer(id: '1', sourceId: 'source1');
+    const layer = CircleStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -383,7 +383,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = FillExtrusionLayer(id: '1', sourceId: 'source1');
+    const layer = FillExtrusionStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -392,7 +392,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = HeatmapLayer(id: '1', sourceId: 'source1');
+    const layer = HeatmapStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -401,7 +401,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = HillshadeLayer(id: '1', sourceId: 'source1');
+    const layer = HillshadeStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -410,7 +410,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = LineLayer(id: '1', sourceId: 'source1');
+    const layer = LineStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -419,7 +419,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = RasterLayer(id: '1', sourceId: 'source1');
+    const layer = RasterStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -428,7 +428,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = SymbolLayer(id: '1', sourceId: 'source1');
+    const layer = SymbolStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });
@@ -437,7 +437,7 @@ void main() {
     final app = App(onMapCreated: ctrlCompleter.complete);
     await tester.pumpWidget(app);
     final ctrl = await ctrlCompleter.future;
-    const layer = SymbolLayer(id: '1', sourceId: 'source1');
+    const layer = SymbolStyleLayer(id: '1', sourceId: 'source1');
     await ctrl.addLayer(layer);
     await tester.pumpAndSettle();
   });

example/integration_test/mocks.dart

@@ -1,4 +1,4 @@
 import 'package:maplibre/maplibre.dart';
 import 'package:mocktail/mocktail.dart';
 
-class MockLayer extends Mock implements Layer {}
+class MockStyleLayer extends Mock implements StyleLayer {}

example/lib/animation_page.dart

@@ -55,7 +55,7 @@ class _AnimationPageState extends State<AnimationPage> {
       GeoJsonSource(id: _sourceId, data: jsonEncode(geojson.toJson())),
     );
     await _controller.addLayer(
-      const LineLayer(
+      const LineStyleLayer(
         id: 'geojson-line',
         sourceId: _sourceId,
         paint: {'line-color': '#F00', 'line-width': 3},

example/lib/annotations_circle_page.dart

@@ -1,5 +1,3 @@
-// ignore_for_file: require_trailing_commas
-
 import 'package:flutter/material.dart';
 import 'package:maplibre/maplibre.dart';
 
@@ -13,87 +11,37 @@ class LayersCirclePage extends StatefulWidget {
   State<LayersCirclePage> createState() => _LayersCirclePageState();
 }
 
-const _layerId = 'showcaseLayer';
-const _sourceId = 'earthquakes';
-
 class _LayersCirclePageState extends State<LayersCirclePage> {
-  late final MapController _controller;
+  final _points = <Point>[
+    Point(coordinates: Position(9.17, 47.68)),
+    Point(coordinates: Position(9.17, 48)),
+    Point(coordinates: Position(9, 48)),
+    Point(coordinates: Position(9.5, 48)),
+  ];
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Circle Layer')),
+      appBar: AppBar(title: const Text('Circle Layers')),
       body: MapLibreMap(
-        options: MapOptions(
-          initCenter: Position(-152.9959, 59.8150),
-          initZoom: 9,
-        ),
-        onMapCreated: (controller) => _controller = controller,
-        onStyleLoaded: _onStyleLoaded,
+        options: MapOptions(initZoom: 7, initCenter: Position(9.17, 47.68)),
+        onEvent: (event) {
+          if (event case MapEventClick()) {
+            setState(() {
+              _points.add(Point(coordinates: event.point));
+            });
+          }
+        },
+        layers: [
+          CircleLayer(
+            points: _points,
+            color: Colors.orange.withOpacity(0.5),
+            radius: 20,
+            strokeColor: Colors.red,
+            strokeWidth: 2,
+          ),
+        ],
       ),
     );
   }
-
-  Future<void> _onStyleLoaded() async {
-    const earthquakes = GeoJsonSource(
-      id: _sourceId,
-      data:
-          'https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson',
-    );
-    await _controller.addSource(earthquakes);
-    await _controller.addLayer(_circleLayer);
-  }
 }
-
-const _circleLayer = CircleLayer(
-  id: _layerId,
-  sourceId: _sourceId,
-  paint: {
-    // Size circle radius by earthquake magnitude and zoom level
-    'circle-radius': [
-      'interpolate',
-      ['linear'],
-      ['zoom'],
-      7,
-      [
-        'interpolate',
-        ['linear'],
-        ['get', 'mag'],
-        1,
-        1,
-        6,
-        50
-      ]
-    ],
-    // Color circle by earthquake magnitude
-    'circle-color': [
-      'interpolate',
-      ['linear'],
-      ['get', 'mag'],
-      1,
-      'rgba(33,102,172,0)',
-      2,
-      'rgb(103,169,207)',
-      3,
-      'rgb(209,229,240)',
-      4,
-      'rgb(253,219,199)',
-      5,
-      'rgb(239,138,98)',
-      6,
-      'rgb(178,24,43)'
-    ],
-    'circle-stroke-color': 'white',
-    'circle-stroke-width': 1,
-    // Transition from heatmap to circle layer by zoom level
-    'circle-opacity': [
-      'interpolate',
-      ['linear'],
-      ['zoom'],
-      7,
-      0,
-      8,
-      1
-    ]
-  },
-);

example/lib/layers_circle_page.dart

@@ -1,19 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as http;
 import 'package:maplibre/maplibre.dart';
-import 'package:maplibre_example/layers_symbol_page.dart';
+import 'package:maplibre_example/style_layers_symbol_page.dart';
 
 @immutable
-class AnnotationsMarkerPage extends StatefulWidget {
-  const AnnotationsMarkerPage({super.key});
+class LayersMarkerPage extends StatefulWidget {
+  const LayersMarkerPage({super.key});
 
-  static const location = '/annotations/marker';
+  static const location = '/layers/marker';
 
   @override
-  State<AnnotationsMarkerPage> createState() => _AnnotationsMarkerPageState();
+  State<LayersMarkerPage> createState() => _LayersMarkerPageState();
 }
 
-class _AnnotationsMarkerPageState extends State<AnnotationsMarkerPage> {
+class _LayersMarkerPageState extends State<LayersMarkerPage> {
   final _points = <Point>[
     Point(coordinates: Position(9.17, 47.68)),
     Point(coordinates: Position(9.17, 48)),
@@ -27,7 +27,7 @@ class _AnnotationsMarkerPageState extends State<AnnotationsMarkerPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Marker Annotations')),
+      appBar: AppBar(title: const Text('Marker Layers')),
       body: MapLibreMap(
         options: MapOptions(initZoom: 7, initCenter: Position(9.17, 47.68)),
         onEvent: (event) async {
@@ -37,7 +37,7 @@ class _AnnotationsMarkerPageState extends State<AnnotationsMarkerPage> {
             case MapEventStyleLoaded():
               // add marker image to map
               final response =
-                  await http.get(Uri.parse(LayersSymbolPage.imageUrl));
+                  await http.get(Uri.parse(StyleLayersSymbolPage.imageUrl));
               final bytes = response.bodyBytes;
               await _controller.addImage('marker', bytes);
               setState(() {
@@ -54,7 +54,7 @@ class _AnnotationsMarkerPageState extends State<AnnotationsMarkerPage> {
           }
         },
         layers: [
-          MarkerAnnotationLayer(
+          MarkerLayer(
             points: _points,
             textField: 'Marker',
             textAllowOverlap: true,

example/lib/annotations_marker_page.dart renamed to example/lib/layers_marker_page.dart

@@ -4,16 +4,16 @@ import 'package:flutter/material.dart';
 import 'package:maplibre/maplibre.dart';
 
 @immutable
-class AnnotationsMixedPage extends StatefulWidget {
-  const AnnotationsMixedPage({super.key});
+class LayersMixedPage extends StatefulWidget {
+  const LayersMixedPage({super.key});
 
-  static const location = '/annotations/mixed';
+  static const location = '/layers/mixed';
 
   @override
-  State<AnnotationsMixedPage> createState() => _AnnotationsMixedPageState();
+  State<LayersMixedPage> createState() => _LayersMixedPageState();
 }
 
-class _AnnotationsMixedPageState extends State<AnnotationsMixedPage> {
+class _LayersMixedPageState extends State<LayersMixedPage> {
   final _random = Random.secure();
   final _circlePoints = <Point>[
     Point(coordinates: Position(9.17, 47.68)),
@@ -22,12 +22,12 @@ class _AnnotationsMixedPageState extends State<AnnotationsMixedPage> {
     Point(coordinates: Position(9.5, 48)),
   ];
   Color _circleColor = Colors.orange.withOpacity(0.5);
-  PolylineAnnotationLayer? _polylineLayer;
+  PolylineLayer? _polylineLayer;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Mixed Annotations')),
+      appBar: AppBar(title: const Text('Mixed Layers')),
       body: Column(
         children: [
           Padding(
@@ -53,7 +53,7 @@ class _AnnotationsMixedPageState extends State<AnnotationsMixedPage> {
                   onPressed: () {
                     setState(() {
                       if (_polylineLayer == null) {
-                        _polylineLayer = PolylineAnnotationLayer(
+                        _polylineLayer = PolylineLayer(
                           polylines: [
                             LineString(
                               coordinates: [
@@ -89,14 +89,14 @@ class _AnnotationsMixedPageState extends State<AnnotationsMixedPage> {
                 }
               },
               layers: [
-                CircleAnnotationLayer(
+                CircleLayer(
                   points: _circlePoints,
                   color: _circleColor,
                   radius: 20,
                   strokeColor: Colors.red,
                   strokeWidth: 2,
                 ),
-                if (_polylineLayer case final AnnotationLayer layer) layer,
+                if (_polylineLayer case final Layer layer) layer,
               ],
             ),
           ),