feat: add compass button to reset map rotation to north

- Add new CompassMapPluginWidget for map north alignment control
- Position compass button at top-right of maps
- Reset rotation to 0° while maintaining center and zoom level
- Improve UX by allowing users to easily return to north orientation
- Integrate compass into both genericMap and monitoredAreas pages
This commit is contained in:
vjrj 2026-03-06 08:49:45 +01:00
parent 14b558340d
commit f39bdbfaef
3 changed files with 45 additions and 0 deletions

41
lib/compassMapPlugin.dart Normal file
View file

@ -0,0 +1,41 @@
import 'package:comunes_flutter/comunes_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
/// Compass button widget for resetting map rotation to north
class CompassMapPluginWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) =>
Stack(fit: StackFit.expand, children: <Widget>[
Positioned(
top: 10.0,
right: 10.0,
child: new CenteredRow(
children: <Widget>[
new Column(
children: <Widget>[
_compassButton(context),
],
)
],
),
)
]));
}
FloatingActionButton _compassButton(BuildContext context) {
return FloatingActionButton(
backgroundColor: Colors.black26,
mini: true,
heroTag: 'compass_button',
onPressed: () {
final controller = MapController.of(context);
// Reset rotation to 0 (north) while keeping center and zoom
controller.rotate(0);
},
child: Icon(Icons.explore),
);
}
}

View file

@ -10,6 +10,7 @@ import 'package:share_plus/share_plus.dart';
import 'attributionMapPlugin.dart';
import 'colors.dart';
import 'compassMapPlugin.dart';
import 'customMoment.dart';
import 'dummyMapPlugin.dart';
import 'fireMarkType.dart';
@ -223,6 +224,7 @@ class _genericMapState extends State<genericMap> {
globals.isDevelopment
? new ZoomMapPluginWidget()
: new DummyMapPluginWidget(),
new CompassMapPluginWidget(),
new MarkerLayer(
markers: buildMarkers(
mapState.status == FireMapStatus.viewFireNotification &&

View file

@ -4,6 +4,7 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:latlong2/latlong.dart';
import 'colors.dart';
import 'compassMapPlugin.dart';
import 'customBottomAppBar.dart';
import 'generated/i18n.dart';
import 'mainDrawer.dart';
@ -84,6 +85,7 @@ class MonitoredAreasPage extends StatelessWidget {
subdomains: ['a', 'b', 'c', 'd'],
userAgentPackageName:
'com.example.fires_flutter'),
new CompassMapPluginWidget(),
new PolylineLayer(
polylines: view.monitoredAreas,
)