Skip to content

Commit

Permalink
[iOS - Google Maps] Fix animateToCoordinate and animateToRegion (reac…
Browse files Browse the repository at this point in the history
…t-native-maps#1115)

* Add animateToCoordinate to Google Maps on iOS

* Add animate to random coordinate button in example app

* Fix animateToRegion duration for Google Maps on iOS
  • Loading branch information
ryankask authored and patricio committed Sep 27, 2017
1 parent e8f1aae commit e895ca4
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 12 deletions.
36 changes: 28 additions & 8 deletions example/examples/DisplayLatLng.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,25 @@ class DisplayLatLng extends React.Component {
this.map.animateToRegion(this.randomRegion());
}

randomRegion() {
const { region } = this.state;
animateRandomCoordinate() {
this.map.animateToCoordinate(this.randomCoordinate());
}

randomCoordinate() {
const region = this.state.region;
return {
...this.state.region,
latitude: region.latitude + ((Math.random() - 0.5) * (region.latitudeDelta / 2)),
longitude: region.longitude + ((Math.random() - 0.5) * (region.longitudeDelta / 2)),
};
}

randomRegion() {
return {
...this.state.region,
...this.randomCoordinate(),
};
}

render() {
return (
<View style={styles.container}>
Expand All @@ -74,13 +84,19 @@ class DisplayLatLng extends React.Component {
onPress={() => this.jumpRandom()}
style={[styles.bubble, styles.button]}
>
<Text>Jump</Text>
<Text style={styles.buttonText}>Jump</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.animateRandom()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
<Text style={styles.buttonText}>Animate (Region)</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.animateRandomCoordinate()}
style={[styles.bubble, styles.button]}
>
<Text style={styles.buttonText}>Animate (Coordinate)</Text>
</TouchableOpacity>
</View>
</View>
Expand Down Expand Up @@ -112,16 +128,20 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
},
button: {
width: 80,
paddingHorizontal: 12,
width: 100,
paddingHorizontal: 8,
alignItems: 'center',
marginHorizontal: 10,
justifyContent: 'center',
marginHorizontal: 5,
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
},
buttonText: {
textAlign: 'center',
},
});

module.exports = DisplayLatLng;
30 changes: 26 additions & 4 deletions lib/ios/AirGoogleMaps/AIRGoogleMapManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
#import "RCTConvert+AirMap.h"

#import <MapKit/MapKit.h>
#import <QuartzCore/QuartzCore.h>

static NSString *const RCTMapViewKey = @"MapView";

Expand Down Expand Up @@ -75,10 +76,31 @@ - (UIView *)view
if (![view isKindOfClass:[AIRGoogleMap class]]) {
RCTLogError(@"Invalid view returned from registry, expecting AIRGoogleMap, got: %@", view);
} else {
[AIRGoogleMap animateWithDuration:duration/1000 animations:^{
GMSCameraPosition* camera = [AIRGoogleMap makeGMSCameraPositionFromMap:(AIRGoogleMap *)view andMKCoordinateRegion:region];
[(AIRGoogleMap *)view animateToCameraPosition:camera];
}];
// Core Animation must be used to control the animation's duration
// See http://stackoverflow.com/a/15663039/171744
[CATransaction begin];
[CATransaction setAnimationDuration:duration/1000];
AIRGoogleMap *mapView = (AIRGoogleMap *)view;
GMSCameraPosition *camera = [AIRGoogleMap makeGMSCameraPositionFromMap:mapView andMKCoordinateRegion:region];
[mapView animateToCameraPosition:camera];
[CATransaction commit];
}
}];
}

RCT_EXPORT_METHOD(animateToCoordinate:(nonnull NSNumber *)reactTag
withRegion:(CLLocationCoordinate2D)latlng
withDuration:(CGFloat)duration)
{
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
id view = viewRegistry[reactTag];
if (![view isKindOfClass:[AIRGoogleMap class]]) {
RCTLogError(@"Invalid view returned from registry, expecting AIRGoogleMap, got: %@", view);
} else {
[CATransaction begin];
[CATransaction setAnimationDuration:duration/1000];
[(AIRGoogleMap *)view animateToLocation:latlng];
[CATransaction commit];
}
}];
}
Expand Down

0 comments on commit e895ca4

Please sign in to comment.