Reworked layers mechanism

example/lib/pages/custom_crs/custom_crs.dart

@@ -140,7 +140,17 @@ class _CustomCrsPageState extends State<CustomCrsPage> {
  point = proj4.Point(x: p.latitude, y: p.longitude);
  }),
  ),
- nonRotatedChildren: [
+ children: [
+ TileLayer(
+ wmsOptions: WMSTileLayerOptions(
+ crs: epsg3413CRS,
+ transparent: true,
+ format: 'image/jpeg',
+ baseUrl:
+ 'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
+ layers: const ['gebco_north_polar_view'],
+ ),
+ ),
  RichAttributionWidget(
  popupInitialDisplayDuration: const Duration(seconds: 5),
  attributions: [
@@ -155,23 +165,6 @@ class _CustomCrsPageState extends State<CustomCrsPage> {
  ],
  ),
  ],
- children: [
- Opacity(
- opacity: 1,
- child: TileLayer(
- backgroundColor: Colors.transparent,
- wmsOptions: WMSTileLayerOptions(
- // Set the WMS layer's CRS
- crs: epsg3413CRS,
- transparent: true,
- format: 'image/jpeg',
- baseUrl:
- 'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
- layers: const ['gebco_north_polar_view'],
- ),
- ),
- ),
- ],
  ),
  ),
  ],

example/lib/pages/epsg3413_crs.dart

@@ -136,34 +136,15 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
  initialZoom: 3,
  maxZoom: maxZoom,
  ),
- nonRotatedChildren: [
- RichAttributionWidget(
- popupInitialDisplayDuration: const Duration(seconds: 5),
- attributions: [
- TextSourceAttribution(
- 'Imagery reproduced from the GEBCO_2022 Grid, GEBCO Compilation Group (2022) GEBCO 2022 Grid (doi:10.5285/e0f0bb80-ab44-2739-e053-6c86abc0289c)',
- onTap: () => launchUrl(
- Uri.parse(
- 'https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/#polar',
- ),
- ),
- ),
- ],
- ),
- ],
  children: [
- Opacity(
- opacity: 1,
- child: TileLayer(
- backgroundColor: Colors.transparent,
- wmsOptions: WMSTileLayerOptions(
- crs: epsg3413CRS,
- transparent: true,
- format: 'image/jpeg',
- baseUrl:
- 'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
- layers: const ['gebco_north_polar_view'],
- ),
+ TileLayer(
+ wmsOptions: WMSTileLayerOptions(
+ crs: epsg3413CRS,
+ transparent: true,
+ format: 'image/jpeg',
+ baseUrl:
+ 'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
+ layers: const ['gebco_north_polar_view'],
  ),
  ),
  OverlayImageLayer(
@@ -180,6 +161,19 @@ class _EPSG3413PageState extends State<EPSG3413Page> {
  ],
  ),
  CircleLayer(circles: circles),
+ RichAttributionWidget(
+ popupInitialDisplayDuration: const Duration(seconds: 5),
+ attributions: [
+ TextSourceAttribution(
+ 'Imagery reproduced from the GEBCO_2022 Grid, GEBCO Compilation Group (2022) GEBCO 2022 Grid (doi:10.5285/e0f0bb80-ab44-2739-e053-6c86abc0289c)',
+ onTap: () => launchUrl(
+ Uri.parse(
+ 'https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/#polar',
+ ),
+ ),
+ ),
+ ],
+ ),
  ],
  ),
  ),

example/lib/pages/home.dart

@@ -99,88 +99,73 @@ class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
- appBar: AppBar(title: const Text('Home')),
+ //appBar: AppBar(title: const Text('Home')),
  drawer: buildDrawer(context, HomePage.route),
- body: Padding(
- padding: const EdgeInsets.all(8),
- child: Column(
- children: [
- const Padding(
- padding: EdgeInsets.only(top: 8, bottom: 8),
- child: Text('This is a map that is showing (51.5, -0.9).'),
+ body: Stack(
+ children: [
+ FlutterMap(
+ options: MapOptions(
+ initialCenter: const LatLng(51.5, -0.09),
+ initialZoom: 5,
+ cameraConstraint: CameraConstraint.contain(
+ bounds: LatLngBounds(
+ const LatLng(-90, -180),
+ const LatLng(90, 180),
+ ),
+ ),
  ),
- Flexible(
- child: FlutterMap(
- options: MapOptions(
- initialCenter: const LatLng(51.5, -0.09),
- initialZoom: 5,
- cameraConstraint: CameraConstraint.contain(
- bounds: LatLngBounds(
- const LatLng(-90, -180),
- const LatLng(90, 180),
+ children: [
+ TileLayer(
+ urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+ ),
+ RichAttributionWidget(
+ popupInitialDisplayDuration: const Duration(seconds: 5),
+ animationConfig: const ScaleRAWA(),
+ showFlutterMapAttribution: false,
+ attributions: [
+ TextSourceAttribution(
+ 'OpenStreetMap contributors',
+ onTap: () => launchUrl(
+ Uri.parse('https://openstreetmap.org/copyright'),
  ),
  ),
- ),
- nonRotatedChildren: [
- RichAttributionWidget(
- popupInitialDisplayDuration: const Duration(seconds: 5),
- animationConfig: const ScaleRAWA(),
- attributions: [
- TextSourceAttribution(
- 'OpenStreetMap contributors',
- onTap: () => launchUrl(
- Uri.parse('https://openstreetmap.org/copyright'),
- ),
- ),
- const TextSourceAttribution(
- 'This attribution is the same throughout this app, except where otherwise specified',
- prependCopyright: false,
- ),
- ],
+ const TextSourceAttribution(
+ 'This attribution is the same throughout this app, except where otherwise specified',
+ prependCopyright: false,
  ),
  ],
- children: [
- TileLayer(
- urlTemplate:
- 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- userAgentPackageName: 'dev.fleaflet.flutter_map.example',
- ),
- const MarkerLayer(
- markers: [
- Marker(
- width: 80,
- height: 80,
- point: LatLng(51.5, -0.09),
- child: FlutterLogo(
- textColor: Colors.blue,
- key: ObjectKey(Colors.blue),
- ),
- ),
- Marker(
- width: 80,
- height: 80,
- point: LatLng(53.3498, -6.2603),
- child: FlutterLogo(
- textColor: Colors.green,
- key: ObjectKey(Colors.green),
- ),
- ),
- Marker(
- width: 80,
- height: 80,
- point: LatLng(48.8566, 2.3522),
- child: FlutterLogo(
- textColor: Colors.purple,
- key: ObjectKey(Colors.purple),
- ),
+ ),
+ ],
+ ),
+ PositionedDirectional(
+ start: 16,
+ top: 16,
+ child: SafeArea(
+ child: Container(
+ decoration: BoxDecoration(
+ color: Theme.of(context).colorScheme.background,
+ borderRadius: BorderRadius.circular(999),
+ ),
+ padding: const EdgeInsets.all(8),
+ child: Row(
+ children: [
+ Builder(
+ builder: (context) => IconButton(
+ onPressed: () => Scaffold.of(context).openDrawer(),
+ icon: const Icon(Icons.menu),
  ),
- ],
- ),
- ],
+ ),
+ const SizedBox(width: 8),
+ Image.asset('assets/ProjectIcon.png',
+ height: 32, width: 32),
+ const SizedBox(width: 8),
+ ],
+ ),
  ),
  ),
- ],
- ),
+ )
+ ],
  ),
  );
  }

example/lib/pages/map_inside_listview.dart

@@ -26,21 +26,19 @@ class MapInsideListViewPage extends StatelessWidget {
  initialCenter: LatLng(51.5, -0.09),
  initialZoom: 5,
  ),
- nonRotatedChildren: const [
- FlutterMapZoomButtons(
- minZoom: 4,
- maxZoom: 19,
- mini: true,
- padding: 10,
- alignment: Alignment.bottomLeft,
- ),
- ],
  children: [
  TileLayer(
  urlTemplate:
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
  ),
+ const FlutterMapZoomButtons(
+ minZoom: 4,
+ maxZoom: 19,
+ mini: true,
+ padding: 10,
+ alignment: Alignment.bottomLeft,
+ ),
  ],
  ),
  ),

example/lib/pages/overlay_image.dart

@@ -8,30 +8,28 @@ class OverlayImagePage extends StatelessWidget {
 
  const OverlayImagePage({Key? key}) : super(key: key);
 
+ static final _overlayImages = [
+ OverlayImage(
+ bounds: LatLngBounds(
+ const LatLng(51.5, -0.09),
+ const LatLng(48.8566, 2.3522),
+ ),
+ opacity: 0.8,
+ imageProvider: const NetworkImage(
+ 'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
+ ),
+ const RotatedOverlayImage(
+ topLeftCorner: LatLng(53.377, -2.999),
+ bottomLeftCorner: LatLng(52.503, -1.868),
+ bottomRightCorner: LatLng(53.475, 0.275),
+ opacity: 0.8,
+ imageProvider: NetworkImage(
+ 'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600'),
+ ),
+ ];
+
  @override
  Widget build(BuildContext context) {
- const topLeftCorner = LatLng(53.377, -2.999);
- const bottomRightCorner = LatLng(53.475, 0.275);
- const bottomLeftCorner = LatLng(52.503, -1.868);
-
- final overlayImages = <BaseOverlayImage>[
- OverlayImage(
- bounds: LatLngBounds(
- const LatLng(51.5, -0.09),
- const LatLng(48.8566, 2.3522),
- ),
- opacity: 0.8,
- imageProvider: const NetworkImage(
- 'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600')),
- RotatedOverlayImage(
- topLeftCorner: topLeftCorner,
- bottomLeftCorner: bottomLeftCorner,
- bottomRightCorner: bottomRightCorner,
- opacity: 0.8,
- imageProvider: const NetworkImage(
- 'https://images.pexels.com/photos/231009/pexels-photo-231009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300&w=600')),
- ];
-
  return Scaffold(
  appBar: AppBar(title: const Text('Overlay Image')),
  drawer: buildDrawer(context, route),
@@ -55,19 +53,19 @@ class OverlayImagePage extends StatelessWidget {
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
  ),
- OverlayImageLayer(overlayImages: overlayImages),
+ OverlayImageLayer(overlayImages: _overlayImages),
  const MarkerLayer(
  markers: [
  Marker(
- point: topLeftCorner,
+ point: LatLng(53.377, -2.999),
  child: _Circle(color: Colors.redAccent, label: "TL"),
  ),
  Marker(
- point: bottomLeftCorner,
+ point: LatLng(52.503, -1.868),
  child: _Circle(color: Colors.redAccent, label: "BL"),
  ),
  Marker(
- point: bottomRightCorner,
+ point: LatLng(53.475, 0.275),
  child: _Circle(color: Colors.redAccent, label: "BR"),
  ),
  ],
@@ -86,19 +84,19 @@ class _Circle extends StatelessWidget {
  final String label;
  final Color color;
 
- const _Circle({Key? key, required this.label, required this.color})
- : super(key: key);
+ const _Circle({required this.label, required this.color});
 
  @override
  Widget build(BuildContext context) {
  return DecoratedBox(
- decoration: BoxDecoration(color: color, shape: BoxShape.circle),
- child: Center(
- child: Text(
- label,
- style: const TextStyle(
- fontWeight: FontWeight.bold, color: Colors.white),
- ),
- ));
+ decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+ child: Center(
+ child: Text(
+ label,
+ style:
+ const TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
+ ),
+ ),
+ );
  }
 }