Add compass icon to show and reset OSM map orientation

This commit is contained in:
Ming Ming 2024-09-18 02:21:54 +08:00
parent dda79dadcc
commit a37175d92a
7 changed files with 51 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 725 B

View file

@ -107,6 +107,21 @@ class _OsmInteractiveMapState extends State<OsmInteractiveMap> {
source: Text("OpenStreetMap contributors"), source: Text("OpenStreetMap contributors"),
), ),
), ),
Align(
alignment: AlignmentDirectional.topStart,
child: Padding(
padding: EdgeInsets.fromLTRB(
8, MediaQuery.of(context).padding.top + 8, 8, 0),
child: _CompassIcon(
mapRotationRadSubject: _mapRotationRadSubject,
onTap: () {
if (_controller.camera.rotation != 0) {
_controller.rotate(0);
}
},
),
),
),
], ],
); );
} }
@ -135,6 +150,42 @@ class _OsmInteractiveMapState extends State<OsmInteractiveMap> {
final _subscriptions = <StreamSubscription>[]; final _subscriptions = <StreamSubscription>[];
} }
class _CompassIcon extends StatelessWidget {
const _CompassIcon({
required this.mapRotationRadSubject,
this.onTap,
});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: mapRotationRadSubject.stream,
initialData: mapRotationRadSubject.value,
builder: (context, snapshot) => Transform.rotate(
angle: snapshot.requireData,
child: GestureDetector(
onTap: () {
onTap?.call();
},
child: Opacity(
opacity: .8,
child: Image(
image: Theme.of(context).brightness == Brightness.light
? const AssetImage(
"packages/np_gps_map/assets/map_compass.png")
: const AssetImage(
"packages/np_gps_map/assets/map_compass_dark.png"),
),
),
),
),
);
}
final BehaviorSubject<double> mapRotationRadSubject;
final VoidCallback? onTap;
}
class _OsmDataPoint extends Marker { class _OsmDataPoint extends Marker {
_OsmDataPoint({ _OsmDataPoint({
required this.original, required this.original,