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:
parent
14b558340d
commit
f39bdbfaef
3 changed files with 45 additions and 0 deletions
41
lib/compassMapPlugin.dart
Normal file
41
lib/compassMapPlugin.dart
Normal 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),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue