Merge pull request react-native-maps#722 from unboundfire/google-maps-ios-shapes

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

Author: Spike Brehm

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/AirMapsExplorer.xcodeproj/project.pbxproj

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

example/ios/Podfile.lock

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