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

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}
       />