vjrj
f39bdbfaef
- 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
101 lines
3.9 KiB
Dart
101 lines
3.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_map/flutter_map.dart';
|
|
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';
|
|
import 'models/appState.dart';
|
|
import 'firesSpinner.dart';
|
|
|
|
class _ViewModel {
|
|
List<Polyline> monitoredAreas;
|
|
|
|
_ViewModel(this.monitoredAreas);
|
|
|
|
@override
|
|
bool operator ==(Object other) =>
|
|
identical(this, other) ||
|
|
other is _ViewModel &&
|
|
runtimeType == other.runtimeType &&
|
|
monitoredAreas == other.monitoredAreas;
|
|
|
|
@override
|
|
int get hashCode => monitoredAreas.hashCode;
|
|
}
|
|
|
|
class MonitoredAreasPage extends StatelessWidget {
|
|
static const String routeName = "monitoredAreasMap";
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return new StoreConnector<AppState, _ViewModel>(
|
|
distinct: true,
|
|
converter: (store) {
|
|
return new _ViewModel(store.state.monitoredAreas);
|
|
},
|
|
builder: (context, view) {
|
|
return new Scaffold(
|
|
appBar:
|
|
new AppBar(title: new Text(S.of(context).monitoredAreasTitle)),
|
|
drawer: new MainDrawer(context, MonitoredAreasPage.routeName),
|
|
bottomNavigationBar: new CustomBottomAppBar(
|
|
fabLocation: FloatingActionButtonLocation.centerDocked,
|
|
showNotch: true,
|
|
color: fires100,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
actions: <Widget>[
|
|
new Flexible(
|
|
child: new Padding(
|
|
padding: new EdgeInsets.only(left: 10.0, right: 10.0),
|
|
child: new Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
new Text(S.of(context).mapPrivacy,
|
|
style: new TextStyle(
|
|
fontStyle: FontStyle.italic,
|
|
color: Colors.black38))
|
|
])))
|
|
]),
|
|
body: !(view.monitoredAreas is List)
|
|
? new FiresSpinner()
|
|
: new Padding(
|
|
padding: new EdgeInsets.all(10.0),
|
|
child: new Column(
|
|
children: [
|
|
new Padding(
|
|
padding: new EdgeInsets.only(
|
|
top: 8.0, bottom: 8.0, left: 0.0, right: 0.0),
|
|
child: new Text(S.of(context).inGreenMonitoredAreas),
|
|
),
|
|
new Flexible(
|
|
child: new FlutterMap(
|
|
options: new MapOptions(
|
|
initialCenter: new LatLng(53.5775, 3.106111),
|
|
initialZoom: 1.0,
|
|
),
|
|
children: [
|
|
new TileLayer(
|
|
urlTemplate:
|
|
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
|
|
subdomains: ['a', 'b', 'c', 'd'],
|
|
userAgentPackageName:
|
|
'com.example.fires_flutter'),
|
|
new CompassMapPluginWidget(),
|
|
new PolylineLayer(
|
|
polylines: view.monitoredAreas,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
}
|