diff --git a/API.md b/API.md index 91f1fea..2546d39 100644 --- a/API.md +++ b/API.md @@ -81,21 +81,29 @@ this._map.setDirection(direction, animated = true, callback); this._map.setZoomLevel(zoomLevel, animated = true, callback); this._map.setCenterCoordinate(latitude, longitude, animated = true, callback); this._map.setCenterCoordinateZoomLevel(latitude, longitude, zoomLevel, animated = true, callback); -this._map.setCenterCoordinateZoomLevelPitch(latitude, longitude, zoomLevel, pitch, animated = true, callback); // Android only -this._map.setPitch(pitch, animated = true, callback); // Android only -this._map.easeTo({ latitude, longitude, zoomLevel, direction, pitch }, animated = true, callback); +this._map.setCenterCoordinateZoomLevelPitch(latitude, longitude, zoomLevel, pitch, animated = true, callback); +this._map.setPitch(pitch, animated = true, callback); +this._map.easeTo({ latitude, longitude, zoomLevel, altitude, direction, pitch }, animated = true, callback); ``` This set of methods sets the location the map is centered on, the zoom level, -the heading and the pitch (Android only) of the map. +the heading and the pitch of the map. The transition to the desired location is animated by default, but can be made instantaneous by passing `animated` as `false`. For `easeTo`, all arguments inside the options object are optional. You can specify -any combination of center coords, zoomLevel, direction and pitch. What is not +any combination of center coords, zoomLevel, altitude, direction and pitch. What is not specified stays at their current values. +The `altitude` refers to the viewing altitude of the camera. It's a replacement for `zoomLevel`, +hence `zoomLevel` and `altitude` must not be specified at the same time. + +On iOS, `pitch` can't be specified at the same time as `zoomLevel`. `altitude` must +be used instead. + +`altitude` is not available on Android. + The methods accept an optional `callback` that will get fired when the animation has ended. Additionally, the return value is a promise that gets resolved when the animation has ended. @@ -117,20 +125,6 @@ The transition is animated unless you pass `animated` as `false`. --- -```javascript -this._map.setCamera(latitude, longitude, fromDistance, pitch, direction, animationDuration = 0.3); // iOS Only -``` - -This method only works on iOS. - -Sets the map pitched at an angle (`pitch`, measured in -degrees, 0 is from straight above), looking towards `latitude` and `longitude` -from `fromDistance` meters away, pointing towards heading `direction`. - -Use `animationDuration` to adjust the speed of the transition. - ---- - ```javascript this._map.getCenterCoordinateZoomLevel(data => { // ... diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java index db6bf5b..301c22e 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java @@ -174,7 +174,6 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager this._map && this._map.setCenterCoordinateZoomLevel(35.68829, 139.77492, 14)}> Go to Tokyo at fixed zoom level 14 + this._map && this._map.easeTo({ pitch: 30 })}> + Set pitch to 30 degrees + Add new marker diff --git a/index.js b/index.js index 5780b94..2cb9cb9 100644 --- a/index.js +++ b/index.js @@ -190,10 +190,6 @@ class MapView extends Component { return promise; } - setCamera(latitude, longitude, zoomLevel, pitch, direction, duration = 0.3) { - MapboxGLManager.setCamera(findNodeHandle(this), latitude, longitude, zoomLevel, pitch, direction, duration); - } - setVisibleCoordinateBounds(latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop = 0, paddingRight = 0, paddingBottom = 0, paddingLeft = 0, animated = true) { MapboxGLManager.setVisibleCoordinateBounds(findNodeHandle(this), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft, animated); } diff --git a/ios/RCTMapboxGL/RCTMapboxGL.h b/ios/RCTMapboxGL/RCTMapboxGL.h index cf28b41..6b65d35 100644 --- a/ios/RCTMapboxGL/RCTMapboxGL.h +++ b/ios/RCTMapboxGL/RCTMapboxGL.h @@ -35,7 +35,7 @@ // Imperative methods - (void)setCenterCoordinate:(CLLocationCoordinate2D)coordinates zoomLevel:(double)zoomLevel direction:(double)direction animated:(BOOL)animated completionHandler:(void (^)())callback; -- (void)setCamera:(MGLMapCamera*)camera withDuration:(int)duration animationTimingFunction:(CAMediaTimingFunction*)function; +- (void)setCamera:(MGLMapCamera *)camera withDuration:(NSTimeInterval)duration animationTimingFunction:(nullable CAMediaTimingFunction *)function completionHandler:(nullable void (^)(void))handler; - (void)setVisibleCoordinateBounds:(MGLCoordinateBounds)bounds edgePadding:(UIEdgeInsets)padding animated:(BOOL)animated; - (void)selectAnnotation:(NSString*)selectedId animated:(BOOL)animated; @@ -49,6 +49,7 @@ - (double)zoomLevel; - (double)direction; - (double)pitch; +- (MGLMapCamera*)camera; - (CLLocationCoordinate2D)centerCoordinate; // Events diff --git a/ios/RCTMapboxGL/RCTMapboxGL.m b/ios/RCTMapboxGL/RCTMapboxGL.m index aac5c07..1534c15 100644 --- a/ios/RCTMapboxGL/RCTMapboxGL.m +++ b/ios/RCTMapboxGL/RCTMapboxGL.m @@ -386,6 +386,11 @@ return _map.zoomLevel; } +-(MGLMapCamera*)camera { + if (!_map) { return nil; } + return _map.camera; +} + // Imperative methods - (void)setCenterCoordinate:(CLLocationCoordinate2D)coordinate zoomLevel:(double)zoomLevel direction:(double)direction animated:(BOOL)animated completionHandler:(void (^)())callback @@ -404,9 +409,9 @@ completionHandler:callback]; } -- (void)setCamera:(MGLMapCamera*)camera withDuration:(int)duration animationTimingFunction:(CAMediaTimingFunction*)function +- (void)setCamera:(MGLMapCamera *)camera withDuration:(NSTimeInterval)duration animationTimingFunction:(nullable CAMediaTimingFunction *)function completionHandler:(nullable void (^)(void))handler { - [_map setCamera: camera withDuration:duration animationTimingFunction:function]; + [_map setCamera: camera withDuration:duration animationTimingFunction:function completionHandler:handler]; } - (void)setVisibleCoordinateBounds:(MGLCoordinateBounds)bounds edgePadding:(UIEdgeInsets)padding animated:(BOOL)animated diff --git a/ios/RCTMapboxGL/RCTMapboxGLManager.m b/ios/RCTMapboxGL/RCTMapboxGLManager.m index d371a95..facc3e4 100644 --- a/ios/RCTMapboxGL/RCTMapboxGLManager.m +++ b/ios/RCTMapboxGL/RCTMapboxGLManager.m @@ -495,9 +495,17 @@ RCT_EXPORT_METHOD(easeTo:(nonnull NSNumber *)reactTag NSNumber * longitude = options[@"longitude"]; NSNumber * zoom = options[@"zoomLevel"]; NSNumber * direction = options[@"direction"]; + NSNumber * pitch = options[@"pitch"]; + NSNumber * altitude = options[@"altitude"]; - if (options[@"pitch"]) { - RCTLogWarn(@"Pitch is not supported for MapView.easeTo() on iOS. Use MapView.setCamera() instead."); + if (pitch && zoom) { + RCTLogError(@"Pitch and zoomLevel can't be set together with MapView.easeTo() on iOS. Use altitude instead of zoomLevel"); + return; + } + + if (zoom && altitude) { + RCTLogError(@"Altitude and zoomLevel are mutually exclusive with MapView.easeTo()"); + return; } CLLocationCoordinate2D _center = (latitude && longitude) @@ -505,34 +513,35 @@ RCT_EXPORT_METHOD(easeTo:(nonnull NSNumber *)reactTag : mapView.centerCoordinate; double _direction = direction ? [direction doubleValue] : mapView.direction; - double _zoomLevel = zoom ? [zoom doubleValue] : mapView.zoomLevel; - [mapView setCenterCoordinate: _center - zoomLevel: _zoomLevel - direction: _direction - animated: animated - completionHandler: ^{ - callback(@[[NSNull null]]); - }]; - } - }]; -} - -RCT_EXPORT_METHOD(setCamera:(nonnull NSNumber *)reactTag - latitude:(float) latitude - longitude:(float) longitude - fromDistance:(int) fromDistance - pitch:(int) pitch - heading:(int) heading - duration:(int) duration) -{ - CLLocationCoordinate2D center = CLLocationCoordinate2DMake(latitude, longitude); - MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:center fromDistance:fromDistance pitch:pitch heading:heading]; - - [_bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary *viewRegistry) { - RCTMapboxGL *mapView = viewRegistry[reactTag]; - if ([mapView isKindOfClass:[RCTMapboxGL class]]) { - [mapView setCamera:camera withDuration:duration animationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; + if (pitch || altitude) { + MGLMapCamera * oldCamera = (!pitch || !altitude) ? mapView.camera : nil; + double _altitude = altitude ? [altitude doubleValue] : oldCamera ? oldCamera.altitude : 0; + double _pitch = pitch ? [pitch doubleValue] : oldCamera ? oldCamera.pitch : 0; + + MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:_center + fromDistance:_altitude + pitch:_pitch + heading:_direction]; + + [mapView setCamera: camera + withDuration: 0.3 + animationTimingFunction: [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] + completionHandler: ^{ + callback(@[[NSNull null]]); + }]; + + } else { + double _zoomLevel = zoom ? [zoom doubleValue] : mapView.zoomLevel; + + [mapView setCenterCoordinate: _center + zoomLevel: _zoomLevel + direction: _direction + animated: animated + completionHandler: ^{ + callback(@[[NSNull null]]); + }]; + } } }]; }