[iOS] Added Google Maps Circle, Polygon, Polyline, MapType Support

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/MapPolygon.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
-  NOT_SUPPORTED,
+  SUPPORTED,
 } from './decorateMapComponent';
 
 const propTypes = {
@@ -92,7 +92,6 @@ const propTypes = {
    * points on the Earth's surface. The geodesic curve is constructed assuming the Earth is
    * a sphere.
    *
-   * @platform android
    */
   geodesic: PropTypes.bool,
 
@@ -145,7 +144,7 @@ module.exports = decorateMapComponent(MapPolygon, {
   componentType: 'Polygon',
   providers: {
     google: {
-      ios: NOT_SUPPORTED,
+      ios: SUPPORTED,
       android: USES_DEFAULT_IMPLEMENTATION,
     },
   },

components/MapPolyline.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
-  NOT_SUPPORTED,
+  SUPPORTED,
 } from './decorateMapComponent';
 
 const propTypes = {
@@ -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.
    */
@@ -140,7 +145,7 @@ module.exports = decorateMapComponent(MapPolyline, {
   componentType: 'Polyline',
   providers: {
     google: {
-      ios: NOT_SUPPORTED,
+      ios: SUPPORTED,
       android: USES_DEFAULT_IMPLEMENTATION,
     },
   },

components/MapView.js

@@ -32,7 +32,7 @@ const MAP_TYPES = {
   NONE: 'none',
 };
 
-const ANDROID_ONLY_MAP_TYPES = [
+const GOOGLE_MAPS_ONLY_TYPES = [
   MAP_TYPES.TERRAIN,
   MAP_TYPES.NONE,
 ];
@@ -208,7 +208,8 @@ const propTypes = {
    * - standard: standard road map (default)
    * - satellite: satellite view
    * - hybrid: satellite view with roads and points of interest overlayed
-   * - terrain: (Android only) topographic view
+   * - terrain: topographic view
+   * - none: no base map
    */
   mapType: PropTypes.oneOf(Object.values(MAP_TYPES)),
 
@@ -502,8 +503,9 @@ class MapView extends React.Component {
         onMapReady: this._onMapReady,
         onLayout: this._onLayout,
       };
-      if (Platform.OS === 'ios' && ANDROID_ONLY_MAP_TYPES.includes(props.mapType)) {
-        props.mapType = MAP_TYPES.STANDARD;
+      if (Platform.OS === 'ios' && props.provider === ProviderConstants.PROVIDER_DEFAULT
+        && GOOGLE_MAPS_ONLY_TYPES.includes(props.mapType)) {
+        props.mapType = MAP_TYPES.standard;
       }
       props.handlePanDrag = !!props.onPanDrag;
     } else {

example/App.js

@@ -124,12 +124,12 @@ class App extends React.Component {
       [EventListener, 'Events', true, '(incomplete)'],
       [MarkerTypes, 'Image Based Markers', true],
       [DraggableMarkers, 'Draggable Markers', true],
-      [PolygonCreator, 'Polygon Creator'],
-      [PolylineCreator, 'Polyline Creator'],
+      [PolygonCreator, 'Polygon Creator', true],
+      [PolylineCreator, 'Polyline Creator', true],
       [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/examples/PolygonCreator.js

@@ -79,6 +79,7 @@ class PolygonCreator extends React.Component {
         <MapView
           provider={this.props.provider}
           style={styles.map}
+          mapType={MapView.MAP_TYPES.HYBRID}
           initialRegion={this.state.region}
           onPress={e => this.onPress(e)}
           {...mapOptions}

example/ios/Podfile.lock

@@ -46,4 +46,6 @@ SPEC CHECKSUMS:
   GoogleMaps: 06589b9a38097bce0cd6e90f0fd9b5e4b4a9344c
   React: d80af5410aa500d0cb1bce2cc4493a584cf2ec92
 
-COCOAPODS: 0.39.0
+PODFILE CHECKSUM: be65689c848eff5d4099a483239b72acab62f6a4
+
+COCOAPODS: 1.1.1

ios/AirGoogleMaps/AIRGoogleMap.h

@@ -24,6 +24,9 @@
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChange;
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChangeComplete;
 @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

@@ -7,6 +7,9 @@
 
 #import "AIRGoogleMap.h"
 #import "AIRGoogleMapMarker.h"
+#import "AIRGoogleMapPolygon.h"
+#import "AIRGoogleMapPolyline.h"
+#import "AIRGoogleMapCircle.h"
 #import <GoogleMaps/GoogleMaps.h>
 #import <MapKit/MapKit.h>
 #import "RCTConvert+MapKit.h"
@@ -73,6 +76,9 @@ - (instancetype)init
   if ((self = [super init])) {
     _reactSubviews = [NSMutableArray new];
     _markers = [NSMutableArray array];
+    _polygons = [NSMutableArray array];
+    _polylines = [NSMutableArray array];
+    _circles = [NSMutableArray array];
     _initialRegionSet = false;
   }
   return self;
@@ -102,6 +108,18 @@ - (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex
     AIRGoogleMapMarker *marker = (AIRGoogleMapMarker*)subview;
     marker.realMarker.map = self;
     [self.markers addObject:marker];
+  } else if ([subview isKindOfClass:[AIRGoogleMapPolygon class]]) {
+    AIRGoogleMapPolygon *polygon = (AIRGoogleMapPolygon*)subview;
+    polygon.polygon.map = self;
+    [self.polygons addObject:polygon];
+  } else if ([subview isKindOfClass:[AIRGoogleMapPolyline class]]) {
+    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];
 }
@@ -117,6 +135,18 @@ - (void)removeReactSubview:(id<RCTComponent>)subview {
     AIRGoogleMapMarker *marker = (AIRGoogleMapMarker*)subview;
     marker.realMarker.map = nil;
     [self.markers removeObject:marker];
+  } else if ([subview isKindOfClass:[AIRGoogleMapPolygon class]]) {
+    AIRGoogleMapPolygon *polygon = (AIRGoogleMapPolygon*)subview;
+    polygon.polygon.map = nil;
+    [self.polygons removeObject:polygon];
+  } else if ([subview isKindOfClass:[AIRGoogleMapPolyline class]]) {
+    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];
 }
@@ -244,4 +274,5 @@ - (void)setShowsUserLocation:(BOOL)showsUserLocation {
 - (BOOL)showsUserLocation {
   return self.myLocationEnabled;
 }
+
 @end

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

ios/AirGoogleMaps/AIRGoogleMapCircleManager.m

@@ -0,0 +1,33 @@
+//
+//  AIRGoogleMapCircleManager.m
+//
+//  Created by Nick Italiano on 10/24/16.
+//
+
+#import "AIRGoogleMapCircleManager.h"
+#import "AIRGoogleMapCircle.h"
+#import "RCTBridge.h"
+#import "UIView+React.h"
+
+@interface AIRGoogleMapCircleManager()
+
+@end
+
+@implementation AIRGoogleMapCircleManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  AIRGoogleMapCircle *circle = [AIRGoogleMapCircle new];
+  return circle;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(radius, double)
+RCT_REMAP_VIEW_PROPERTY(center, centerCoordinate, CLLocationCoordinate2D)
+RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(strokeWidth, double)
+RCT_EXPORT_VIEW_PROPERTY(fillColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(zIndex, int)
+
+@end

ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -12,6 +12,7 @@
 #import "RCTUIManager.h"
 #import "RCTConvert+CoreLocation.h"
 #import "RCTConvert+MapKit.h"
+#import "RCTConvert+GMSMapViewType.h"
 #import "RCTEventDispatcher.h"
 #import "AIRGoogleMap.h"
 #import "UIView+React.h"
@@ -61,6 +62,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRegionChangeComplete, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(mapType, GMSMapViewType)
 
 RCT_EXPORT_METHOD(fitToElements:(nonnull NSNumber *)reactTag
                   animated:(BOOL)animated)

ios/AirGoogleMaps/AIRGoogleMapPolygon.h

@@ -0,0 +1,21 @@
+//
+//  AIRGoogleMapPolygon.h
+//
+//  Created by Nick Italiano on 10/22/16.
+//
+
+#import <GoogleMaps/GoogleMaps.h>
+#import "AIRMapCoordinate.h"
+
+@interface AIRGoogleMapPolygon : UIView
+
+@property (nonatomic, strong) GMSPolygon *polygon;
+@property (nonatomic, strong) NSArray<AIRMapCoordinate *> *coordinates;
+
+@property (nonatomic, assign) UIColor *fillColor;
+@property (nonatomic, assign) double strokeWidth;
+@property (nonatomic, assign) UIColor *strokeColor;
+@property (nonatomic, assign) BOOL geodesic;
+@property (nonatomic, assign) int zIndex;
+
+@end