[google_maps_flutter] Adds support for holes in polygon overlays to the Google Maps plugin

AUTHORS

@@ -40,4 +40,5 @@ Jonathan Younger <jonathan@daikini.com>
 Jose Sanchez <josesm82@gmail.com>
 Debkanchan Samadder <debu.samadder@gmail.com>
 Audrius Karosevicius <audrius.karosevicius@gmail.com>
-Lukasz Piliszczuk <lukasz@intheloup.io>
+Lukasz Piliszczuk <lukasz@intheloup.io>
+Aleksandr Yurkovskiy <sanekyy@gmail.com>

packages/google_maps_flutter/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.5.21
+
+* Add support for holes in Polygons
+
 ## 0.5.20
 
 * Add map toolbar support

packages/google_maps_flutter/android/src/main/java/io/flutter/plugins/googlemaps/Convert.java

@@ -424,6 +424,10 @@ static String interpretPolygonOptions(Object o, PolygonOptionsSink sink) {
     if (points != null) {
       sink.setPoints(toPoints(points));
     }
+    final Object holes = data.get("holes");
+    if (holes != null) {
+      sink.setHoles(toHoles(holes));
+    }
     final String polygonId = (String) data.get("polygonId");
     if (polygonId == null) {
       throw new IllegalArgumentException("polygonId was null");
@@ -539,6 +543,16 @@ private static List<LatLng> toPoints(Object o) {
     return points;
   }
 
+  private static List<List<LatLng>> toHoles(Object o) {
+    final List<?> data = toList(o);
+    final List<List<LatLng>> holes = new ArrayList<>(data.size());
+
+    for (Object ob : data) {
+      holes.add(toPoints(ob));
+    }
+    return holes;
+  }
+
   private static List<PatternItem> toPattern(Object o) {
     final List<?> data = toList(o);
 

packages/google_maps_flutter/android/src/main/java/io/flutter/plugins/googlemaps/PolygonBuilder.java

@@ -35,6 +35,13 @@ public void setPoints(List<LatLng> points) {
     polygonOptions.addAll(points);
   }
 
+  @Override
+  public void setHoles(List<List<LatLng>> holes) {
+    for (List<LatLng> hole : holes) {
+      polygonOptions.addHole(hole);
+    }
+  }
+
   @Override
   public void setConsumeTapEvents(boolean consumeTapEvents) {
     this.consumeTapEvents = consumeTapEvents;

packages/google_maps_flutter/android/src/main/java/io/flutter/plugins/googlemaps/PolygonController.java

@@ -46,6 +46,10 @@ public void setPoints(List<LatLng> points) {
     polygon.setPoints(points);
   }
 
+  public void setHoles(List<List<LatLng>> holes) {
+    polygon.setHoles(holes);
+  }
+
   @Override
   public void setVisible(boolean visible) {
     polygon.setVisible(visible);

packages/google_maps_flutter/android/src/main/java/io/flutter/plugins/googlemaps/PolygonOptionsSink.java

@@ -16,6 +16,8 @@ interface PolygonOptionsSink {
 
   void setPoints(List<LatLng> points);
 
+  void setHoles(List<List<LatLng>> holes);
+
   void setVisible(boolean visible);
 
   void setStrokeWidth(float width);

packages/google_maps_flutter/example/lib/place_polygon.dart

@@ -24,6 +24,7 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
 
   GoogleMapController controller;
   Map<PolygonId, Polygon> polygons = <PolygonId, Polygon>{};
+  Map<PolygonId, double> polygonOffsets = <PolygonId, double>{};
   int _polygonIdCounter = 1;
   PolygonId selectedPolygon;
 
@@ -90,6 +91,7 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
 
     setState(() {
       polygons[polygonId] = polygon;
+      polygonOffsets[polygonId] = _polygonIdCounter.ceilToDouble();
     });
   }
 
@@ -138,6 +140,22 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
     });
   }
 
+  void _addHoles() {
+    final Polygon polygon = polygons[selectedPolygon];
+    setState(() {
+      polygons[selectedPolygon] = polygon.copyWith(holesParam: _createHoles());
+    });
+  }
+
+  void _removeHoles() {
+    final Polygon polygon = polygons[selectedPolygon];
+    setState(() {
+      polygons[selectedPolygon] = polygon.copyWith(
+        holesParam: <List<LatLng>>[],
+      );
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -190,6 +208,22 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
                     ),
                     Column(
                       children: <Widget>[
+                        FlatButton(
+                          child: const Text('add holes'),
+                          onPressed: (selectedPolygon == null)
+                              ? null
+                              : ((polygons[selectedPolygon].holes.isNotEmpty)
+                                  ? null
+                                  : _addHoles),
+                        ),
+                        FlatButton(
+                          child: const Text('remove holes'),
+                          onPressed: (selectedPolygon == null)
+                              ? null
+                              : ((polygons[selectedPolygon].holes.isEmpty)
+                                  ? null
+                                  : _removeHoles),
+                        ),
                         FlatButton(
                           child: const Text('change stroke width'),
                           onPressed:
@@ -229,6 +263,27 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
     return points;
   }
 
+  List<List<LatLng>> _createHoles() {
+    final List<List<LatLng>> holes = <List<LatLng>>[];
+    final double offset = polygonOffsets[selectedPolygon];
+
+    final List<LatLng> hole1 = <LatLng>[];
+    hole1.add(_createLatLng(51.8395 + offset, -3.8814));
+    hole1.add(_createLatLng(52.0234 + offset, -3.9914));
+    hole1.add(_createLatLng(52.1351 + offset, -4.4435));
+    hole1.add(_createLatLng(52.0231 + offset, -4.5829));
+    holes.add(hole1);
+
+    final List<LatLng> hole2 = <LatLng>[];
+    hole2.add(_createLatLng(52.2395 + offset, -3.6814));
+    hole2.add(_createLatLng(52.4234 + offset, -3.7914));
+    hole2.add(_createLatLng(52.5351 + offset, -4.2435));
+    hole2.add(_createLatLng(52.4231 + offset, -4.3829));
+    holes.add(hole2);
+
+    return holes;
+  }
+
   LatLng _createLatLng(double lat, double lng) {
     return LatLng(lat, lng);
   }

packages/google_maps_flutter/ios/Classes/GoogleMapPolygonController.h

@@ -13,6 +13,7 @@
 - (void)setStrokeColor:(UIColor*)color;
 - (void)setStrokeWidth:(CGFloat)width;
 - (void)setPoints:(NSArray<CLLocation*>*)points;
+- (void)setHoles:(NSArray<NSArray<CLLocation*>*>*)holes;
 - (void)setZIndex:(int)zIndex;
 @end
 

packages/google_maps_flutter/ios/Classes/GoogleMapPolygonController.m

@@ -45,6 +45,19 @@ - (void)setPoints:(NSArray<CLLocation*>*)points {
   }
   _polygon.path = path;
 }
+- (void)setHoles:(NSArray<NSArray<CLLocation*>*>*)rawHoles {
+  NSMutableArray<GMSMutablePath*>* holes = [[NSMutableArray<GMSMutablePath*> alloc] init];
+
+  for (NSArray<CLLocation*>* points in rawHoles) {
+    GMSMutablePath* path = [GMSMutablePath path];
+    for (CLLocation* location in points) {
+      [path addCoordinate:location.coordinate];
+    }
+    [holes addObject:path];
+  }
+
+  _polygon.holes = holes;
+}
 
 - (void)setFillColor:(UIColor*)color {
   _polygon.fillColor = color;
@@ -65,6 +78,10 @@ - (void)setStrokeWidth:(CGFloat)width {
   return [FLTGoogleMapJsonConversions toPoints:data];
 }
 
+static NSArray<NSArray<CLLocation*>*>* ToHoles(NSArray<NSArray*>* data) {
+  return [FLTGoogleMapJsonConversions toHoles:data];
+}
+
 static UIColor* ToColor(NSNumber* data) { return [FLTGoogleMapJsonConversions toColor:data]; }
 
 static void InterpretPolygonOptions(NSDictionary* data, id<FLTGoogleMapPolygonOptionsSink> sink,
@@ -89,6 +106,11 @@ static void InterpretPolygonOptions(NSDictionary* data, id<FLTGoogleMapPolygonOp
     [sink setPoints:ToPoints(points)];
   }
 
+  NSArray* holes = data[@"holes"];
+  if (holes) {
+    [sink setHoles:ToHoles(holes)];
+  }
+
   NSNumber* fillColor = data[@"fillColor"];
   if (fillColor) {
     [sink setFillColor:ToColor(fillColor)];

packages/google_maps_flutter/ios/Classes/JsonConversions.h

@@ -15,4 +15,5 @@
 + (NSArray*)positionToJson:(CLLocationCoordinate2D)position;
 + (UIColor*)toColor:(NSNumber*)data;
 + (NSArray<CLLocation*>*)toPoints:(NSArray*)data;
++ (NSArray<NSArray<CLLocation*>*>*)toHoles:(NSArray*)data;
 @end

packages/google_maps_flutter/ios/Classes/JsonConversions.m

@@ -58,4 +58,14 @@ + (UIColor*)toColor:(NSNumber*)numberColor {
   return points;
 }
 
++ (NSArray<NSArray<CLLocation*>*>*)toHoles:(NSArray*)data {
+  NSMutableArray<NSArray<CLLocation*>*>* holes = [[[NSMutableArray alloc] init] init];
+  for (unsigned i = 0; i < [data count]; i++) {
+    NSArray<CLLocation*>* points = [FLTGoogleMapJsonConversions toPoints:data[i]];
+    [holes addObject:points];
+  }
+
+  return holes;
+}
+
 @end

packages/google_maps_flutter/lib/src/polygon.dart

@@ -36,6 +36,7 @@ class Polygon {
     this.fillColor = Colors.black,
     this.geodesic = false,
     this.points = const <LatLng>[],
+    this.holes = const <List<LatLng>>[],
     this.strokeColor = Colors.black,
     this.strokeWidth = 10,
     this.visible = true,
@@ -67,6 +68,11 @@ class Polygon {
   /// default; to form a closed polygon, the start and end points must be the same.
   final List<LatLng> points;
 
+  /// The vertices of the holes to be cut out of polygon.
+  ///
+  /// Line segments of each points of hole are drawn inside polygon between consecutive hole points.
+  final List<List<LatLng>> holes;
+
   /// True if the marker is visible.
   final bool visible;
 
@@ -96,6 +102,7 @@ class Polygon {
     Color fillColorParam,
     bool geodesicParam,
     List<LatLng> pointsParam,
+    List<List<LatLng>> holesParam,
     Color strokeColorParam,
     int strokeWidthParam,
     bool visibleParam,
@@ -108,6 +115,7 @@ class Polygon {
       fillColor: fillColorParam ?? fillColor,
       geodesic: geodesicParam ?? geodesic,
       points: pointsParam ?? points,
+      holes: holesParam ?? holes,
       strokeColor: strokeColorParam ?? strokeColor,
       strokeWidth: strokeWidthParam ?? strokeWidth,
       visible: visibleParam ?? visible,
@@ -138,6 +146,10 @@ class Polygon {
       json['points'] = _pointsToJson();
     }
 
+    if (holes != null) {
+      json['holes'] = _holesToJson();
+    }
+
     return json;
   }
 
@@ -159,6 +171,18 @@ class Polygon {
     }
     return result;
   }
+
+  dynamic _holesToJson() {
+    final List<dynamic> result = <dynamic>[];
+    for (final List<LatLng> hole in holes) {
+      final List<dynamic> jsonHole = <dynamic>[];
+      for (final LatLng point in hole) {
+        jsonHole.add(point._toJson());
+      }
+      result.add(jsonHole);
+    }
+    return result;
+  }
 }
 
 Map<PolygonId, Polygon> _keyByPolygonId(Iterable<Polygon> polygons) {