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 'attributionMapPlugin.dart';
|
||||||
import 'colors.dart';
|
import 'colors.dart';
|
||||||
|
import 'compassMapPlugin.dart';
|
||||||
import 'customMoment.dart';
|
import 'customMoment.dart';
|
||||||
import 'dummyMapPlugin.dart';
|
import 'dummyMapPlugin.dart';
|
||||||
import 'fireMarkType.dart';
|
import 'fireMarkType.dart';
|
||||||
|
|
@ -223,6 +224,7 @@ class _genericMapState extends State<genericMap> {
|
||||||
globals.isDevelopment
|
globals.isDevelopment
|
||||||
? new ZoomMapPluginWidget()
|
? new ZoomMapPluginWidget()
|
||||||
: new DummyMapPluginWidget(),
|
: new DummyMapPluginWidget(),
|
||||||
|
new CompassMapPluginWidget(),
|
||||||
new MarkerLayer(
|
new MarkerLayer(
|
||||||
markers: buildMarkers(
|
markers: buildMarkers(
|
||||||
mapState.status == FireMapStatus.viewFireNotification &&
|
mapState.status == FireMapStatus.viewFireNotification &&
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import 'package:flutter_redux/flutter_redux.dart';
|
||||||
import 'package:latlong2/latlong.dart';
|
import 'package:latlong2/latlong.dart';
|
||||||
|
|
||||||
import 'colors.dart';
|
import 'colors.dart';
|
||||||
|
import 'compassMapPlugin.dart';
|
||||||
import 'customBottomAppBar.dart';
|
import 'customBottomAppBar.dart';
|
||||||
import 'generated/i18n.dart';
|
import 'generated/i18n.dart';
|
||||||
import 'mainDrawer.dart';
|
import 'mainDrawer.dart';
|
||||||
|
|
@ -84,6 +85,7 @@ class MonitoredAreasPage extends StatelessWidget {
|
||||||
subdomains: ['a', 'b', 'c', 'd'],
|
subdomains: ['a', 'b', 'c', 'd'],
|
||||||
userAgentPackageName:
|
userAgentPackageName:
|
||||||
'com.example.fires_flutter'),
|
'com.example.fires_flutter'),
|
||||||
|
new CompassMapPluginWidget(),
|
||||||
new PolylineLayer(
|
new PolylineLayer(
|
||||||
polylines: view.monitoredAreas,
|
polylines: view.monitoredAreas,
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue