import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:map_controller/map_controller.dart';

class _MapPageState extends State<MapPage> {
  MapController mapController;
  StatefulMapController statefulMapController;
  StreamSubscription<StatefulMapControllerStateChange> sub;

  @override
  void initState() {
    // intialize the controllers
    mapController = MapController();
    statefulMapController = StatefulMapController(mapController: mapController);

    // wait for the controller to be ready before using it
    statefulMapController.onReady.then((_) => print("The map controller is ready")));

    /// [Important] listen to the changefeed to rebuild the map on changes:
    /// this will rebuild the map when for example addMarker or any method 
    /// that mutates the map assets is called
    sub = statefulMapController.changeFeed.listen((change) => setState(() {}));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Stack(children: <Widget>[
        FlutterMap(
          mapController: mapController,
          options: MapOptions(center: LatLng(48.853831, 2.348722), zoom: 11.0),
          layers: [
            MarkerLayerOptions(markers: statefulMapController.markers),
            PolylineLayerOptions(polylines: statefulMapController.lines),
            PolygonLayerOptions(polygons: statefulMapController.polygons)
          ],
        ),
        // ...
      ])),
    );
  }

  @override
  void dispose() {
    sub.cancel();
    super.dispose();
  }
}

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

statefulMapController.addStatefulMarker(
   name: "some marker",
   statefulMarker: StatefulMarker(
      height: 80.0,
      width: 120.0,
      state: <String, dynamic>{"showText": false},
      point: LatLng(48.853831, 2.348722),
      builder: (BuildContext context, Map<String, dynamic> state) {
         Widget w;
         final markerIcon = IconButton(
            icon: const Icon(Icons.location_on),
            onPressed: () => statefulMapController.mutateMarker(
                  name: "some marker",
                  property: "showText",
                  value: !(state["showText"] as bool)));
         if (state["showText"] == true) {
            w = Column(children: <Widget>[
            markerIcon,
            Container(
                  color: Colors.white,
                  child: Padding(
                     padding: const EdgeInsets.all(5.0),
                     child: Text(place.name, textScaleFactor: 1.3))),
            ]);
         } else {
            w = markerIcon;
         }
         return w;
      })
   );

@override
void initState() {
   statefulMapController.onReady.then((_) {
      setState((_) =>_ready = true);
   });
   super.initState();
}

statefulMapController.onReady.then((_) {
    statefulMapController.changeFeed.listen((change) => setState(() {}));
   });
}

void loadData() async {
  print("Loading geojson data");
  final data = await rootBundle.loadString('assets/airports.geojson');
  await statefulMapController.fromGeoJson(data,
    markerIcon: Icon(Icons.local_airport), verbose: true);
}

@override
void initState() {
  mapController = MapController();
  statefulMapController = StatefulMapController(mapController: mapController);
  statefulMapController.onReady.then((_) => loadData());
  sub = statefulMapController.changeFeed.listen((change) => setState(() {}));
  super.initState();
}

FlutterMap(
   mapController: mapController,
   options: MapOptions(
      center: LatLng(48.853831, 2.348722), zoom: 11.0),
   layers: [
      // Use the map controller's tile layer
      statefulMapController.tileLayer,
      MarkerLayerOptions(markers: statefulMapController.markers),
      // ...
   ],
)

statefulMapController.switchTileLayer(TileLayerType.monochrome);

TileLayerType.normal
TileLayerType.topography
TileLayerType.monochrome
TileLayerType.hike

Stack(children: <Widget>[
   FlutterMap(
      mapController: mapController,
      options: MapOptions(center: LatLng(48.853831, 2.348722), zoom: 11.0),
      layers: [
      statefulMapController.tileLayer,
      MarkerLayerOptions(markers: statefulMapController.markers),
      ],
   ),
   Positioned(
      top: 15.0,
      right: 15.0,
      child: TileLayersBar(controller: statefulMapController))
])