v3.0.0: Simplify External & Internal Layer Handling

example/lib/main.dart

@@ -21,7 +21,6 @@ import 'package:flutter_map_example/pages/network_tile_provider.dart';
 import 'package:flutter_map_example/pages/offline_map.dart';
 import 'package:flutter_map_example/pages/on_tap.dart';
 import 'package:flutter_map_example/pages/overlay_image.dart';
-import 'package:flutter_map_example/pages/plugin_api.dart';
 import 'package:flutter_map_example/pages/plugin_scalebar.dart';
 import 'package:flutter_map_example/pages/plugin_zoombuttons.dart';
 import 'package:flutter_map_example/pages/point_to_latlng.dart';
@@ -61,7 +60,6 @@ class MyApp extends StatelessWidget {
         AnimatedMapControllerPage.route: (context) =>
             const AnimatedMapControllerPage(),
         MarkerAnchorPage.route: (context) => const MarkerAnchorPage(),
-        PluginPage.route: (context) => const PluginPage(),
         PluginScaleBar.route: (context) => const PluginScaleBar(),
         PluginZoomButtons.route: (context) => const PluginZoomButtons(),
         OfflineMapPage.route: (context) => const OfflineMapPage(),

example/lib/pages/animated_map_controller.dart

@@ -179,14 +179,14 @@ class AnimatedMapControllerPageState extends State<AnimatedMapControllerPage>
                     zoom: 5,
                     maxZoom: 10,
                     minZoom: 3),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     urlTemplate:
                         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                     subdomains: ['a', 'b', 'c'],
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                   ),
-                  MarkerLayerOptions(markers: markers)
+                  MarkerLayer(markers: markers),
                 ],
               ),
             ),

example/lib/pages/circle.dart

@@ -37,14 +37,14 @@ class CirclePage extends StatelessWidget {
                   center: LatLng(51.5, -0.09),
                   zoom: 11,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     urlTemplate:
                         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                     subdomains: ['a', 'b', 'c'],
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                   ),
-                  CircleLayerOptions(circles: circleMarkers)
+                  CircleLayer(circles: circleMarkers),
                 ],
               ),
             ),

example/lib/pages/custom_crs/custom_crs.dart

@@ -137,8 +137,8 @@ class _CustomCrsPageState extends State<CustomCrsPage> {
                     point = proj4.Point(x: p.latitude, y: p.longitude);
                   }),
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     opacity: 1,
                     backgroundColor: Colors.transparent,
                     wmsOptions: WMSTileLayerOptions(

example/lib/pages/epsg3413_crs.dart

@@ -133,8 +133,8 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
                   zoom: 3,
                   maxZoom: maxZoom,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     opacity: 1,
                     backgroundColor: Colors.transparent,
                     wmsOptions: WMSTileLayerOptions(
@@ -146,7 +146,7 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
                       layers: ['gebco_north_polar_view'],
                     ),
                   ),
-                  OverlayImageLayerOptions(
+                  OverlayImageLayer(
                     overlayImages: [
                       OverlayImage(
                         bounds: LatLngBounds(
@@ -159,9 +159,7 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
                       )
                     ],
                   ),
-                  CircleLayerOptions(
-                    circles: circles,
-                  ),
+                  CircleLayer(circles: circles),
                 ],
               ),
             ),

example/lib/pages/epsg4326_crs.dart

@@ -29,8 +29,8 @@ class EPSG4326Page extends StatelessWidget {
                   center: LatLng(0, 0),
                   zoom: 0,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     wmsOptions: WMSTileLayerOptions(
                       crs: const Epsg4326(),
                       baseUrl: 'https://ows.mundialis.de/services/service?',

example/lib/pages/esri.dart

@@ -27,8 +27,8 @@ class EsriPage extends StatelessWidget {
                   center: LatLng(45.5231, -122.6765),
                   zoom: 13,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     urlTemplate:
                         'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',

example/lib/pages/home.dart

@@ -57,21 +57,21 @@ class HomePage extends StatelessWidget {
                   center: LatLng(51.5, -0.09),
                   zoom: 5,
                 ),
-                layers: [
-                  TileLayerOptions(
-                    urlTemplate:
-                        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-                    subdomains: ['a', 'b', 'c'],
-                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
-                  ),
-                  MarkerLayerOptions(markers: markers)
-                ],
                 nonRotatedChildren: [
                   AttributionWidget.defaultWidget(
                     source: 'OpenStreetMap contributors',
                     onSourceTapped: () {},
                   ),
                 ],
+                children: [
+                  TileLayer(
+                    urlTemplate:
+                        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    subdomains: ['a', 'b', 'c'],
+                    userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                  ),
+                  MarkerLayer(markers: markers),
+                ],
               ),
             ),
           ],

example/lib/pages/interactive_test_page.dart

@@ -17,33 +17,26 @@ class InteractiveTestPage extends StatefulWidget {
 }
 
 class _InteractiveTestPageState extends State<InteractiveTestPage> {
-  late final MapController mapController;
 
   // Enable pinchZoom and doubleTapZoomBy by default
   int flags = InteractiveFlag.pinchZoom | InteractiveFlag.doubleTapZoom;
 
-  late final StreamSubscription<MapEvent> subscription;
+  MapEvent? _latestEvent;
 
   @override
   void initState() {
     super.initState();
-    mapController = MapController();
-
-    subscription = mapController.mapEventStream.listen(onMapEvent);
-  }
-
-  @override
-  void dispose() {
-    subscription.cancel();
-
-    super.dispose();
   }
 
   void onMapEvent(MapEvent mapEvent) {
     if (mapEvent is! MapEventMove && mapEvent is! MapEventRotate) {
       // do not flood console with move and rotate events
       debugPrint(mapEvent.toString());
     }
+
+    setState(() {
+      _latestEvent = mapEvent;
+    });
   }
 
   void updateFlags(int flag) {
@@ -148,35 +141,22 @@ class _InteractiveTestPageState extends State<InteractiveTestPage> {
             Padding(
               padding: const EdgeInsets.only(top: 8, bottom: 8),
               child: Center(
-                child: StreamBuilder<MapEvent>(
-                  stream: mapController.mapEventStream,
-                  builder:
-                      (BuildContext context, AsyncSnapshot<MapEvent> snapshot) {
-                    if (!snapshot.hasData) {
-                      return const Text(
-                        'Current event: none\nSource: none',
-                        textAlign: TextAlign.center,
-                      );
-                    }
-
-                    return Text(
-                      'Current event: ${snapshot.data.runtimeType}\nSource: ${snapshot.data!.source}',
+                child: Text(
+                      'Current event: ${_latestEvent?.runtimeType ?? "none"}\nSource: ${_latestEvent?.source ?? "none"}',
                       textAlign: TextAlign.center,
-                    );
-                  },
-                ),
+                    ),
               ),
             ),
             Flexible(
               child: FlutterMap(
-                mapController: mapController,
                 options: MapOptions(
+                  onMapEvent: onMapEvent,
                   center: LatLng(51.5, -0.09),
                   zoom: 11,
                   interactiveFlags: flags,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     urlTemplate:
                         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                     subdomains: ['a', 'b', 'c'],

example/lib/pages/latlng_to_screen_point.dart

@@ -18,23 +18,14 @@ class LatLngScreenPointTestPage extends StatefulWidget {
 }
 
 class _LatLngScreenPointTestPageState extends State<LatLngScreenPointTestPage> {
-  late final MapController mapController;
-  late final StreamSubscription<MapEvent> subscription;
+  late final MapController _mapController;
 
-  CustomPoint textPos = const CustomPoint(10.0, 10.0);
+  CustomPoint _textPos = const CustomPoint(10.0, 10.0);
 
   @override
   void initState() {
     super.initState();
-    mapController = MapController();
-    subscription = mapController.mapEventStream.listen(onMapEvent);
-  }
-
-  @override
-  void dispose() {
-    subscription.cancel();
-
-    super.dispose();
+    _mapController = MapController();
   }
 
   void onMapEvent(MapEvent mapEvent) {
@@ -53,19 +44,20 @@ class _LatLngScreenPointTestPageState extends State<LatLngScreenPointTestPage> {
           Padding(
             padding: const EdgeInsets.all(8),
             child: FlutterMap(
-              mapController: mapController,
+              mapController: _mapController,
               options: MapOptions(
+                onMapEvent: onMapEvent,
                 onTap: (tapPos, latLng) {
-                  final pt1 = mapController.latLngToScreenPoint(latLng);
-                  textPos = CustomPoint(pt1!.x, pt1.y);
+                  final pt1 = _mapController.latLngToScreenPoint(latLng);
+                  _textPos = CustomPoint(pt1!.x, pt1.y);
                   setState(() {});
                 },
                 center: LatLng(51.5, -0.09),
                 zoom: 11,
                 rotation: 0,
               ),
-              layers: [
-                TileLayerOptions(
+              children: [
+                TileLayer(
                   urlTemplate:
                       'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                   subdomains: ['a', 'b', 'c'],
@@ -75,8 +67,8 @@ class _LatLngScreenPointTestPageState extends State<LatLngScreenPointTestPage> {
             ),
           ),
           Positioned(
-              left: textPos.x.toDouble(),
-              top: textPos.y.toDouble(),
+              left: _textPos.x.toDouble(),
+              top: _textPos.y.toDouble(),
               width: 20,
               height: 20,
               child: const FlutterLogo())

example/lib/pages/live_location.dart

@@ -139,14 +139,14 @@ class _LiveLocationPageState extends State<LiveLocationPage> {
                   zoom: 5,
                   interactiveFlags: interActiveFlags,
                 ),
-                layers: [
-                  TileLayerOptions(
+                children: [
+                  TileLayer(
                     urlTemplate:
                         'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                     subdomains: ['a', 'b', 'c'],
                     userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                   ),
-                  MarkerLayerOptions(markers: markers)
+                  MarkerLayer(markers: markers),
                 ],
               ),
             ),

example/lib/pages/many_markers.dart

@@ -77,14 +77,14 @@ class _ManyMarkersPageState extends State<ManyMarkersPage> {
                 zoom: 5,
                 interactiveFlags: InteractiveFlag.all - InteractiveFlag.rotate,
               ),
-              layers: [
-                TileLayerOptions(
+              children: [
+                TileLayer(
                   urlTemplate:
                       'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                   subdomains: ['a', 'b', 'c'],
                   userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                 ),
-                MarkerLayerOptions(
+                MarkerLayer(
                     markers: allMarkers.sublist(
                         0, min(allMarkers.length, _sliderVal))),
               ],