add Strong Map Styling

This commit is contained in:
Freek van de Ven 2021-09-30 12:34:43 +02:00
parent 54fa43ebbf
commit b9a867eaca
6 changed files with 161 additions and 70 deletions

View file

@ -137,7 +137,7 @@ linter:
prefer_equal_for_default_values: true
prefer_expression_function_bodies: false
prefer_final_fields: true
prefer_final_in_for_each: true
prefer_final_in_for_each: false
prefer_final_locals: false
prefer_final_parameters: false
prefer_for_elements_to_map_fromIterable: true

View file

@ -137,7 +137,7 @@ linter:
prefer_equal_for_default_values: true
prefer_expression_function_bodies: false
prefer_final_fields: true
prefer_final_in_for_each: true
prefer_final_in_for_each: false
prefer_final_locals: false
prefer_final_parameters: false
prefer_for_elements_to_map_fromIterable: true

View file

@ -34,6 +34,22 @@ class _TrackTraceDemoState extends State<TrackTraceDemo> {
),
),
body: GoogleTrackTraceMap(
mapStylingTheme: GoogleTrackTraceMapTheme(
themes: [
GoogleMapThemeFeature(
featureType: 'poi',
stylers: [
{'visibility': 'off'},
],
),
GoogleMapThemeFeature(
featureType: 'transit',
stylers: [
{'visibility': 'off'},
],
),
],
),
startPosition: const Marker(
markerId: MarkerId('Start locatie'),
position: LatLng(52.356057, 4.897540),
@ -43,15 +59,15 @@ class _TrackTraceDemoState extends State<TrackTraceDemo> {
position: LatLng(52.364709, 4.877157),
),
googleAPIKey: 'AIzaSyDaxZX8TeQeVf5tW-D6A66WLl20arbWV6c',
travelMode: TravelMode.bicycling,
mapType: MapType.satellite,
travelMode: TravelMode.walking,
mapType: MapType.normal,
routeUpdateInterval: 60,
timerPrecision: TimePrecision.everySecond,
zoomGesturesEnabled: true,
line: const Polyline(
polylineId: PolylineId('test route'),
color: Colors.purple,
width: 5,
color: Color(0xFFFF7884),
width: 3,
),
onMapCreated: (ctr) => {
controller = ctr,

View file

@ -17,3 +17,4 @@ export 'package:google_maps_flutter/google_maps_flutter.dart'
part 'src/controller.dart';
part 'src/directions_repository.dart';
part 'src/google_map.dart';
part 'src/google_map_theme.dart';

View file

@ -19,8 +19,7 @@ class GoogleTrackTraceMap extends StatefulWidget {
this.mapToolbarEnabled = false,
this.mapType = MapType.normal,
this.buildingsEnabled = false,
this.mapMarkations =
'[{"featureType": "poi","stylers": [{"visibility": "off"}]}]',
this.mapStylingTheme,
this.line,
}) : super(key: key);
@ -47,8 +46,7 @@ class GoogleTrackTraceMap extends StatefulWidget {
final bool mapToolbarEnabled;
final bool buildingsEnabled;
final MapType mapType;
final String mapMarkations;
final GoogleTrackTraceMapTheme? mapStylingTheme;
final String googleAPIKey;
@ -82,7 +80,9 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
Widget build(BuildContext context) {
return GoogleMap(
initialCameraPosition: calculateCameraPosition(
controller.start.position, controller.end.position,),
controller.start.position,
controller.end.position,
),
onMapCreated: _onMapCreated,
compassEnabled: widget.compassEnabled,
zoomControlsEnabled: widget.zoomControlsEnabled,
@ -100,7 +100,8 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
? widget.line!.copyWith(
pointsParam: controller.route!.line
.map((PointLatLng e) => LatLng(e.latitude, e.longitude))
.toList(),)
.toList(),
)
: Polyline(
// default PolyLine if none is provided
polylineId: const PolylineId('track&trace route'),
@ -110,7 +111,8 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
.map((PointLatLng e) => LatLng(e.latitude, e.longitude))
.toList(),
),
},);
},
);
}
void _onChange() {
@ -120,7 +122,14 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
void _onMapCreated(GoogleMapController ctr) {
if (mounted) {
controller.mapController = ctr;
ctr.setMapStyle(widget.mapMarkations); // move to dart json file
if (widget.mapStylingTheme != null) {
ctr.setMapStyle(widget.mapStylingTheme!.getJson());
} else {
// No theme provided so switching to default
ctr.setMapStyle(
'[{"featureType": "poi","stylers": [{"visibility": "off"}]}]',
);
}
}
}
@ -150,7 +159,8 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
max(pointA.longitude, pointB.longitude),
),
),
50,);
50,
);
}
void startRouteUpdateTimer() {
@ -170,13 +180,14 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
controller.route = TrackTraceRoute(
controller.route!.duration - updateInterval,
controller.route!.distance,
controller.route!.line,);
controller.route!.line,
);
}
});
}
}
void calculateRoute(){
void calculateRoute() {
DirectionsRepository() // TODO(freek): refactor this away
.getDirections(
origin: controller.start.position,
@ -184,17 +195,26 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
mode: widget.travelMode,
key: widget.googleAPIKey,
)
.then((value) => {
controller.route = TrackTraceRoute(value.totalDuration,
value.totalDistance, value.polylinePoints,),
.then(
(value) => {
controller.route = TrackTraceRoute(
value.totalDuration,
value.totalDistance,
value.polylinePoints,
),
if (controller.mapController != null)
{
controller.mapController!.moveCamera(moveCameraToCenter(
controller.start.position, controller.end.position,),),
controller.mapController!.moveCamera(
moveCameraToCenter(
controller.start.position,
controller.end.position,
),
),
},
setState(() {
lastRouteUpdate = DateTime.now();
})
},);
},
);
}
}

View file

@ -0,0 +1,54 @@
part of google_track_trace;
/// Styling object for the Google maps Style
///
/// Contains a List of features with stylers applied to them
/// Full documentation on all the possible style:
/// https://developers.google.com/maps/documentation/javascript/style-reference
/// ```dart
/// GoogleTrackTraceMapTheme(
/// themes: [
/// GoogleMapThemeFeature(
/// featureType: 'poi',
/// stylers: [
/// {'visibility': 'off'},
/// ],
/// ),
/// ],
/// ),
/// ```
class GoogleTrackTraceMapTheme {
GoogleTrackTraceMapTheme({
required this.themes,
});
final List<GoogleMapThemeFeature> themes;
String getJson() {
var sb = StringBuffer('[');
for (var property in themes) {
sb..write(jsonEncode(property.toJson()))
..write(',');
}
sb.write(']');
return sb.toString();
}
}
class GoogleMapThemeFeature {
GoogleMapThemeFeature({
required this.stylers,
this.featureType,
this.elementType,
});
final String? featureType;
final String? elementType;
final List<Map<String, String>> stylers;
Map toJson() {
return {
if(featureType != null) 'featureType': featureType,
if(elementType != null) 'elementType': elementType,
'stylers': stylers,
};
}
}