refactored code to work with simple popup when marker is clicked

lib/pages/map_page.dart

@@ -5,7 +5,9 @@ import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
 import 'package:latlong2/latlong.dart';
 import 'package:provider/provider.dart';
 
+import '../model/flood_station.dart';
 import '../services/flood_station_provider.dart';
+import '../widgets/custom_marker.dart';
 
 class MapPage extends StatefulWidget {
   const MapPage({super.key});
@@ -32,6 +34,12 @@ class _MapPageState extends State<MapPage> {
     return FlutterMap(
       mapController: mapController,
       options: MapOptions(
+        cameraConstraint: CameraConstraint.containCenter(
+            bounds: LatLngBounds.fromPoints(floodStationProvider.allStations
+                .map<LatLng>(
+                  (e) => LatLng(e.lat, e.long),
+                )
+                .toList())),
         initialCenter: LatLng(54.81, -4.42),
         initialZoom: 6,
       ),
@@ -44,7 +52,7 @@ class _MapPageState extends State<MapPage> {
               alignment: Alignment.center,
               padding: EdgeInsets.all(50),
               maxZoom: 15,
-              markers: floodStationProvider.stationsAsMarkers,
+              markers: _stationsAsMarkers(floodStationProvider.allStations),
               builder: _markerBuilder),
         )
       ],
@@ -65,6 +73,37 @@ class _MapPageState extends State<MapPage> {
       ),
     );
   }
+
+  List<Marker> _stationsAsMarkers(List<FloodStation> stations) {
+    return stations
+        .map<Marker>(
+          (station) => Marker(
+            alignment: Alignment.center,
+            point: LatLng(station.lat, station.long),
+            child: CustomMarker(
+              onTap: () => _markerTapped(station),
+            ),
+          ),
+        )
+        .toList();
+  }
+
+  _markerTapped(FloodStation station) {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return Center(
+          child: Card(
+            child: SizedBox(
+              width: 300,
+              height: 300,
+              child: Text(station.label),
+            ),
+          ),
+        );
+      },
+    );
+  }
 }
 
 TileLayer get openStreetMapTileLayer => TileLayer(