Implemented proper map popup with navigation

lib/pages/map_page.dart

@@ -8,6 +8,8 @@ import 'package:provider/provider.dart';
 import '../model/flood_station.dart';
 import '../services/flood_station_provider.dart';
 import '../widgets/custom_marker.dart';
+import '../widgets/map_popup.dart';
+import 'flood_station_page.dart';
 
 class MapPage extends StatefulWidget {
   const MapPage({super.key});
@@ -19,14 +21,15 @@ class MapPage extends StatefulWidget {
 
 class _MapPageState extends State<MapPage> {
   final mapController = MapController();
+  late FloodStationProvider _floodStationProvider;
 
   @override
   Widget build(BuildContext context) {
-    final floodStationProvider = context.watch<FloodStationProvider>();
-    if (floodStationProvider.allStations.isEmpty) {
+    _floodStationProvider = context.watch<FloodStationProvider>();
+    if (_floodStationProvider.allStations.isEmpty) {
       return Center(
         child: ElevatedButton(
-          onPressed: floodStationProvider.loadAllStations,
+          onPressed: _floodStationProvider.loadAllStations,
           child: Text('Load Map'),
         ),
       );
@@ -35,7 +38,7 @@ class _MapPageState extends State<MapPage> {
       mapController: mapController,
       options: MapOptions(
         cameraConstraint: CameraConstraint.containCenter(
-            bounds: LatLngBounds.fromPoints(floodStationProvider.allStations
+            bounds: LatLngBounds.fromPoints(_floodStationProvider.allStations
                 .map<LatLng>(
                   (e) => LatLng(e.lat, e.long),
                 )
@@ -52,7 +55,7 @@ class _MapPageState extends State<MapPage> {
               alignment: Alignment.center,
               padding: EdgeInsets.all(50),
               maxZoom: 15,
-              markers: _stationsAsMarkers(floodStationProvider.allStations),
+              markers: _stationsAsMarkers(_floodStationProvider.allStations),
               builder: _markerBuilder),
         )
       ],
@@ -91,17 +94,12 @@ class _MapPageState extends State<MapPage> {
   _markerTapped(FloodStation station) {
     showDialog(
       context: context,
-      builder: (context) {
-        return Center(
-          child: Card(
-            child: SizedBox(
-              width: 300,
-              height: 300,
-              child: Text(station.label),
-            ),
-          ),
-        );
-      },
+      builder: (context) => MapPopup(
+          station: station,
+          onShowTapped: () {
+            _floodStationProvider.selectedStation = station;
+            Navigator.of(context).pushNamed(FloodStationPage.routeName);
+          }),
     );
   }
 }