diff --git a/Examples/UIExplorer/MapViewExample.js b/Examples/UIExplorer/MapViewExample.js index 9a7e2e1aa..863187eda 100644 --- a/Examples/UIExplorer/MapViewExample.js +++ b/Examples/UIExplorer/MapViewExample.js @@ -313,6 +313,45 @@ var CustomPinImageMapViewExample = React.createClass({ }); +var CustomOverlayMapViewExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + }; + }, + + render() { + if (this.state.isFirstLoad) { + var onRegionChangeComplete = (region) => { + this.setState({ + isFirstLoad: false, + overlays: [{ + coordinates:[ + {latitude: 32.47, longitude: -107.85}, + {latitude: 45.13, longitude: -94.48}, + {latitude: 39.27, longitude: -83.25}, + {latitude: 32.47, longitude: -107.85}, + ], + strokeColor: '#f007', + lineWidth: 3, + }], + }); + }; + } + + return ( + + ); + }, + +}); + var styles = StyleSheet.create({ map: { height: 150, @@ -373,4 +412,10 @@ exports.examples = [ return ; } }, + { + title: 'Custom overlay', + render() { + return ; + } + }, ]; diff --git a/Libraries/Components/MapView/MapView.js b/Libraries/Components/MapView/MapView.js index b0468e187..9324a2aec 100644 --- a/Libraries/Components/MapView/MapView.js +++ b/Libraries/Components/MapView/MapView.js @@ -45,7 +45,6 @@ var MapView = React.createClass({ // TODO: add a base64 (or similar) encoder here annotation.id = encodeURIComponent(JSON.stringify(annotation)); } - return annotation; }); @@ -54,16 +53,37 @@ var MapView = React.createClass({ }); }, + checkOverlayIds: function (overlays: Array) { + + var newOverlays = overlays.map(function (overlay) { + if (!overlay.id) { + // TODO: add a base64 (or similar) encoder here + overlay.id = encodeURIComponent(JSON.stringify(overlay)); + } + return overlay; + }); + + this.setState({ + overlays: newOverlays + }); + }, + componentWillMount: function() { if (this.props.annotations) { this.checkAnnotationIds(this.props.annotations); } + if (this.props.overlays) { + this.checkOverlayIds(this.props.overlays); + } }, componentWillReceiveProps: function(nextProps: Object) { if (nextProps.annotations) { this.checkAnnotationIds(nextProps.annotations); } + if (nextProps.overlays) { + this.checkOverlayIds(nextProps.overlays); + } }, propTypes: { @@ -195,11 +215,6 @@ var MapView = React.createClass({ onLeftCalloutPress: React.PropTypes.func, onRightCalloutPress: React.PropTypes.func, - /** - * annotation id - */ - id: React.PropTypes.string, - /** * The pin color. This can be any valid color string, or you can use one * of the predefined PinColors constants. Applies to both standard pins @@ -213,7 +228,36 @@ var MapView = React.createClass({ * @platform ios */ image: Image.propTypes.source, + + /** + * annotation id + */ + id: React.PropTypes.string, + })), + /** + * Map overlays + */ + overlays: React.PropTypes.arrayOf(React.PropTypes.shape({ + /** + * Polyline coordinates + */ + coordinates: React.PropTypes.arrayOf(React.PropTypes.shape({ + latitude: React.PropTypes.number.isRequired, + longitude: React.PropTypes.number.isRequired + })), + + /** + * Line attributes + */ + lineWidth: React.PropTypes.number, + strokeColor: React.PropTypes.string, + fillColor: React.PropTypes.string, + + /** + * Overlay id + */ + id: React.PropTypes.string })), /** @@ -255,7 +299,7 @@ var MapView = React.createClass({ render: function() { - let {annotations} = this.props; + let {annotations, overlays} = this.props; annotations = annotations && annotations.map((annotation: Object) => { let {tintColor, image} = annotation; return { @@ -264,10 +308,21 @@ var MapView = React.createClass({ image: image && resolveAssetSource(image), }; }); + overlays = overlays && overlays.map((overlay: Object) => { + let {strokeColor, fillColor} = overlay; + return { + ...overlay, + strokeColor: strokeColor && processColor(strokeColor), + fillColor: fillColor && processColor(fillColor), + }; + }); // TODO: these should be separate events, to reduce bridge traffic - if (annotations || this.props.onAnnotationPress) { + if (annotations) { var onPress = (event: Event) => { + if (!annotations) { + return; + } if (event.nativeEvent.action === 'annotation-click') { this.props.onAnnotationPress && this.props.onAnnotationPress(event.nativeEvent.annotation); @@ -308,6 +363,7 @@ var MapView = React.createClass({ diff --git a/React/React.xcodeproj/project.pbxproj b/React/React.xcodeproj/project.pbxproj index 4250901f6..92b4cf7f6 100644 --- a/React/React.xcodeproj/project.pbxproj +++ b/React/React.xcodeproj/project.pbxproj @@ -26,6 +26,7 @@ 13A1F71E1A75392D00D3D453 /* RCTKeyCommands.m in Sources */ = {isa = PBXBuildFile; fileRef = 13A1F71D1A75392D00D3D453 /* RCTKeyCommands.m */; }; 13AB90C11B6FA36700713B4F /* RCTComponentData.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AB90C01B6FA36700713B4F /* RCTComponentData.m */; }; 13AF20451AE707F9005F5298 /* RCTSlider.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AF20441AE707F9005F5298 /* RCTSlider.m */; }; + 13AFBCA01C07247D00BBAEAA /* RCTMapOverlay.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */; }; 13B07FEF1A69327A00A75B9A /* RCTAlertManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FE81A69327A00A75B9A /* RCTAlertManager.m */; }; 13B07FF01A69327A00A75B9A /* RCTExceptionsManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FEA1A69327A00A75B9A /* RCTExceptionsManager.m */; }; 13B07FF21A69327A00A75B9A /* RCTTiming.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FEE1A69327A00A75B9A /* RCTTiming.m */; }; @@ -38,7 +39,7 @@ 13B080201A69489C00A75B9A /* RCTActivityIndicatorViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080191A69489C00A75B9A /* RCTActivityIndicatorViewManager.m */; }; 13B080261A694A8400A75B9A /* RCTWrapperViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */; }; 13B202011BFB945300C07393 /* RCTPasteboard.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202001BFB945300C07393 /* RCTPasteboard.m */; }; - 13B202041BFB948C00C07393 /* RCTPointAnnotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202031BFB948C00C07393 /* RCTPointAnnotation.m */; }; + 13B202041BFB948C00C07393 /* RCTMapAnnotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202031BFB948C00C07393 /* RCTMapAnnotation.m */; }; 13C156051AB1A2840079392D /* RCTWebView.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156021AB1A2840079392D /* RCTWebView.m */; }; 13C156061AB1A2840079392D /* RCTWebViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156041AB1A2840079392D /* RCTWebViewManager.m */; }; 13CC8A821B17642100940AE7 /* RCTBorderDrawing.m in Sources */ = {isa = PBXBuildFile; fileRef = 13CC8A811B17642100940AE7 /* RCTBorderDrawing.m */; }; @@ -144,6 +145,10 @@ 13AF1F851AE6E777005F5298 /* RCTDefines.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDefines.h; sourceTree = ""; }; 13AF20431AE707F8005F5298 /* RCTSlider.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSlider.h; sourceTree = ""; }; 13AF20441AE707F9005F5298 /* RCTSlider.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSlider.m; sourceTree = ""; }; + 13AFBC9E1C07247D00BBAEAA /* RCTMapOverlay.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapOverlay.h; sourceTree = ""; }; + 13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapOverlay.m; sourceTree = ""; }; + 13AFBCA11C07287B00BBAEAA /* RCTBridgeMethod.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTBridgeMethod.h; sourceTree = ""; }; + 13AFBCA21C07287B00BBAEAA /* RCTRootViewDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRootViewDelegate.h; sourceTree = ""; }; 13B07FC71A68125100A75B9A /* Layout.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = Layout.c; sourceTree = ""; }; 13B07FC81A68125100A75B9A /* Layout.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = Layout.h; sourceTree = ""; }; 13B07FE71A69327A00A75B9A /* RCTAlertManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAlertManager.h; sourceTree = ""; }; @@ -170,8 +175,8 @@ 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWrapperViewController.m; sourceTree = ""; }; 13B201FF1BFB945300C07393 /* RCTPasteboard.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPasteboard.h; sourceTree = ""; }; 13B202001BFB945300C07393 /* RCTPasteboard.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPasteboard.m; sourceTree = ""; }; - 13B202021BFB948C00C07393 /* RCTPointAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPointAnnotation.h; sourceTree = ""; }; - 13B202031BFB948C00C07393 /* RCTPointAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPointAnnotation.m; sourceTree = ""; }; + 13B202021BFB948C00C07393 /* RCTMapAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapAnnotation.h; sourceTree = ""; }; + 13B202031BFB948C00C07393 /* RCTMapAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapAnnotation.m; sourceTree = ""; }; 13C156011AB1A2840079392D /* RCTWebView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebView.h; sourceTree = ""; }; 13C156021AB1A2840079392D /* RCTWebView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWebView.m; sourceTree = ""; }; 13C156031AB1A2840079392D /* RCTWebViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebViewManager.h; sourceTree = ""; }; @@ -342,11 +347,11 @@ 13CC8A811B17642100940AE7 /* RCTBorderDrawing.m */, 13C325281AA63B6A0048765F /* RCTComponent.h */, 13AB90BF1B6FA36700713B4F /* RCTComponentData.h */, + 13456E941ADAD482009F94A7 /* RCTConvert+MapKit.h */, 13AB90C01B6FA36700713B4F /* RCTComponentData.m */, 13EF7F441BC69646003F47DD /* RCTImageComponent.h */, 13456E911ADAD2DE009F94A7 /* RCTConvert+CoreLocation.h */, 13456E921ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m */, - 13456E941ADAD482009F94A7 /* RCTConvert+MapKit.h */, 13456E951ADAD482009F94A7 /* RCTConvert+MapKit.m */, 133CAE8C1B8E5CFD00F6AD92 /* RCTDatePicker.h */, 133CAE8D1B8E5CFD00F6AD92 /* RCTDatePicker.m */, @@ -354,6 +359,10 @@ 58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */, 14435CE11AAC4AE100FC20F4 /* RCTMap.h */, 14435CE21AAC4AE100FC20F4 /* RCTMap.m */, + 13B202021BFB948C00C07393 /* RCTMapAnnotation.h */, + 13B202031BFB948C00C07393 /* RCTMapAnnotation.m */, + 13AFBC9E1C07247D00BBAEAA /* RCTMapOverlay.h */, + 13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */, 14435CE31AAC4AE100FC20F4 /* RCTMapManager.h */, 14435CE41AAC4AE100FC20F4 /* RCTMapManager.m */, 83A1FE8A1B62640A00BE0E65 /* RCTModalHostView.h */, @@ -362,8 +371,6 @@ 83392EB21B6634E10013B15F /* RCTModalHostViewController.m */, 83A1FE8D1B62643A00BE0E65 /* RCTModalHostViewManager.h */, 83A1FE8E1B62643A00BE0E65 /* RCTModalHostViewManager.m */, - 13B202021BFB948C00C07393 /* RCTPointAnnotation.h */, - 13B202031BFB948C00C07393 /* RCTPointAnnotation.m */, 13B0800C1A69489C00A75B9A /* RCTNavigator.h */, 13B0800D1A69489C00A75B9A /* RCTNavigator.m */, 13B0800E1A69489C00A75B9A /* RCTNavigatorManager.h */, @@ -484,6 +491,7 @@ 83CBBA5F1A601EAA00E9B192 /* RCTBridge.m */, 1482F9E61B55B927000ADFF3 /* RCTBridgeDelegate.h */, 830213F31A654E0800B993E6 /* RCTBridgeModule.h */, + 13AFBCA11C07287B00BBAEAA /* RCTBridgeMethod.h */, 83CBBACA1A6023D300E9B192 /* RCTConvert.h */, 83CBBACB1A6023D300E9B192 /* RCTConvert.m */, 13AF1F851AE6E777005F5298 /* RCTDefines.h */, @@ -509,6 +517,7 @@ 142014171B32094000CC17BA /* RCTPerformanceLogger.m */, 830A229C1A66C68A008503DA /* RCTRootView.h */, 830A229D1A66C68A008503DA /* RCTRootView.m */, + 13AFBCA21C07287B00BBAEAA /* RCTRootViewDelegate.h */, 83CBBA961A6020BB00E9B192 /* RCTTouchHandler.h */, 83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */, 1345A83A1B265A0E00583190 /* RCTURLRequestDelegate.h */, @@ -619,7 +628,7 @@ 131B6AF41AF1093D00FFC3E0 /* RCTSegmentedControl.m in Sources */, 830A229E1A66C68A008503DA /* RCTRootView.m in Sources */, 13B07FF01A69327A00A75B9A /* RCTExceptionsManager.m in Sources */, - 13B202041BFB948C00C07393 /* RCTPointAnnotation.m in Sources */, + 13B202041BFB948C00C07393 /* RCTMapAnnotation.m in Sources */, 13A0C28A1B74F71200B29F6F /* RCTDevMenu.m in Sources */, 14C2CA711B3AC63800E6CBB2 /* RCTModuleMethod.m in Sources */, 13CC8A821B17642100940AE7 /* RCTBorderDrawing.m in Sources */, @@ -658,6 +667,7 @@ 83CBBA521A601E3B00E9B192 /* RCTLog.m in Sources */, 13B0801D1A69489C00A75B9A /* RCTNavItemManager.m in Sources */, 13E067571A70F44B002CDEE1 /* RCTView.m in Sources */, + 13AFBCA01C07247D00BBAEAA /* RCTMapOverlay.m in Sources */, 13456E931ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m in Sources */, 137327E91AA5CF210034F82E /* RCTTabBarItemManager.m in Sources */, 13A1F71E1A75392D00D3D453 /* RCTKeyCommands.m in Sources */, diff --git a/React/Views/RCTConvert+MapKit.h b/React/Views/RCTConvert+MapKit.h index d3e7fbc15..42add42d9 100644 --- a/React/Views/RCTConvert+MapKit.h +++ b/React/Views/RCTConvert+MapKit.h @@ -9,21 +9,24 @@ #import -#import "RCTPointAnnotation.h" #import "RCTConvert.h" +@class RCTMapAnnotation; +@class RCTMapOverlay; + @interface RCTConvert (MapKit) + (MKCoordinateSpan)MKCoordinateSpan:(id)json; + (MKCoordinateRegion)MKCoordinateRegion:(id)json; -+ (MKShape *)MKShape:(id)json; + (MKMapType)MKMapType:(id)json; -+ (RCTPointAnnotation *)RCTPointAnnotation:(id)json; -typedef NSArray MKShapeArray; -+ (MKShapeArray *)MKShapeArray:(id)json; ++ (RCTMapAnnotation *)RCTMapAnnotation:(id)json; ++ (RCTMapOverlay *)RCTMapOverlay:(id)json; -typedef NSArray RCTPointAnnotationArray; -+ (RCTPointAnnotationArray *)RCTPointAnnotationArray:(id)json; +typedef NSArray RCTMapAnnotationArray; ++ (NSArray *)RCTMapAnnotationArray:(id)json; + +typedef NSArray RCTMapOverlayArray; ++ (NSArray *)RCTMapOverlayArray:(id)json; @end diff --git a/React/Views/RCTConvert+MapKit.m b/React/Views/RCTConvert+MapKit.m index dab5b7661..78729fe04 100644 --- a/React/Views/RCTConvert+MapKit.m +++ b/React/Views/RCTConvert+MapKit.m @@ -9,7 +9,8 @@ #import "RCTConvert+MapKit.h" #import "RCTConvert+CoreLocation.h" -#import "RCTPointAnnotation.h" +#import "RCTMapAnnotation.h" +#import "RCTMapOverlay.h" @implementation RCTConvert(MapKit) @@ -30,45 +31,52 @@ }; } -+ (MKShape *)MKShape:(id)json -{ - json = [self NSDictionary:json]; - - // TODO: more shape types - MKShape *shape = [MKPointAnnotation new]; - shape.coordinate = [self CLLocationCoordinate2D:json]; - shape.title = [RCTConvert NSString:json[@"title"]]; - shape.subtitle = [RCTConvert NSString:json[@"subtitle"]]; - return shape; -} - -RCT_ARRAY_CONVERTER(MKShape) - RCT_ENUM_CONVERTER(MKMapType, (@{ @"standard": @(MKMapTypeStandard), @"satellite": @(MKMapTypeSatellite), @"hybrid": @(MKMapTypeHybrid), }), MKMapTypeStandard, integerValue) -+ (RCTPointAnnotation *)RCTPointAnnotation:(id)json ++ (RCTMapAnnotation *)RCTMapAnnotation:(id)json { json = [self NSDictionary:json]; - RCTPointAnnotation *shape = [RCTPointAnnotation new]; - shape.coordinate = [self CLLocationCoordinate2D:json]; - shape.title = [RCTConvert NSString:json[@"title"]]; - shape.subtitle = [RCTConvert NSString:json[@"subtitle"]]; - shape.identifier = [RCTConvert NSString:json[@"id"]]; - shape.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]]; - shape.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]]; - shape.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]]; - shape.tintColor = [RCTConvert UIColor:json[@"tintColor"]]; - shape.image = [RCTConvert UIImage:json[@"image"]]; - if (shape.tintColor && shape.image) { - shape.image = [shape.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; + RCTMapAnnotation *annotation = [RCTMapAnnotation new]; + annotation.coordinate = [self CLLocationCoordinate2D:json]; + annotation.title = [RCTConvert NSString:json[@"title"]]; + annotation.subtitle = [RCTConvert NSString:json[@"subtitle"]]; + annotation.identifier = [RCTConvert NSString:json[@"id"]]; + annotation.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]]; + annotation.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]]; + annotation.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]]; + annotation.tintColor = [RCTConvert UIColor:json[@"tintColor"]]; + annotation.image = [RCTConvert UIImage:json[@"image"]]; + if (annotation.tintColor && annotation.image) { + annotation.image = [annotation.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; } - return shape; + return annotation; } -RCT_ARRAY_CONVERTER(RCTPointAnnotation) +RCT_ARRAY_CONVERTER(RCTMapAnnotation) + ++ (RCTMapOverlay *)RCTMapOverlay:(id)json +{ + json = [self NSDictionary:json]; + NSArray *locations = [RCTConvert NSDictionaryArray:json[@"coordinates"]]; + CLLocationCoordinate2D coordinates[locations.count]; + NSUInteger index = 0; + for (NSDictionary *location in locations) { + coordinates[index++] = [RCTConvert CLLocationCoordinate2D:location]; + } + + RCTMapOverlay *overlay = [RCTMapOverlay polylineWithCoordinates:coordinates + count:locations.count]; + + overlay.strokeColor = [RCTConvert UIColor:json[@"strokeColor"]]; + overlay.identifier = [RCTConvert NSString:json[@"id"]]; + overlay.lineWidth = [RCTConvert CGFloat:json[@"lineWidth"] ?: @1]; + return overlay; +} + +RCT_ARRAY_CONVERTER(RCTMapOverlay) @end diff --git a/React/Views/RCTMap.h b/React/Views/RCTMap.h index c9025d6d3..a83bb93da 100644 --- a/React/Views/RCTMap.h +++ b/React/Views/RCTMap.h @@ -13,9 +13,9 @@ #import "RCTConvert+MapKit.h" #import "RCTComponent.h" -extern const CLLocationDegrees RCTMapDefaultSpan; -extern const NSTimeInterval RCTMapRegionChangeObserveInterval; -extern const CGFloat RCTMapZoomBoundBuffer; +RCT_EXTERN const CLLocationDegrees RCTMapDefaultSpan; +RCT_EXTERN const NSTimeInterval RCTMapRegionChangeObserveInterval; +RCT_EXTERN const CGFloat RCTMapZoomBoundBuffer; @interface RCTMap: MKMapView @@ -25,11 +25,13 @@ extern const CGFloat RCTMapZoomBoundBuffer; @property (nonatomic, assign) CGFloat maxDelta; @property (nonatomic, assign) UIEdgeInsets legalLabelInsets; @property (nonatomic, strong) NSTimer *regionChangeObserveTimer; -@property (nonatomic, copy) NSArray *annotationIds; +@property (nonatomic, copy) NSArray *annotationIDs; +@property (nonatomic, copy) NSArray *overlayIDs; @property (nonatomic, copy) RCTBubblingEventBlock onChange; @property (nonatomic, copy) RCTBubblingEventBlock onPress; -- (void)setAnnotations:(RCTPointAnnotationArray *)annotations; +- (void)setAnnotations:(RCTMapAnnotationArray *)annotations; +- (void)setOverlays:(RCTMapOverlayArray *)overlays; @end diff --git a/React/Views/RCTMap.m b/React/Views/RCTMap.m index 238c7a4d3..4f542c4c4 100644 --- a/React/Views/RCTMap.m +++ b/React/Views/RCTMap.m @@ -11,6 +11,8 @@ #import "RCTEventDispatcher.h" #import "RCTLog.h" +#import "RCTMapAnnotation.h" +#import "RCTMapOverlay.h" #import "RCTUtils.h" const CLLocationDegrees RCTMapDefaultSpan = 0.005; @@ -107,32 +109,34 @@ const CGFloat RCTMapZoomBoundBuffer = 0.01; [super setRegion:region animated:animated]; } -- (void)setAnnotations:(RCTPointAnnotationArray *)annotations +// TODO: this doesn't preserve order. Should it? If so we should change the +// algorithm. If not, it would be more efficient to use an NSSet +- (void)setAnnotations:(RCTMapAnnotationArray *)annotations { - NSMutableArray *newAnnotationIds = [NSMutableArray new]; - NSMutableArray *annotationsToDelete = [NSMutableArray new]; - NSMutableArray *annotationsToAdd = [NSMutableArray new]; + NSMutableArray *newAnnotationIDs = [NSMutableArray new]; + NSMutableArray *annotationsToDelete = [NSMutableArray new]; + NSMutableArray *annotationsToAdd = [NSMutableArray new]; - for (RCTPointAnnotation *annotation in annotations) { - if (![annotation isKindOfClass:[RCTPointAnnotation class]]) { + for (RCTMapAnnotation *annotation in annotations) { + if (![annotation isKindOfClass:[RCTMapAnnotation class]]) { continue; } - [newAnnotationIds addObject:annotation.identifier]; + [newAnnotationIDs addObject:annotation.identifier]; - // If the current set does not contain the new annotation, mark it as add - if (![self.annotationIds containsObject:annotation.identifier]) { + // If the current set does not contain the new annotation, mark it to add + if (![_annotationIDs containsObject:annotation.identifier]) { [annotationsToAdd addObject:annotation]; } } - for (RCTPointAnnotation *annotation in self.annotations) { - if (![annotation isKindOfClass:[RCTPointAnnotation class]]) { + for (RCTMapAnnotation *annotation in self.annotations) { + if (![annotation isKindOfClass:[RCTMapAnnotation class]]) { continue; } - // If the new set does not contain an existing annotation, mark it as delete - if (![newAnnotationIds containsObject:annotation.identifier]) { + // If the new set does not contain an existing annotation, mark it to delete + if (![newAnnotationIDs containsObject:annotation.identifier]) { [annotationsToDelete addObject:annotation]; } } @@ -145,14 +149,51 @@ const CGFloat RCTMapZoomBoundBuffer = 0.01; [self addAnnotations:(NSArray> *)annotationsToAdd]; } - NSMutableArray *newIds = [NSMutableArray new]; - for (RCTPointAnnotation *annotation in self.annotations) { - if ([annotation isKindOfClass:[MKUserLocation class]]) { + self.annotationIDs = newAnnotationIDs; +} + +// TODO: this doesn't preserve order. Should it? If so we should change the +// algorithm. If not, it would be more efficient to use an NSSet +- (void)setOverlays:(RCTMapOverlayArray *)overlays +{ + NSMutableArray *newOverlayIDs = [NSMutableArray new]; + NSMutableArray *overlaysToDelete = [NSMutableArray new]; + NSMutableArray *overlaysToAdd = [NSMutableArray new]; + + for (RCTMapOverlay *overlay in overlays) { + if (![overlay isKindOfClass:[RCTMapOverlay class]]) { continue; } - [newIds addObject:annotation.identifier]; + + [newOverlayIDs addObject:overlay.identifier]; + + // If the current set does not contain the new annotation, mark it to add + if (![_annotationIDs containsObject:overlay.identifier]) { + [overlaysToAdd addObject:overlay]; + } } - self.annotationIds = newIds; + + for (RCTMapOverlay *overlay in self.overlays) { + if (![overlay isKindOfClass:[RCTMapOverlay class]]) { + continue; + } + + // If the new set does not contain an existing annotation, mark it to delete + if (![newOverlayIDs containsObject:overlay.identifier]) { + [overlaysToDelete addObject:overlay]; + } + } + + if (overlaysToDelete.count) { + [self removeOverlays:(NSArray> *)overlaysToDelete]; + } + + if (overlaysToAdd.count) { + [self addOverlays:(NSArray> *)overlaysToAdd + level:MKOverlayLevelAboveRoads]; + } + + self.overlayIDs = newOverlayIDs; } @end diff --git a/React/Views/RCTPointAnnotation.h b/React/Views/RCTMapAnnotation.h similarity index 90% rename from React/Views/RCTPointAnnotation.h rename to React/Views/RCTMapAnnotation.h index 1ee8fb055..0f4479c48 100644 --- a/React/Views/RCTPointAnnotation.h +++ b/React/Views/RCTMapAnnotation.h @@ -9,7 +9,7 @@ #import -@interface RCTPointAnnotation : MKPointAnnotation +@interface RCTMapAnnotation : MKPointAnnotation @property (nonatomic, copy) NSString *identifier; @property (nonatomic, assign) BOOL hasLeftCallout; diff --git a/React/Views/RCTPointAnnotation.m b/React/Views/RCTMapAnnotation.m similarity index 82% rename from React/Views/RCTPointAnnotation.m rename to React/Views/RCTMapAnnotation.m index aaaf2d7e2..0b90fe8ab 100644 --- a/React/Views/RCTPointAnnotation.m +++ b/React/Views/RCTMapAnnotation.m @@ -7,8 +7,8 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -#import "RCTPointAnnotation.h" +#import "RCTMapAnnotation.h" -@implementation RCTPointAnnotation +@implementation RCTMapAnnotation @end diff --git a/React/Views/RCTMapManager.m b/React/Views/RCTMapManager.m index 75602578d..6c22c6b16 100644 --- a/React/Views/RCTMapManager.m +++ b/React/Views/RCTMapManager.m @@ -16,7 +16,8 @@ #import "RCTMap.h" #import "RCTUtils.h" #import "UIView+React.h" -#import "RCTPointAnnotation.h" +#import "RCTMapAnnotation.h" +#import "RCTMapOverlay.h" #import @@ -48,7 +49,8 @@ RCT_EXPORT_VIEW_PROPERTY(maxDelta, CGFloat) RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat) RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets) RCT_EXPORT_VIEW_PROPERTY(mapType, MKMapType) -RCT_EXPORT_VIEW_PROPERTY(annotations, RCTPointAnnotationArray) +RCT_EXPORT_VIEW_PROPERTY(annotations, RCTMapAnnotationArray) +RCT_EXPORT_VIEW_PROPERTY(overlays, RCTMapOverlayArray) RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock) RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock) RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap) @@ -71,9 +73,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap) - (void)mapView:(RCTMap *)mapView didSelectAnnotationView:(MKAnnotationView *)view { - if (mapView.onPress && [view.annotation isKindOfClass:[RCTPointAnnotation class]]) { + if (mapView.onPress && [view.annotation isKindOfClass:[RCTMapAnnotation class]]) { - RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation; + RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation; mapView.onPress(@{ @"action": @"annotation-click", @"annotation": @{ @@ -87,9 +89,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap) } } -- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTPointAnnotation *)annotation +- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTMapAnnotation *)annotation { - if (![annotation isKindOfClass:[RCTPointAnnotation class]]) { + if (![annotation isKindOfClass:[RCTMapAnnotation class]]) { return nil; } @@ -142,12 +144,24 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap) return annotationView; } +- (MKOverlayRenderer *)mapView:(__unused MKMapView *)mapView rendererForOverlay:(RCTMapOverlay *)overlay +{ + if ([overlay isKindOfClass:[RCTMapOverlay class]]) { + MKPolylineRenderer *polylineRenderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay]; + polylineRenderer.strokeColor = overlay.strokeColor; + polylineRenderer.lineWidth = overlay.lineWidth; + return polylineRenderer; + } else { + return nil; + } +} + - (void)mapView:(RCTMap *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control { if (mapView.onPress) { // Pass to js - RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation; + RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation; mapView.onPress(@{ @"side": (control == view.leftCalloutAccessoryView) ? @"left" : @"right", @"action": @"callout-click", diff --git a/React/Views/RCTMapOverlay.h b/React/Views/RCTMapOverlay.h new file mode 100644 index 000000000..a6fcdad5e --- /dev/null +++ b/React/Views/RCTMapOverlay.h @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +#import + +@interface RCTMapOverlay : MKPolyline + +@property (nonatomic, copy) NSString *identifier; +@property (nonatomic, strong) UIColor *strokeColor; +@property (nonatomic, assign) CGFloat lineWidth; + +@end diff --git a/React/Views/RCTMapOverlay.m b/React/Views/RCTMapOverlay.m new file mode 100644 index 000000000..2a52dd5b2 --- /dev/null +++ b/React/Views/RCTMapOverlay.m @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +#import "RCTMapOverlay.h" + +@implementation RCTMapOverlay + +@end