Added ios google maps circle support

Author: Nick Italiano

components/MapCircle.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
-  NOT_SUPPORTED,
+  SUPPORTED,
 } from './decorateMapComponent';
 
 const propTypes = {
@@ -140,7 +140,7 @@ module.exports = decorateMapComponent(MapCircle, {
   componentType: 'Circle',
   providers: {
     google: {
-      ios: NOT_SUPPORTED,
+      ios: SUPPORTED,
       android: USES_DEFAULT_IMPLEMENTATION,
     },
   },

components/MapPolyline.js

@@ -26,6 +26,11 @@ const propTypes = {
    */
   onPress: PropTypes.func,
 
+  /**
+   * The fill color to use for the path.
+   */
+  fillColor: PropTypes.string,
+
   /**
    * The stroke width to use for the path.
    */

example/App.js

@@ -129,7 +129,7 @@ class App extends React.Component {
       [AnimatedViews, 'Animating with MapViews'],
       [AnimatedMarkers, 'Animated Marker Position'],
       [Callouts, 'Custom Callouts', true],
-      [Overlays, 'Circles, Polygons, and Polylines', true, '(ios error)'],
+      [Overlays, 'Circles, Polygons, and Polylines', true],
       [DefaultMarkers, 'Default Markers', true],
       [CustomMarkers, 'Custom Markers', true],
       [TakeSnapshot, 'Take Snapshot', true, '(incomplete)'],

example/examples/Overlays.js

@@ -82,8 +82,10 @@ class Overlays extends React.Component {
           <MapView.Circle
             center={circle.center}
             radius={circle.radius}
-            fillColor="rgba(200, 0, 0, 0.5)"
+            fillColor="rgba(255, 255, 255, 1)"
             strokeColor="rgba(0,0,0,0.5)"
+            zIndex={2}
+            strokeWidth={2}
           />
           <MapView.Polygon
             coordinates={polygon}

example/ios/AirMapsExplorer.xcodeproj/project.pbxproj

@@ -45,6 +45,8 @@
 		8620CC911DBD814A00B79BFE /* AIRGoogleMapPolylineManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 8620CC821DBD814A00B79BFE /* AIRGoogleMapPolylineManager.m */; };
 		8620CC921DBD814A00B79BFE /* DummyView.m in Sources */ = {isa = PBXBuildFile; fileRef = 8620CC841DBD814A00B79BFE /* DummyView.m */; };
 		8620CC931DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m in Sources */ = {isa = PBXBuildFile; fileRef = 8620CC861DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m */; };
+		8697D6221DBEDE6100DB7D0F /* AIRGoogleMapCircle.m in Sources */ = {isa = PBXBuildFile; fileRef = 8697D6211DBEDE6100DB7D0F /* AIRGoogleMapCircle.m */; };
+		8697D6251DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */; };
 		C9315A21AD5A149EB5B40F29 /* Pods_AirMapsExplorer.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 24EB66BA0860A4DCD4CA3D77 /* Pods_AirMapsExplorer.framework */; };
 /* End PBXBuildFile section */
 
@@ -139,6 +141,10 @@
 		8620CC841DBD814A00B79BFE /* DummyView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DummyView.m; sourceTree = "<group>"; };
 		8620CC851DBD814A00B79BFE /* RCTConvert+GMSMapViewType.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "RCTConvert+GMSMapViewType.h"; sourceTree = "<group>"; };
 		8620CC861DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "RCTConvert+GMSMapViewType.m"; sourceTree = "<group>"; };
+		8697D6201DBEDE6100DB7D0F /* AIRGoogleMapCircle.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AIRGoogleMapCircle.h; sourceTree = "<group>"; };
+		8697D6211DBEDE6100DB7D0F /* AIRGoogleMapCircle.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AIRGoogleMapCircle.m; sourceTree = "<group>"; };
+		8697D6231DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AIRGoogleMapCircleManager.h; sourceTree = "<group>"; };
+		8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AIRGoogleMapCircleManager.m; sourceTree = "<group>"; };
 		86C3F1E16CFF1D84E5317F85 /* Pods-AirMapsExplorer.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AirMapsExplorer.debug.xcconfig"; path = "Pods/Target Support Files/Pods-AirMapsExplorer/Pods-AirMapsExplorer.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -315,6 +321,10 @@
 				8620CC841DBD814A00B79BFE /* DummyView.m */,
 				8620CC851DBD814A00B79BFE /* RCTConvert+GMSMapViewType.h */,
 				8620CC861DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m */,
+				8697D6201DBEDE6100DB7D0F /* AIRGoogleMapCircle.h */,
+				8697D6211DBEDE6100DB7D0F /* AIRGoogleMapCircle.m */,
+				8697D6231DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.h */,
+				8697D6241DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m */,
 			);
 			name = AirGoogleMaps;
 			path = ../../ios/AirGoogleMaps;
@@ -505,9 +515,11 @@
 				21D346661D933B8C002BAD8A /* AIRMapUrlTileManager.m in Sources */,
 				8620CC931DBD814A00B79BFE /* RCTConvert+GMSMapViewType.m in Sources */,
 				2166AB301D82EC56007538D7 /* AIRMapMarker.m in Sources */,
+				8697D6221DBEDE6100DB7D0F /* AIRGoogleMapCircle.m in Sources */,
 				2166AB321D82EC56007538D7 /* AIRMapPolygon.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				2166AB3E1D82EC56007538D7 /* RCTConvert+MoreMapKit.m in Sources */,
+				8697D6251DBEE22B00DB7D0F /* AIRGoogleMapCircleManager.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 				2166AB331D82EC56007538D7 /* AIRMapPolygonManager.m in Sources */,
 				8620CC901DBD814A00B79BFE /* AIRGoogleMapPolyline.m in Sources */,

ios/AirGoogleMaps/AIRGoogleMap.h

@@ -26,6 +26,7 @@
 @property (nonatomic, strong) NSMutableArray *markers;
 @property (nonatomic, strong) NSMutableArray *polygons;
 @property (nonatomic, strong) NSMutableArray *polylines;
+@property (nonatomic, strong) NSMutableArray *circles;
 
 @property (nonatomic, assign) BOOL showsBuildings;
 @property (nonatomic, assign) BOOL showsTraffic;

ios/AirGoogleMaps/AIRGoogleMap.m

@@ -9,6 +9,7 @@
 #import "AIRGoogleMapMarker.h"
 #import "AIRGoogleMapPolygon.h"
 #import "AIRGoogleMapPolyline.h"
+#import "AIRGoogleMapCircle.h"
 #import <GoogleMaps/GoogleMaps.h>
 #import <MapKit/MapKit.h>
 #import "RCTConvert+MapKit.h"
@@ -77,6 +78,7 @@ - (instancetype)init
     _markers = [NSMutableArray array];
     _polygons = [NSMutableArray array];
     _polylines = [NSMutableArray array];
+    _circles = [NSMutableArray array];
     _initialRegionSet = false;
   }
   return self;
@@ -114,6 +116,10 @@ - (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex
     AIRGoogleMapPolyline *polyline = (AIRGoogleMapPolyline*)subview;
     polyline.polyline.map = self;
     [self.polylines addObject:polyline];
+  } else if ([subview isKindOfClass:[AIRGoogleMapCircle class]]) {
+    AIRGoogleMapCircle *circle = (AIRGoogleMapCircle*)subview;
+    circle.circle.map = self;
+    [self.circles addObject:circle];
   }
   [_reactSubviews insertObject:(UIView *)subview atIndex:(NSUInteger) atIndex];
 }
@@ -137,6 +143,10 @@ - (void)removeReactSubview:(id<RCTComponent>)subview {
     AIRGoogleMapPolyline *polyline = (AIRGoogleMapPolyline*)subview;
     polyline.polyline.map = nil;
     [self.polylines removeObject:polyline];
+  } else if ([subview isKindOfClass:[AIRGoogleMapCircle class]]) {
+    AIRGoogleMapCircle *circle = (AIRGoogleMapCircle*)subview;
+    circle.circle.map = nil;
+    [self.circles removeObject:circle];
   }
   [_reactSubviews removeObject:(UIView *)subview];
 }

ios/AirGoogleMaps/AIRGoogleMapCircle.h

@@ -0,0 +1,20 @@
+//
+//  AIRGoogleMapsCircle.h
+//
+//  Created by Nick Italiano on 10/24/16.
+//
+
+#import <GoogleMaps/GoogleMaps.h>
+#import "AIRMapCoordinate.h"
+
+@interface AIRGoogleMapCircle : UIView
+
+@property (nonatomic, strong) GMSCircle *circle;
+@property (nonatomic, assign) double radius;
+@property (nonatomic, assign) CLLocationCoordinate2D centerCoordinate;
+@property (nonatomic, assign) UIColor *strokeColor;
+@property (nonatomic, assign) double strokeWidth;
+@property (nonatomic, assign) UIColor *fillColor;
+@property (nonatomic, assign) int zIndex;
+
+@end

ios/AirGoogleMaps/AIRGoogleMapCircle.m

@@ -0,0 +1,57 @@
+//
+//  AIRGoogleMapsCircle.m
+//
+//  Created by Nick Italiano on 10/24/16.
+//
+#import <UIKit/UIKit.h>
+#import "AIRGoogleMapCircle.h"
+#import <GoogleMaps/GoogleMaps.h>
+#import "RCTUtils.h"
+
+@implementation AIRGoogleMapCircle
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _circle = [[GMSCircle alloc] init];
+  }
+  return self;
+}
+
+- (void)setRadius:(double)radius
+{
+  _radius = radius;
+  _circle.radius = radius;
+}
+
+- (void)setCenterCoordinate:(CLLocationCoordinate2D)centerCoordinate
+{
+  _centerCoordinate = centerCoordinate;
+  _circle.position = centerCoordinate;
+}
+
+-(void)setStrokeColor:(UIColor *)strokeColor
+{
+  _strokeColor = strokeColor;
+  _circle.strokeColor = strokeColor;
+}
+
+-(void)setStrokeWidth:(double)strokeWidth
+{
+  _strokeWidth = strokeWidth;
+  _circle.strokeWidth = strokeWidth;
+}
+
+-(void)setFillColor:(UIColor *)fillColor
+{
+  _fillColor = fillColor;
+  _circle.fillColor = fillColor;
+}
+
+-(void)setZIndex:(int)zIndex
+{
+  _zIndex = zIndex;
+  _circle.zIndex = zIndex;
+}
+
+@end

ios/AirGoogleMaps/AIRGoogleMapCircleManager.h

@@ -0,0 +1,11 @@
+//
+//  AIRGoogleMapCircleManager.h
+//
+//  Created by Nick Italiano on 10/24/16.
+//
+
+#import "RCTViewManager.h"
+
+@interface AIRGoogleMapCircleManager : RCTViewManager
+
+@end