Skip to content

Commit

Permalink
Merge pull request react-native-maps#722 from unboundfire/google-maps…
Browse files Browse the repository at this point in the history
…-ios-shapes

[iOS] Added Google Maps Circle, Polygon, Polyline, MapType Support
  • Loading branch information
Spike Brehm authored Oct 27, 2016
2 parents d183c0f + 09b2330 commit 2486841
Show file tree
Hide file tree
Showing 27 changed files with 631 additions and 146 deletions.
4 changes: 2 additions & 2 deletions components/MapCircle.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
} from 'react-native';
import decorateMapComponent, {
USES_DEFAULT_IMPLEMENTATION,
NOT_SUPPORTED,
SUPPORTED,
} from './decorateMapComponent';

const propTypes = {
Expand Down Expand Up @@ -140,7 +140,7 @@ module.exports = decorateMapComponent(MapCircle, {
componentType: 'Circle',
providers: {
google: {
ios: NOT_SUPPORTED,
ios: SUPPORTED,
android: USES_DEFAULT_IMPLEMENTATION,
},
},
Expand Down
5 changes: 2 additions & 3 deletions components/MapPolygon.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
} from 'react-native';
import decorateMapComponent, {
USES_DEFAULT_IMPLEMENTATION,
NOT_SUPPORTED,
SUPPORTED,
} from './decorateMapComponent';

const propTypes = {
Expand Down Expand Up @@ -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,

Expand Down Expand Up @@ -145,7 +144,7 @@ module.exports = decorateMapComponent(MapPolygon, {
componentType: 'Polygon',
providers: {
google: {
ios: NOT_SUPPORTED,
ios: SUPPORTED,
android: USES_DEFAULT_IMPLEMENTATION,
},
},
Expand Down
9 changes: 7 additions & 2 deletions components/MapPolyline.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
} from 'react-native';
import decorateMapComponent, {
USES_DEFAULT_IMPLEMENTATION,
NOT_SUPPORTED,
SUPPORTED,
} from './decorateMapComponent';

const propTypes = {
Expand All @@ -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.
*/
Expand Down Expand Up @@ -140,7 +145,7 @@ module.exports = decorateMapComponent(MapPolyline, {
componentType: 'Polyline',
providers: {
google: {
ios: NOT_SUPPORTED,
ios: SUPPORTED,
android: USES_DEFAULT_IMPLEMENTATION,
},
},
Expand Down
10 changes: 6 additions & 4 deletions components/MapView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
];
Expand Down Expand Up @@ -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)),

Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions example/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)'],
Expand Down
4 changes: 3 additions & 1 deletion example/examples/Overlays.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions example/examples/PolygonCreator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
262 changes: 133 additions & 129 deletions example/ios/AirMapsExplorer.xcodeproj/project.pbxproj

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,6 @@ SPEC CHECKSUMS:
GoogleMaps: 06589b9a38097bce0cd6e90f0fd9b5e4b4a9344c
React: d80af5410aa500d0cb1bce2cc4493a584cf2ec92

COCOAPODS: 0.39.0
PODFILE CHECKSUM: be65689c848eff5d4099a483239b72acab62f6a4

COCOAPODS: 1.1.1
3 changes: 3 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMap.h
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
31 changes: 31 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMap.m
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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];
}
Expand All @@ -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];
}
Expand Down Expand Up @@ -244,4 +274,5 @@ - (void)setShowsUserLocation:(BOOL)showsUserLocation {
- (BOOL)showsUserLocation {
return self.myLocationEnabled;
}

@end
20 changes: 20 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapCircle.h
Original file line number Diff line number Diff line change
@@ -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
57 changes: 57 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapCircle.m
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapCircleManager.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
//
// AIRGoogleMapCircleManager.h
//
// Created by Nick Italiano on 10/24/16.
//

#import "RCTViewManager.h"

@interface AIRGoogleMapCircleManager : RCTViewManager

@end
33 changes: 33 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapCircleManager.m
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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)
Expand Down
21 changes: 21 additions & 0 deletions ios/AirGoogleMaps/AIRGoogleMapPolygon.h
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 2486841

Please sign in to comment.