From b9a867eacaa8268b9582035918b5f474da161466 Mon Sep 17 00:00:00 2001 From: Freek van de Ven Date: Thu, 30 Sep 2021 12:34:43 +0200 Subject: [PATCH] add Strong Map Styling --- analysis_options.yaml | 2 +- example/analysis_options.yaml | 2 +- example/lib/main.dart | 24 +++++- lib/google_track_trace.dart | 1 + lib/src/google_map.dart | 148 +++++++++++++++++++--------------- lib/src/google_map_theme.dart | 54 +++++++++++++ 6 files changed, 161 insertions(+), 70 deletions(-) create mode 100644 lib/src/google_map_theme.dart diff --git a/analysis_options.yaml b/analysis_options.yaml index 9f90a2f..613a7f7 100644 --- a/analysis_options.yaml +++ b/analysis_options.yaml @@ -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 diff --git a/example/analysis_options.yaml b/example/analysis_options.yaml index 1f10faa..f4b801d 100644 --- a/example/analysis_options.yaml +++ b/example/analysis_options.yaml @@ -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 diff --git a/example/lib/main.dart b/example/lib/main.dart index 0e28a7b..815fcb1 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -34,6 +34,22 @@ class _TrackTraceDemoState extends State { ), ), 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 { 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, diff --git a/lib/google_track_trace.dart b/lib/google_track_trace.dart index cbf23b1..5c5e879 100644 --- a/lib/google_track_trace.dart +++ b/lib/google_track_trace.dart @@ -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'; diff --git a/lib/src/google_map.dart b/lib/src/google_map.dart index 0ca37c1..8101661 100644 --- a/lib/src/google_map.dart +++ b/lib/src/google_map.dart @@ -19,10 +19,9 @@ 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); + }) : super(key: key); /// Callback method for when the map is ready to be used. /// @@ -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; @@ -81,36 +79,40 @@ class _GoogleTrackTraceMapState extends State { @override Widget build(BuildContext context) { return GoogleMap( - initialCameraPosition: calculateCameraPosition( - controller.start.position, controller.end.position,), - onMapCreated: _onMapCreated, - compassEnabled: widget.compassEnabled, - zoomControlsEnabled: widget.zoomControlsEnabled, - zoomGesturesEnabled: widget.zoomGesturesEnabled, - mapToolbarEnabled: widget.mapToolbarEnabled, - mapType: widget.mapType, - buildingsEnabled: widget.buildingsEnabled, - markers: { - controller.start, - controller.end, - }, - polylines: { - if (controller.route != null) - (widget.line != null) - ? widget.line!.copyWith( - pointsParam: controller.route!.line - .map((PointLatLng e) => LatLng(e.latitude, e.longitude)) - .toList(),) - : Polyline( - // default PolyLine if none is provided - polylineId: const PolylineId('track&trace route'), - color: Theme.of(context).primaryColor, - width: 4, - points: controller.route!.line - .map((PointLatLng e) => LatLng(e.latitude, e.longitude)) - .toList(), - ), - },); + initialCameraPosition: calculateCameraPosition( + controller.start.position, + controller.end.position, + ), + onMapCreated: _onMapCreated, + compassEnabled: widget.compassEnabled, + zoomControlsEnabled: widget.zoomControlsEnabled, + zoomGesturesEnabled: widget.zoomGesturesEnabled, + mapToolbarEnabled: widget.mapToolbarEnabled, + mapType: widget.mapType, + buildingsEnabled: widget.buildingsEnabled, + markers: { + controller.start, + controller.end, + }, + polylines: { + if (controller.route != null) + (widget.line != null) + ? widget.line!.copyWith( + pointsParam: controller.route!.line + .map((PointLatLng e) => LatLng(e.latitude, e.longitude)) + .toList(), + ) + : Polyline( + // default PolyLine if none is provided + polylineId: const PolylineId('track&trace route'), + color: Theme.of(context).primaryColor, + width: 4, + points: controller.route!.line + .map((PointLatLng e) => LatLng(e.latitude, e.longitude)) + .toList(), + ), + }, + ); } void _onChange() { @@ -120,7 +122,14 @@ class _GoogleTrackTraceMapState extends State { 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"}]}]', + ); + } } } @@ -140,23 +149,24 @@ class _GoogleTrackTraceMapState extends State { CameraUpdate moveCameraToCenter(LatLng pointA, LatLng pointB) { return CameraUpdate.newLatLngBounds( - LatLngBounds( - southwest: LatLng( - min(pointA.latitude, pointB.latitude), - min(pointA.longitude, pointB.longitude), - ), - northeast: LatLng( - max(pointA.latitude, pointB.latitude), - max(pointA.longitude, pointB.longitude), - ), + LatLngBounds( + southwest: LatLng( + min(pointA.latitude, pointB.latitude), + min(pointA.longitude, pointB.longitude), ), - 50,); + northeast: LatLng( + max(pointA.latitude, pointB.latitude), + max(pointA.longitude, pointB.longitude), + ), + ), + 50, + ); } void startRouteUpdateTimer() { calculateRoute(); // run at the start - Timer.periodic(Duration(seconds: widget.routeUpdateInterval), - (Timer timer) { + Timer.periodic(Duration(seconds: widget.routeUpdateInterval), + (Timer timer) { calculateRoute(); }); } @@ -168,15 +178,16 @@ class _GoogleTrackTraceMapState extends State { Timer.periodic(Duration(seconds: updateInterval), (timer) { if (controller.route != null) { controller.route = TrackTraceRoute( - controller.route!.duration - updateInterval, - controller.route!.distance, - controller.route!.line,); + controller.route!.duration - updateInterval, + controller.route!.distance, + 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 { mode: widget.travelMode, key: widget.googleAPIKey, ) - .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,),), - }, - setState(() { - lastRouteUpdate = DateTime.now(); - }) - },); + .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, + ), + ), + }, + setState(() { + lastRouteUpdate = DateTime.now(); + }) + }, + ); } } diff --git a/lib/src/google_map_theme.dart b/lib/src/google_map_theme.dart new file mode 100644 index 0000000..43ee8f5 --- /dev/null +++ b/lib/src/google_map_theme.dart @@ -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 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> stylers; + + Map toJson() { + return { + if(featureType != null) 'featureType': featureType, + if(elementType != null) 'elementType': elementType, + 'stylers': stylers, + }; + } +}