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(

lib/services/flood_station_provider.dart

@@ -1,10 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:async/async.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:latlong2/latlong.dart';
-
 import '../model/flood_station.dart';
-import '../widgets/custom_marker.dart';
 import 'api.dart';
 
 class FloodStationProvider extends ChangeNotifier {
@@ -16,17 +12,6 @@ class FloodStationProvider extends ChangeNotifier {
 
   List<FloodStation> get allStations => _allStations;
   List<FloodStation> get filteredStations => _filteredStations;
-  List<Marker> get stationsAsMarkers {
-    return allStations
-        .map<Marker>(
-          (e) => Marker(
-            alignment: Alignment.center,
-            point: LatLng(e.lat, e.long),
-            child: CustomMarker(),
-          ),
-        )
-        .toList();
-  }
 
   CancelableOperation? _filteredStationsFuture;
 

lib/widgets/custom_marker.dart

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
 
 class CustomMarker extends StatelessWidget {
-  const CustomMarker({super.key, this.label});
+  const CustomMarker({super.key, required this.onTap});
-  final String? label;
+  final void Function() onTap;
 
   @override
   Widget build(BuildContext context) {
-    return Icon(
+    return GestureDetector(
-      Icons.location_on_sharp,
+      onTap: onTap,
-      color: Theme.of(context).colorScheme.primary,
+      child: Icon(
-      size: 30,
+        Icons.location_on_sharp,
+        color: Theme.of(context).colorScheme.primary,
+        size: 30,
+      ),
     );
   }
 }