fix(AIRMap): support iOS MapKit zoomConstraints for better zoom handling especially for 3d maps (react-native-maps#4905)

* fix(AIRMap): include rotation in zoom calculations

* fix(AIRMapManager): fix zoom constrains feature

* fix(MapView): add flyover maps to MapView types

* docs(MapView): format docs & add flyover maps

* fix(AIRMapManager): fix flyover maps zoom constrains

* fix(AIRMap): optimize camera zoom range assignment

* fix(AIRMap): remove private API use

* fix(AIRMap): remove NSLogs

* fix(AIRMap): change affected map types

* fix(AIRMap): add cameraZoomRange property to mapView

* docs(AIRMap): add documentation for cameraZoomRange property

* fix(AIRMap): remove unused variable

* fix(AIRMap): move conditional statement to another function

* fix(AIRMap): fix typo

* fix(AIRMap): remove redundant assertion

* fix(AIRMap): change variable name

* fix(AIRMap): change variable name

---------

Co-authored-by: Jan Kozinski <[email protected]>

Author: jan-kozinski

docs/mapview.md

@@ -33,6 +33,7 @@ extern const NSInteger AIRMapMaxZoomLevel;
 @property (nonatomic, assign) BOOL hasStartedRendering;
 @property (nonatomic, assign) BOOL cacheEnabled;
 @property (nonatomic, assign) BOOL loadingEnabled;
+@property (nonatomic, assign) BOOL legacyZoomConstraintsEnabled;
 @property (nonatomic, strong) UIColor *loadingBackgroundColor;
 @property (nonatomic, strong) UIColor *loadingIndicatorColor;
 @property (nonatomic, assign) BOOL hasShownInitialLoading;
@@ -64,13 +65,15 @@ extern const NSInteger AIRMapMaxZoomLevel;
 @property (nonatomic, copy) RCTDirectEventBlock onMarkerDragStart;
 @property (nonatomic, copy) RCTDirectEventBlock onMarkerDrag;
 @property (nonatomic, copy) RCTDirectEventBlock onMarkerDragEnd;
+
 @property (nonatomic, copy) RCTDirectEventBlock onCalloutPress;
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChange;
 @property (nonatomic, copy) RCTBubblingEventBlock onUserLocationChange;
 
 - (void)cacheViewIfNeeded;
 - (void)beginLoading;
 - (void)finishLoading;
+- (double)getZoomLevel;
 - (NSArray *)getMapBoundaries;
 
 - (AIRMapMarker*) markerAtPoint:(CGPoint)point;

ios/AirMaps/AIRMap.h

@@ -86,6 +86,7 @@ - (instancetype)init
         self.minZoomLevel = 0;
         self.maxZoomLevel = AIRMapMaxZoomLevel;
         self.compassOffset = CGPointMake(0, 0);
+        self.legacyZoomConstraintsEnabled = YES;
     }
     return self;
 }
@@ -466,6 +467,43 @@ - (void)setLoadingIndicatorColor:(UIColor *)loadingIndicatorColor {
     self.activityIndicatorView.color = loadingIndicatorColor;
 }
 
+- (void)setCameraZoomRange:(NSDictionary *)cameraZoomRange {
+    if (!@available(iOS 13.0, *)) {
+        return;
+    }
+
+    if (cameraZoomRange == nil) {
+        cameraZoomRange = @{};
+    }
+
+    NSNumber *minValue = cameraZoomRange[@"minCenterCoordinateDistance"];
+    NSNumber *maxValue = cameraZoomRange[@"maxCenterCoordinateDistance"];
+
+    if (minValue == nil && maxValue == nil) {
+        self.legacyZoomConstraintsEnabled = YES;
+
+        MKMapCameraZoomRange *defaultZoomRange = [[MKMapCameraZoomRange alloc] initWithMinCenterCoordinateDistance:MKMapCameraZoomDefault maxCenterCoordinateDistance:MKMapCameraZoomDefault];
+        [super setCameraZoomRange:defaultZoomRange animated:NO];
+
+        return;
+    }
+
+    MKMapCameraZoomRange *zoomRange = nil;
+
+    if (minValue != nil && maxValue != nil) {
+        zoomRange = [[MKMapCameraZoomRange alloc] initWithMinCenterCoordinateDistance:[minValue doubleValue] maxCenterCoordinateDistance:[maxValue doubleValue]];
+    } else if (minValue != nil) {
+        zoomRange = [[MKMapCameraZoomRange alloc] initWithMinCenterCoordinateDistance:[minValue doubleValue]];
+    } else if (maxValue != nil) {
+        zoomRange = [[MKMapCameraZoomRange alloc] initWithMaxCenterCoordinateDistance:[maxValue doubleValue]];
+    }
+
+    BOOL animated = [cameraZoomRange[@"animated"] boolValue];
+
+    self.legacyZoomConstraintsEnabled = NO;
+    [super setCameraZoomRange:zoomRange animated:animated];
+}
+
 // Include properties of MKMapView which are only available on iOS 9+
 // and check if their selector is available before calling super method.
 
@@ -675,4 +713,26 @@ - (void)layoutSubviews {
     }
 }
 
+// based on https://medium.com/@dmytrobabych/getting-actual-rotation-and-zoom-level-for-mapkit-mkmapview-e7f03f430aa9
+- (CGFloat)getZoomLevel {
+    CGFloat cameraAngle = self.camera.heading;
+
+    if (cameraAngle > 270) {
+        cameraAngle = 360 - cameraAngle;
+    } else if (cameraAngle > 90) {
+        cameraAngle = fabs(cameraAngle - 180);
+    }
+
+    CGFloat angleRad = M_PI * cameraAngle / 180; // map rotation in radians
+    CGFloat width = self.frame.size.width;
+    CGFloat height = self.frame.size.height;
+    CGFloat heightOffset = 20; // the offset (status bar height) which is taken by MapKit into consideration to calculate visible area height
+
+    // calculating Longitude span corresponding to normal (non-rotated) width
+    CGFloat spanStraight = width * self.region.span.longitudeDelta / (width * cos(angleRad) + (height - heightOffset) * sin(angleRad));
+    int normalizingFactor = 512;
+
+    return log2(360 * ((width / normalizingFactor) / spanStraight));
+}
+
 @end

ios/AirMaps/AIRMap.m

@@ -110,6 +110,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(mapPadding, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(mapType, MKMapType)
+RCT_EXPORT_VIEW_PROPERTY(cameraZoomRange, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPanDrag, RCTBubblingEventBlock)
@@ -941,19 +942,14 @@ - (void)mapViewDidChangeVisibleRegion:(AIRMap *)mapView
 
 - (void)mapView:(AIRMap *)mapView regionDidChangeAnimated:(__unused BOOL)animated
 {
-    CGFloat zoomLevel = [self zoomLevel:mapView];
-
     // Don't send region did change events until map has
     // started rendering, as these won't represent the final location
     if(mapView.hasStartedRendering){
         [self _regionChanged:mapView];
     }
 
-    if (zoomLevel < mapView.minZoomLevel) {
-      [self setCenterCoordinate:[mapView centerCoordinate] zoomLevel:mapView.minZoomLevel animated:TRUE mapView:mapView];
-    }
-    else if (zoomLevel > mapView.maxZoomLevel) {
-      [self setCenterCoordinate:[mapView centerCoordinate] zoomLevel:mapView.maxZoomLevel animated:TRUE mapView:mapView];
+    if (mapView.legacyZoomConstraintsEnabled == YES) {
+        [self applyLegacyZoomConstrains:mapView];
     }
 
     // Don't send region did change events until map has
@@ -1165,6 +1161,22 @@ - (void)setCenterCoordinate:(CLLocationCoordinate2D)centerCoordinate
     [mapView setRegion:region animated:animated];
 }
 
+-(void)applyLegacyZoomConstrains:(AIRMap *)mapView {
+    // flyover maps don't use mercator projection so we can't calculate their zoom level.
+    if (mapView.mapType == MKMapTypeHybridFlyover || mapView.mapType == MKMapTypeSatelliteFlyover) {
+        return;
+    } 
+
+    CGFloat zoomLevel = [mapView getZoomLevel];
+
+    if (zoomLevel < mapView.minZoomLevel) {
+      [self setCenterCoordinate:[mapView centerCoordinate] zoomLevel:mapView.minZoomLevel animated:TRUE mapView:mapView];
+    }
+    else if (zoomLevel > mapView.maxZoomLevel) {
+      [self setCenterCoordinate:[mapView centerCoordinate] zoomLevel:mapView.maxZoomLevel animated:TRUE mapView:mapView];
+    }
+}
+
 //KMapView cannot display tiles that cross the pole (as these would involve wrapping the map from top to bottom, something that a Mercator projection just cannot do).
 -(MKCoordinateRegion)coordinateRegionWithMapView:(AIRMap *)mapView
                                 centerCoordinate:(CLLocationCoordinate2D)centerCoordinate
@@ -1223,21 +1235,6 @@ -(MKCoordinateRegion)coordinateRegionWithMapView:(AIRMap *)mapView
 	return region;
 }
 
-- (double) zoomLevel:(AIRMap *)mapView {
-    MKCoordinateRegion region = mapView.region;
-
-    double centerPixelX = [AIRMapManager longitudeToPixelSpaceX: region.center.longitude];
-    double topLeftPixelX = [AIRMapManager longitudeToPixelSpaceX: region.center.longitude - region.span.longitudeDelta / 2];
-
-    double scaledMapWidth = (centerPixelX - topLeftPixelX) * 2;
-    CGSize mapSizeInPixels = mapView.bounds.size;
-    double zoomScale = scaledMapWidth / mapSizeInPixels.width;
-    double zoomExponent = log(zoomScale) / log(2);
-    double zoomLevel = AIRMapMaxZoomLevel - zoomExponent;
-
-    return zoomLevel;
-}
-
 #pragma mark MKMapViewDelegate - Tracking the User Location
 
 - (void)mapView:(AIRMap *)mapView didFailToLocateUserWithError:(NSError *)error {

ios/AirMaps/AIRMapManager.m

@@ -36,6 +36,7 @@ import {
   Address,
   BoundingBox,
   Camera,
+  CameraZoomRange,
   ChangeEvent,
   Details,
   EdgePadding,
@@ -64,6 +65,8 @@ export const MAP_TYPES: MapTypes = {
   TERRAIN: 'terrain',
   NONE: 'none',
   MUTEDSTANDARD: 'mutedStandard',
+  SATELLITE_FLYOVER: 'satelliteFlyover',
+  HYBRID_FLYOVER: 'hybridFlyover',
 };
 
 const GOOGLE_MAPS_ONLY_TYPES: MapType[] = [MAP_TYPES.TERRAIN, MAP_TYPES.NONE];
@@ -213,7 +216,7 @@ export type MapViewProps = ViewProps & {
    * The map type to be displayed
    *
    * @default `standard`
-   * @platform iOS: hybrid | mutedStandard | satellite | standard | terrain
+   * @platform iOS: hybrid | mutedStandard | satellite | standard | terrain | hybridFlyover | satelliteFlyover
    * @platform Android: hybrid | none | satellite | standard | terrain
    */
   mapType?: MapType;
@@ -232,6 +235,7 @@ export type MapViewProps = ViewProps & {
    * @default 20
    * @platform iOS: Supported
    * @platform Android: Supported
+   * @deprecated on Apple Maps, use `cameraZoomRange` instead
    */
   maxZoomLevel?: number;
 
@@ -249,6 +253,7 @@ export type MapViewProps = ViewProps & {
    * @default 0
    * @platform iOS: Supported
    * @platform Android: Supported
+   * @deprecated on Apple Maps, use `cameraZoomRange` instead
    */
   minZoomLevel?: number;
 
@@ -690,6 +695,16 @@ export type MapViewProps = ViewProps & {
    * @platform Android: Not supported
    */
   zoomTapEnabled?: boolean;
+
+  /**
+   * Map camera distance limits. `minCenterCoordinateDistance` for minimum distance, `maxCenterCoordinateDistance` for maximum.
+   * `animated` for animated zoom changes.
+   * Takes precedence if conflicting with `minZoomLevel`, `maxZoomLevel`.
+   *
+   * @platform iOS: 13.0+
+   * @platform Android: Not supported
+   */
+  cameraZoomRange?: CameraZoomRange;
 };
 
 type ModifiedProps = Modify<

src/MapView.tsx

@@ -38,7 +38,9 @@ export type MapType =
   | 'none'
   | 'satellite'
   | 'standard'
-  | 'terrain';
+  | 'terrain'
+  | 'satelliteFlyover'
+  | 'hybridFlyover';
 
 export type MapTypes = {
   STANDARD: 'standard';
@@ -47,6 +49,8 @@ export type MapTypes = {
   TERRAIN: 'terrain';
   NONE: 'none';
   MUTEDSTANDARD: 'mutedStandard';
+  SATELLITE_FLYOVER: 'satelliteFlyover';
+  HYBRID_FLYOVER: 'hybridFlyover';
 };
 
 export type IndoorLevel = {
@@ -184,6 +188,12 @@ export type Address = {
   subThoroughfare?: string;
 };
 
+export type CameraZoomRange = {
+  minCenterCoordinateDistance?: number;
+  maxCenterCoordinateDistance?: number;
+  animated?: boolean;
+};
+
 export type NativeCommandName =
   | 'animateCamera'
   | 'animateToRegion'