Permalink
Browse files

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 #4153

Reviewed By: svcscm

Differential Revision: D2697347

Pulled By: nicklockwood

fb-gh-sync-id: a436e4ed8d4e43f2872b39b4694fad7c02de8fe5
  • Loading branch information...
timfpark authored and facebook-github-bot-3 committed Nov 26, 2015
1 parent a636ddd commit 8911b72d9e78d78b6f8eb99efe21b1205047fd16
@@ -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} />;
}
},
];
@@ -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}
/>
@@ -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,18 +347,22 @@
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 */,
58C571C01AA56C1900CDF9C8 /* RCTDatePickerManager.h */,
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 */,
@@ -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 RCTMapAnnotationArray;
+ (NSArray<RCTMapAnnotation *> *)RCTMapAnnotationArray:(id)json;
typedef NSArray RCTPointAnnotationArray;
+ (RCTPointAnnotationArray *)RCTPointAnnotationArray:(id)json;
typedef NSArray RCTMapOverlayArray;
+ (NSArray<RCTMapOverlay *> *)RCTMapOverlayArray:(id)json;
@end
Oops, something went wrong.

0 comments on commit 8911b72

Please sign in to comment.