Added Pins (MKPointAnnotations) to map

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}
         />
         <MapRegionInput
           onChange={this._onRegionInputChanged}
@@ -174,6 +176,24 @@ var MapViewExample = React.createClass({
     );
   },
 
+  _getPins(region) {
+    var arr = [],
+      pin;
+
+    for (var i = 4; i >= 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),
     });
   },
 

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},
     }
   ),

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;
 

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

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)