Add support for polygon holes for Apple Maps and Google Maps on iOS (react-native-maps#801)

* Add support for polygon holes for Apple Maps and Google Maps on iOS
* Add PropTypes for polygon holes
* Add support for polygon holes in Polygon Creator example

Author: therealgilles

components/MapPolygon.js

@@ -21,6 +21,17 @@ const propTypes = {
     longitude: PropTypes.number.isRequired,
   })),
 
+  /**
+   * An array of array of coordinates to describe the polygon holes
+   */
+  holes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * Latitude/Longitude coordinates
+     */
+    latitude: PropTypes.number.isRequired,
+    longitude: PropTypes.number.isRequired,
+  }))),
+
   /**
    * Callback that is called when the user presses on the polygon
    */

example/examples/PolygonCreator.js

@@ -31,6 +31,7 @@ class PolygonCreator extends React.Component {
       },
       polygons: [],
       editing: null,
+      creatingHole: false,
     };
   }
 
@@ -39,19 +40,49 @@ class PolygonCreator extends React.Component {
     this.setState({
       polygons: [...polygons, editing],
       editing: null,
+      creatingHole: false,
     });
   }
 
+  createHole() {
+    const { editing, creatingHole } = this.state;
+    if (!creatingHole) {
+      this.setState({
+        creatingHole: true,
+        editing: {
+          ...editing,
+          holes: [
+            ...editing.holes,
+            [],
+          ],
+        },
+      });
+    } else {
+      const holes = [...editing.holes];
+      if (holes[holes.length - 1].length === 0) {
+        holes.pop();
+        this.setState({
+          editing: {
+            ...editing,
+            holes,
+          },
+        });
+      }
+      this.setState({ creatingHole: false });
+    }
+  }
+
   onPress(e) {
-    const { editing } = this.state;
+    const { editing, creatingHole } = this.state;
     if (!editing) {
       this.setState({
         editing: {
           id: id++,
           coordinates: [e.nativeEvent.coordinate],
+          holes: [],
         },
       });
-    } else {
+    } else if (!creatingHole) {
       this.setState({
         editing: {
           ...editing,
@@ -61,6 +92,22 @@ class PolygonCreator extends React.Component {
           ],
         },
       });
+    } else {
+      const holes = [...editing.holes];
+      holes[holes.length - 1] = [
+        ...holes[holes.length - 1],
+        e.nativeEvent.coordinate,
+      ];
+      this.setState({
+        editing: {
+          ...editing,
+          id: id++, // keep incrementing id to trigger display refresh
+          coordinates: [
+            ...editing.coordinates,
+          ],
+          holes,
+        },
+      });
     }
   }
 
@@ -88,21 +135,32 @@ class PolygonCreator extends React.Component {
             <MapView.Polygon
               key={polygon.id}
               coordinates={polygon.coordinates}
+              holes={polygon.holes}
               strokeColor="#F00"
               fillColor="rgba(255,0,0,0.5)"
               strokeWidth={1}
             />
           ))}
           {this.state.editing && (
             <MapView.Polygon
+              key={this.state.editing.id}
               coordinates={this.state.editing.coordinates}
+              holes={this.state.editing.holes}
               strokeColor="#000"
               fillColor="rgba(255,0,0,0.5)"
               strokeWidth={1}
             />
           )}
         </MapView>
         <View style={styles.buttonContainer}>
+          {this.state.editing && (
+            <TouchableOpacity
+              onPress={() => this.createHole()}
+              style={[styles.bubble, styles.button]}
+            >
+              <Text>{this.state.creatingHole ? 'Finish Hole' : 'Create Hole'}</Text>
+            </TouchableOpacity>
+          )}
           {this.state.editing && (
             <TouchableOpacity
               onPress={() => this.finish()}

ios/AirGoogleMaps/AIRGoogleMapPolygon.h

@@ -11,6 +11,7 @@
 
 @property (nonatomic, strong) GMSPolygon *polygon;
 @property (nonatomic, strong) NSArray<AIRMapCoordinate *> *coordinates;
+@property (nonatomic, strong) NSArray<NSArray<AIRMapCoordinate *> *> *holes;
 
 @property (nonatomic, assign) UIColor *fillColor;
 @property (nonatomic, assign) double strokeWidth;

ios/AirGoogleMaps/AIRGoogleMapPolygon.m

@@ -31,6 +31,27 @@ - (void)setCoordinates:(NSArray<AIRMapCoordinate *> *)coordinates
   _polygon.path = path;
 }
 
+- (void)setHoles:(NSArray<NSArray<AIRMapCoordinate *> *> *)holes
+{
+  _holes = holes;
+
+  if (holes.count)
+  {
+    NSMutableArray<GMSMutablePath *> *interiorPolygons = [NSMutableArray array];
+    for(int h = 0; h < holes.count; h++)
+    {
+      GMSMutablePath *path = [GMSMutablePath path];
+      for(int i = 0; i < holes[h].count; i++)
+      {
+        [path addCoordinate:holes[h][i].coordinate];
+      }
+      [interiorPolygons addObject:path];
+    }
+
+    _polygon.holes = interiorPolygons;
+  }
+}
+
 -(void)setFillColor:(UIColor *)fillColor
 {
   _fillColor = fillColor;

ios/AirGoogleMaps/AIRGoogleMapPolygonManager.m

@@ -29,6 +29,7 @@ - (UIView *)view
 }
 
 RCT_EXPORT_VIEW_PROPERTY(coordinates, AIRMapCoordinateArray)
+RCT_EXPORT_VIEW_PROPERTY(holes, AIRMapCoordinateArrayArray)
 RCT_EXPORT_VIEW_PROPERTY(fillColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(strokeWidth, double)
 RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor)

ios/AirMaps/AIRMapPolygon.h

@@ -22,8 +22,10 @@
 
 @property (nonatomic, strong) MKPolygon *polygon;
 @property (nonatomic, strong) MKPolygonRenderer *renderer;
+@property (nonatomic, strong) NSArray<MKPolygon *> *interiorPolygons;
 
 @property (nonatomic, strong) NSArray<AIRMapCoordinate *> *coordinates;
+@property (nonatomic, strong) NSArray<NSArray<AIRMapCoordinate *> *> *holes;
 @property (nonatomic, strong) UIColor *fillColor;
 @property (nonatomic, strong) UIColor *strokeColor;
 @property (nonatomic, assign) CGFloat strokeWidth;
@@ -41,4 +43,4 @@
 - (BOOL)intersectsMapRect:(MKMapRect)mapRect;
 - (BOOL)canReplaceMapContent;
 
-@end
+@end

ios/AirMaps/AIRMapPolygon.m

@@ -58,13 +58,31 @@ - (void)setCoordinates:(NSArray<AIRMapCoordinate *> *)coordinates {
     {
         coords[i] = coordinates[i].coordinate;
     }
-    self.polygon = [MKPolygon polygonWithCoordinates:coords count:coordinates.count];
+    self.polygon = [MKPolygon polygonWithCoordinates:coords count:coordinates.count interiorPolygons:_interiorPolygons];
     // TODO: we could lazy-initialize the polygon, since we don't need it until the
     // polygon is in view.
     self.renderer = [[MKPolygonRenderer alloc] initWithPolygon:self.polygon];
     [self update];
 }
 
+- (void)setHoles:(NSArray<NSArray<AIRMapCoordinate *> *> *)holes {
+    _holes = holes;
+    if (holes.count)
+    {
+        NSMutableArray<MKPolygon *> *polygons = [NSMutableArray array];
+        for(int h = 0; h < holes.count; h++)
+        {
+            CLLocationCoordinate2D coords[holes[h].count];
+            for(int i = 0; i < holes[h].count; i++)
+            {
+                coords[i] = holes[h][i].coordinate;
+            }
+            [polygons addObject:[MKPolygon polygonWithCoordinates:coords count:holes[h].count]];
+        }
+        _interiorPolygons = polygons;
+    }
+}
+
 - (void) update
 {
     if (!_renderer) return;
@@ -157,4 +175,4 @@ - (BOOL)canReplaceMapContent
 
 
 
-@end
+@end

ios/AirMaps/AIRMapPolygonManager.m

@@ -34,6 +34,7 @@ - (UIView *)view
 }
 
 RCT_EXPORT_VIEW_PROPERTY(coordinates, AIRMapCoordinateArray)
+RCT_EXPORT_VIEW_PROPERTY(holes, AIRMapCoordinateArrayArray)
 RCT_EXPORT_VIEW_PROPERTY(fillColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)

ios/AirMaps/RCTConvert+MoreMapKit.m

@@ -24,4 +24,9 @@ + (AIRMapCoordinate *)AIRMapCoordinate:(id)json
 
 RCT_ARRAY_CONVERTER(AIRMapCoordinate)
 
-@end
++ (NSArray<NSArray<AIRMapCoordinate *> *> *)AIRMapCoordinateArrayArray:(id)json
+{
+    return RCTConvertArrayValue(@selector(AIRMapCoordinateArray:), json);
+}
+
+@end