implemented map view with markers for every floodstation

lib/pages/map_page.dart

@@ -1,11 +1,74 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
+import 'package:latlong2/latlong.dart';
+import 'package:provider/provider.dart';
 
-class MapPage extends StatelessWidget {
+import '../services/flood_station_provider.dart';
+
+class MapPage extends StatefulWidget {
   const MapPage({super.key});
   static const routeName = '/map';
 
+  @override
+  State<MapPage> createState() => _MapPageState();
+}
+
+class _MapPageState extends State<MapPage> {
+  final mapController = MapController();
+
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    final floodStationProvider = context.watch<FloodStationProvider>();
+    if (floodStationProvider.allStations.isEmpty) {
+      return Center(
+        child: ElevatedButton(
+          onPressed: floodStationProvider.loadAllStations,
+          child: Text('Load Map'),
+        ),
+      );
+    }
+    return FlutterMap(
+      mapController: mapController,
+      options: MapOptions(
+        initialCenter: LatLng(54.81, -4.42),
+        initialZoom: 6,
+      ),
+      children: [
+        openStreetMapTileLayer,
+        MarkerClusterLayerWidget(
+          options: MarkerClusterLayerOptions(
+              maxClusterRadius: 45,
+              size: Size(30, 30),
+              alignment: Alignment.center,
+              padding: EdgeInsets.all(50),
+              maxZoom: 15,
+              markers: floodStationProvider.stationsAsMarkers,
+              builder: _markerBuilder),
+        )
+      ],
+    );
+  }
+
+  Widget _markerBuilder(BuildContext context, List<Marker> markers) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(20),
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
+      child: Center(
+        child: Text(
+          markers.length.toString(),
+          style: const TextStyle(color: Colors.white),
+        ),
+      ),
+    );
   }
 }
+
+TileLayer get openStreetMapTileLayer => TileLayer(
+      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+      tileProvider: CancellableNetworkTileProvider(),
+    );