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

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} />;
+    }
+  },
 ];