add Strong Map Styling

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

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

example/lib/main.dart

@@ -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,
+        travelMode: TravelMode.walking,
-        mapType: MapType.satellite,
+        mapType: MapType.normal,
         routeUpdateInterval: 60,
         timerPrecision: TimePrecision.everySecond,
         zoomGesturesEnabled: true,
         line: const Polyline(
           polylineId: PolylineId('test route'),
-          color: Colors.purple,
+          color: Color(0xFFFF7884),
-          width: 5,
+          width: 3,
         ),
         onMapCreated: (ctr) => {
           controller = ctr,

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';

lib/src/google_map.dart

@@ -19,8 +19,7 @@ class GoogleTrackTraceMap extends StatefulWidget {
     this.mapToolbarEnabled = false,
     this.mapType = MapType.normal,
     this.buildingsEnabled = false,
-    this.mapMarkations =
+    this.mapStylingTheme,
-        '[{"featureType": "poi","stylers": [{"visibility": "off"}]}]',
     this.line,
   }) : super(key: key);
 
@@ -47,8 +46,7 @@ class GoogleTrackTraceMap extends StatefulWidget {
   final bool mapToolbarEnabled;
   final bool buildingsEnabled;
   final MapType mapType;
-
+  final GoogleTrackTraceMapTheme? mapStylingTheme;
-  final String mapMarkations;
 
   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,7 +180,8 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
           controller.route = TrackTraceRoute(
             controller.route!.duration - updateInterval,
             controller.route!.distance,
-              controller.route!.line,);
+            controller.route!.line,
+          );
         }
       });
     }
@@ -184,17 +195,26 @@ class _GoogleTrackTraceMapState extends State<GoogleTrackTraceMap> {
           mode: widget.travelMode,
           key: widget.googleAPIKey,
         )
-        .then((value) => {
+        .then(
-              controller.route = TrackTraceRoute(value.totalDuration,
+          (value) => {
-                  value.totalDistance, value.polylinePoints,),
+            controller.route = TrackTraceRoute(
+              value.totalDuration,
+              value.totalDistance,
+              value.polylinePoints,
+            ),
             if (controller.mapController != null)
               {
-                  controller.mapController!.moveCamera(moveCameraToCenter(
+                controller.mapController!.moveCamera(
-                      controller.start.position, controller.end.position,),),
+                  moveCameraToCenter(
+                    controller.start.position,
+                    controller.end.position,
+                  ),
+                ),
               },
             setState(() {
               lastRouteUpdate = DateTime.now();
             })
-            },);
+          },
+        );
   }
 }

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<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,
+    };
+  }
+}