diff --git a/Examples/UIExplorer/MapViewExample.js b/Examples/UIExplorer/MapViewExample.js index ab6bd0717d8ec4..c9d5948d248de2 100644 --- a/Examples/UIExplorer/MapViewExample.js +++ b/Examples/UIExplorer/MapViewExample.js @@ -153,6 +153,7 @@ var MapViewExample = React.createClass({ mapRegionInput: null, annotations: null, isFirstLoad: true, + pins: null, }; }, @@ -165,6 +166,7 @@ var MapViewExample = React.createClass({ onRegionChangeComplete={this._onRegionChangeComplete} region={this.state.mapRegion} annotations={this.state.annotations} + pins={this.state.pins} /> = 0; i--) { + pin = { + title: 'Pin number ' + i, + subtitle: 'My cool subtitle', + latitude: region.latitude + (region.latitudeDelta * Math.random() * 2 - region.latitudeDelta), + longitude: region.longitude + (region.longitudeDelta * Math.random() * 2 - region.longitudeDelta) + }; + + arr.push(pin); + }; + + return arr; + }, + _getAnnotations(region) { return [{ longitude: region.longitude, @@ -193,6 +213,7 @@ var MapViewExample = React.createClass({ this.setState({ mapRegionInput: region, annotations: this._getAnnotations(region), + pins: this._getPins(region), isFirstLoad: false, }); } @@ -203,6 +224,7 @@ var MapViewExample = React.createClass({ mapRegion: region, mapRegionInput: region, annotations: this._getAnnotations(region), + pins: this._getPins(region), }); }, diff --git a/Libraries/Components/MapView/MapView.js b/Libraries/Components/MapView/MapView.js index 7beeabbeac5f78..413d2cc957682a 100644 --- a/Libraries/Components/MapView/MapView.js +++ b/Libraries/Components/MapView/MapView.js @@ -128,6 +128,16 @@ var MapView = React.createClass({ */ legalLabelInsets: EdgeInsetsPropType, + /** + * Pins displayed on the map, with a title, latitude and longitude + */ + pins: React.PropTypes.arrayOf(React.PropTypes.shape({ + title: React.PropTypes.string, + subtitle: React.PropTypes.string, + latitude: React.PropTypes.number.isRequired, + longitude: React.PropTypes.number.isRequired, + })), + /** * Callback that is called continuously when the user is dragging the map. */ @@ -163,6 +173,7 @@ var MapView = React.createClass({ maxDelta={this.props.maxDelta} minDelta={this.props.minDelta} legalLabelInsets={this.props.legalLabelInsets} + pins={this.props.pins} onChange={this._onChange} onTouchStart={this.props.onTouchStart} onTouchMove={this.props.onTouchMove} @@ -186,6 +197,7 @@ var RCTMap = createReactIOSNativeComponentClass({ annotations: {diff: deepDiffer}, maxDelta: true, minDelta: true, + pins: true, legalLabelInsets: {diff: insetsDiffer}, } ), diff --git a/React/Views/RCTMap.h b/React/Views/RCTMap.h index 89e4c0a8088ff7..30f9d95d742643 100644 --- a/React/Views/RCTMap.h +++ b/React/Views/RCTMap.h @@ -26,6 +26,7 @@ extern const CGFloat RCTMapZoomBoundBuffer; @property (nonatomic, assign) CGFloat maxDelta; @property (nonatomic, assign) UIEdgeInsets legalLabelInsets; @property (nonatomic, strong) NSTimer *regionChangeObserveTimer; +@property (nonatomic, copy) NSArray *pins; - (void)setAnnotations:(MKShapeArray *)annotations; diff --git a/React/Views/RCTMap.m b/React/Views/RCTMap.m index 187303ac282481..e66270cfdcaab1 100644 --- a/React/Views/RCTMap.m +++ b/React/Views/RCTMap.m @@ -20,6 +20,7 @@ @implementation RCTMap { UIView *_legalLabel; + NSArray *_pins; CLLocationManager *_locationManager; } @@ -72,6 +73,12 @@ - (void)layoutSubviews _legalLabel.frame = frame; }); } + + if (_pins) { + for (NSDictionary *pin in _pins) { + [self _addPin:pin ToMapView:self]; + } + } } #pragma mark Accessors @@ -112,6 +119,15 @@ - (void)setRegion:(MKCoordinateRegion)region [super setRegion:region animated:YES]; } + +- (void)setPins:(NSArray *)pins +{ + if (_pins != pins) { + _pins = [pins copy]; + [self setNeedsLayout]; + } +} + - (void)setAnnotations:(MKShapeArray *)annotations { [self removeAnnotations:self.annotations]; @@ -120,4 +136,18 @@ - (void)setAnnotations:(MKShapeArray *)annotations } } +#pragma mark Private + +- (void)_addPin:(NSDictionary *)pinObject ToMapView:(RCTMap *)mapView +{ + MKPointAnnotation *pin = [[MKPointAnnotation alloc] init]; + CLLocationCoordinate2D coords; + coords.latitude = [[pinObject valueForKey:@"latitude"] doubleValue]; + coords.longitude = [[pinObject valueForKey:@"longitude"] doubleValue]; + pin.coordinate = coords; + + pin.title = [pinObject valueForKey:@"title"]; + pin.subtitle = [pinObject valueForKey:@"subtitle"]; + [mapView addAnnotation:pin]; +} @end diff --git a/React/Views/RCTMapManager.m b/React/Views/RCTMapManager.m index 52b635fd6b1d5d..41641e2721e42f 100644 --- a/React/Views/RCTMapManager.m +++ b/React/Views/RCTMapManager.m @@ -42,6 +42,7 @@ - (UIView *)view RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat) RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets) RCT_EXPORT_VIEW_PROPERTY(region, MKCoordinateRegion) +RCT_EXPORT_VIEW_PROPERTY(pins, NSDictionaryArray) RCT_EXPORT_VIEW_PROPERTY(annotations, MKShapeArray)