Add Polyline support to MapView

Summary: Per issue #1925, add support for Polyline to MapView. Briefly, if you have a MapView declared as: <MapView annotations={this.state.annotations} overlays={this.state.overlays} style={styles.map} region={this.state.region} ref="mapView" /> then setting this.state.overlays = [{ coordinates: [ { latitude: 35.5, longitude: -5.5 }, { latitude: 35.6, longitude: -5.6 }, ... ], strokeColor: 'rgba(255, 0, 0, 0.5)', lineWidth: 3, }]; will draw a red line between the points in locations with a width of 3 and equally blended with the background. Closes https://github.com/facebook/react-native/pull/4153 Reviewed By: svcscm Differential Revision: D2697347 Pulled By: nicklockwood fb-gh-sync-id: a436e4ed8d4e43f2872b39b4694fad7c02de8fe5
2015-11-26 07:09:59 -08:00 · 2015-11-26 07:09:59 -08:00 · 8911b72d9e
parent a636ddd9f0
commit 8911b72d9e
12 changed files with 296 additions and 85 deletions
--- 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 (
+      <MapView
+        style={styles.map}
+        onRegionChangeComplete={onRegionChangeComplete}
+        region={this.state.mapRegion}
+        overlays={this.state.overlays}
+      />
+    );
+  },
+
+});
+
 var styles = StyleSheet.create({
  map: {
    height: 150,
@ -373,4 +412,10 @@ exports.examples = [
      return  <CustomPinImageMapViewExample style={styles.map} />;
    }
  },
+  {
+    title: 'Custom overlay',
+    render() {
+      return  <CustomOverlayMapViewExample style={styles.map} />;
+    }
+  },
 ];
--- 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<Object>) {
+
+    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({
      <RCTMap
        {...this.props}
        annotations={annotations}
+        overlays={overlays}
        onPress={onPress}
        onChange={onChange}
      />
--- 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 = "<group>"; };
 		13AF20431AE707F8005F5298 /* RCTSlider.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSlider.h; sourceTree = "<group>"; };
 		13AF20441AE707F9005F5298 /* RCTSlider.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSlider.m; sourceTree = "<group>"; };
+		13AFBC9E1C07247D00BBAEAA /* RCTMapOverlay.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapOverlay.h; sourceTree = "<group>"; };
+		13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapOverlay.m; sourceTree = "<group>"; };
+		13AFBCA11C07287B00BBAEAA /* RCTBridgeMethod.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTBridgeMethod.h; sourceTree = "<group>"; };
+		13AFBCA21C07287B00BBAEAA /* RCTRootViewDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRootViewDelegate.h; sourceTree = "<group>"; };
 		13B07FC71A68125100A75B9A /* Layout.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = Layout.c; sourceTree = "<group>"; };
 		13B07FC81A68125100A75B9A /* Layout.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = Layout.h; sourceTree = "<group>"; };
 		13B07FE71A69327A00A75B9A /* RCTAlertManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAlertManager.h; sourceTree = "<group>"; };
@ -170,8 +175,8 @@
 		13B080241A694A8400A75B9A /* RCTWrapperViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWrapperViewController.m; sourceTree = "<group>"; };
 		13B201FF1BFB945300C07393 /* RCTPasteboard.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPasteboard.h; sourceTree = "<group>"; };
 		13B202001BFB945300C07393 /* RCTPasteboard.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPasteboard.m; sourceTree = "<group>"; };
-		13B202021BFB948C00C07393 /* RCTPointAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPointAnnotation.h; sourceTree = "<group>"; };
-		13B202031BFB948C00C07393 /* RCTPointAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPointAnnotation.m; sourceTree = "<group>"; };
+		13B202021BFB948C00C07393 /* RCTMapAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapAnnotation.h; sourceTree = "<group>"; };
+		13B202031BFB948C00C07393 /* RCTMapAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapAnnotation.m; sourceTree = "<group>"; };
 		13C156011AB1A2840079392D /* RCTWebView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebView.h; sourceTree = "<group>"; };
 		13C156021AB1A2840079392D /* RCTWebView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWebView.m; sourceTree = "<group>"; };
 		13C156031AB1A2840079392D /* RCTWebViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebViewManager.h; sourceTree = "<group>"; };
@ -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 */,
--- a/React/Views/RCTConvert+MapKit.h
+++ b/React/Views/RCTConvert+MapKit.h
@ -9,21 +9,24 @@

 #import <MapKit/MapKit.h>

-#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<RCTMapAnnotation *> *)RCTMapAnnotationArray:(id)json;
+
+typedef NSArray RCTMapOverlayArray;
+ (NSArray<RCTMapOverlay *> *)RCTMapOverlayArray:(id)json;

@end
--- 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<NSDictionary *> *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
--- 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<NSString *> *annotationIds;
+@property (nonatomic, copy) NSArray<NSString *> *annotationIDs;
+@property (nonatomic, copy) NSArray<NSString *> *overlayIDs;

@property (nonatomic, copy) RCTBubblingEventBlock onChange;
@property (nonatomic, copy) RCTBubblingEventBlock onPress;

- (void)setAnnotations:(RCTPointAnnotationArray *)annotations;
+- (void)setAnnotations:(RCTMapAnnotationArray *)annotations;
+- (void)setOverlays:(RCTMapOverlayArray *)overlays;

@end
--- 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<NSString *> *newAnnotationIds = [NSMutableArray new];
-  NSMutableArray<RCTPointAnnotation *> *annotationsToDelete = [NSMutableArray new];
-  NSMutableArray<RCTPointAnnotation *> *annotationsToAdd = [NSMutableArray new];
+  NSMutableArray<NSString *> *newAnnotationIDs = [NSMutableArray new];
+  NSMutableArray<RCTMapAnnotation *> *annotationsToDelete = [NSMutableArray new];
+  NSMutableArray<RCTMapAnnotation *> *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<id<MKAnnotation>> *)annotationsToAdd];
  }

-  NSMutableArray<NSString *> *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<id<MKOverlay>> *)overlaysToDelete];
+  }
+
+  if (overlaysToAdd.count) {
+    [self addOverlays:(NSArray<id<MKOverlay>> *)overlaysToAdd
+                level:MKOverlayLevelAboveRoads];
+  }
+
+  self.overlayIDs = newOverlayIDs;
 }

@end
--- a/React/Views/RCTPointAnnotation.h
+++ b/React/Views/RCTPointAnnotation.h
@ -9,7 +9,7 @@

 #import <MapKit/MapKit.h>

-@interface RCTPointAnnotation : MKPointAnnotation <MKAnnotation>
+@interface RCTMapAnnotation : MKPointAnnotation <MKAnnotation>

@property (nonatomic, copy) NSString *identifier;
@property (nonatomic, assign) BOOL hasLeftCallout;
--- a/React/Views/RCTPointAnnotation.m
+++ b/React/Views/RCTPointAnnotation.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
--- 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 <MapKit/MapKit.h>

@ -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",
--- a/React/Views/RCTMapOverlay.h
+++ 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 <MapKit/MapKit.h>
+
+@interface RCTMapOverlay : MKPolyline <MKAnnotation>
+
+@property (nonatomic, copy) NSString *identifier;
+@property (nonatomic, strong) UIColor *strokeColor;
+@property (nonatomic, assign) CGFloat lineWidth;
+
+@end
--- a/React/Views/RCTMapOverlay.m
+++ 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