layer.dart

part of '../map.dart';

class MapLayerView extends StatefulWidget {
  const MapLayerView({super.key});

  @override
  State<MapLayerView> createState() => _MapLayerViewState();

  static double get reservedAttributionHeight => 100;
}

class _MapLayerViewState extends State<MapLayerView> with TickerProviderStateMixin {
  late AnimatedMapController _mapController;
  AppStore get store => LayrzState.store as AppStore;
  List<MapLayer> get layers => store.availableLayers;
  MapLayer? selectedLayer;
  final ThemedMapController _controller = ThemedMapController();
  final GlobalKey _mapKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _mapController = AnimatedMapController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    _controller.addListener(_listener);
  }

  @override
  void dispose() {
    _mapController.dispose();
    _controller.removeListener(_listener);
    super.dispose();
  }

  void _listener(ThemedMapEvent event) {
    debugPrint('layrz_theme_example/ThemedMapController() event: $event');
  }

  @override
  Widget build(BuildContext context) {
    return Layout(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Map Layers",
              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 10),
            Text(
              "We uses flutter_map package to perform map operations. You can find more information about it "
              "here: https://pub.dev/packages/flutter_map",
              style: Theme.of(context).textTheme.bodyLarge,
              maxLines: 8,
              textAlign: TextAlign.justify,
            ),
            Text(
              "But, we also have different layers support for different map providers. So, how can we support all "
              "of them? Easy! We create a wrapper! Only we provide a list of wrappers to a `ThemedMapLayer` widget "
              "and automatically it will detect which one to use, of course the widget take the first one if the "
              "default value is not provided, and automatically add the layer selector on the right-bottom corner "
              "of the map. If you don't provide a list of layers, the widget will use the default one, which is "
              "OpenStreetMap.",
              style: Theme.of(context).textTheme.bodyLarge,
              maxLines: 8,
              textAlign: TextAlign.justify,
            ),
            const SizedBox(height: 10),
            ThemedButton(
              labelText: 'PERFORMANCE TESTING',
              onTap: () async {
                debugPrint('Zooming in');
                await _mapController.animatedZoomTo(8);
                debugPrint("Waiting");
                await Future.delayed(const Duration(seconds: 1));
                debugPrint('Zooming out');
                await _mapController.animatedZoomTo(13);
                debugPrint("Waiting");
                await Future.delayed(const Duration(seconds: 1));
                debugPrint('Zooming in');
                await _mapController.animatedZoomTo(8);
                debugPrint("Waiting");
                await Future.delayed(const Duration(seconds: 1));
                debugPrint('Zooming out');
                await _mapController.animatedZoomTo(13);
                debugPrint("Done");
              },
            ),
            const SizedBox(height: 10),
            Container(
              decoration: generateContainerElevation(context: context),
              height: 600,
              clipBehavior: Clip.antiAlias,
              child: FlutterMap(
                key: _mapKey,
                mapController: _mapController.mapController,
                options: const MapOptions(
                  initialCenter: kGoldenMHeadquarters,
                  initialZoom: 13,
                  maxZoom: kMaxZoom,
                  minZoom: kMinZoom,
                ),
                children: [
                  ThemedTileLayer(
                    layer: selectedLayer,
                    controller: _controller,
                  ),

                  // MarkerLayer(
                  //   markers: [
                  //     Marker(
                  //       point: t,
                  //       width: 20,
                  //       height: 20,
                  //       child: Container(width: 20, height: 20, color: Colors.red),
                  //     ),
                  //   ],
                  // ),
                  // ThemedMapToolbar(
                  //   layers: layers,
                  //   selectedLayer: selectedLayer,
                  //   onLayerChanged: (layer) => setState(() => selectedLayer = layer),
                  //   enableGoogleStreetView: true,

                  //   mapKey: _mapKey,
                  //   additionalButtons: [
                  //     ThemedMapButton(
                  //       labelText: "My custom button",
                  //       icon: Icons.house,
                  //       onTap: () {
                  //         debugPrint('My custom button');
                  //       },
                  //     ),
                  //     ThemedMapButton(
                  //       labelText: "Beurre Gatún",
                  //       icon: Icons.abc,
                  //       onTap: () {
                  //         debugPrint('My custom button');
                  //       },
                  //     ),
                  //   ],
                  // ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}