diff --git a/lib/pages/map_page.dart b/lib/pages/map_page.dart index c5b1d57..9a55eac 100644 --- a/lib/pages/map_page.dart +++ b/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 { return FlutterMap( mapController: mapController, options: MapOptions( + cameraConstraint: CameraConstraint.containCenter( + bounds: LatLngBounds.fromPoints(floodStationProvider.allStations + .map( + (e) => LatLng(e.lat, e.long), + ) + .toList())), initialCenter: LatLng(54.81, -4.42), initialZoom: 6, ), @@ -44,7 +52,7 @@ class _MapPageState extends State { 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 { ), ); } + + List _stationsAsMarkers(List stations) { + return stations + .map( + (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( diff --git a/lib/services/flood_station_provider.dart b/lib/services/flood_station_provider.dart index 2674adb..9c63fa1 100644 --- a/lib/services/flood_station_provider.dart +++ b/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 get allStations => _allStations; List get filteredStations => _filteredStations; - List get stationsAsMarkers { - return allStations - .map( - (e) => Marker( - alignment: Alignment.center, - point: LatLng(e.lat, e.long), - child: CustomMarker(), - ), - ) - .toList(); - } CancelableOperation? _filteredStationsFuture; diff --git a/lib/widgets/custom_marker.dart b/lib/widgets/custom_marker.dart index a7a6c4c..6ab80c8 100644 --- a/lib/widgets/custom_marker.dart +++ b/lib/widgets/custom_marker.dart @@ -1,15 +1,18 @@ import 'package:flutter/material.dart'; class CustomMarker extends StatelessWidget { - const CustomMarker({super.key, this.label}); - final String? label; + const CustomMarker({super.key, required this.onTap}); + final void Function() onTap; @override Widget build(BuildContext context) { - return Icon( - Icons.location_on_sharp, - color: Theme.of(context).colorScheme.primary, - size: 30, + return GestureDetector( + onTap: onTap, + child: Icon( + Icons.location_on_sharp, + color: Theme.of(context).colorScheme.primary, + size: 30, + ), ); } }