react-native-maps 1.10.0 → 1.10.2

package/ios/AirMaps/AIRMap.h

@@ -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,6 +65,7 @@ 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;
@@ -71,6 +73,7 @@ extern const NSInteger AIRMapMaxZoomLevel;
 - (void)cacheViewIfNeeded;
 - (void)beginLoading;
 - (void)finishLoading;
+- (double)getZoomLevel;
 - (NSArray *)getMapBoundaries;
 
 - (AIRMapMarker*) markerAtPoint:(CGPoint)point;

package/ios/AirMaps/AIRMap.m

@@ -86,6 +86,7 @@ const NSInteger AIRMapMaxZoomLevel = 20;
         self.minZoomLevel = 0;
         self.maxZoomLevel = AIRMapMaxZoomLevel;
         self.compassOffset = CGPointMake(0, 0);
+        self.legacyZoomConstraintsEnabled = YES;
     }
     return self;
 }
@@ -466,6 +467,43 @@ const NSInteger AIRMapMaxZoomLevel = 20;
     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 @@ const NSInteger AIRMapMaxZoomLevel = 20;
     }
 }
 
+// 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

package/ios/AirMaps/AIRMapManager.m

@@ -110,6 +110,7 @@ RCT_EXPORT_VIEW_PROPERTY(compassOffset, CGPoint)
 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 @@ static int kDragCenterContext;
 
 - (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 @@ static int kDragCenterContext;
     [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 @@ static int kDragCenterContext;
 	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 {

package/lib/MapView.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated as RNAnimated, Animated, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { CalloutPressEvent, ClickEvent, Frame, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point, Provider, Region } from './sharedTypes';
-import { Address, BoundingBox, Camera, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuildingEvent, IndoorLevelActivatedEvent, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
+import { Address, BoundingBox, Camera, CameraZoomRange, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuildingEvent, IndoorLevelActivatedEvent, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
 import { Modify } from './sharedTypesInternal';
 import { MapViewNativeComponentType } from './MapViewNativeComponent';
 export declare const MAP_TYPES: MapTypes;
@@ -135,8 +135,8 @@ export type MapViewProps = ViewProps & {
      * The map type to be displayed
      *
      * @default `standard`
-     * @platform iOS: hybrid | mutedStandard | sattelite | standard | terrain
-     * @platform Android: hybrid | none | sattelite | standard | terrain
+     * @platform iOS: hybrid | mutedStandard | satellite | standard | terrain | hybridFlyover | satelliteFlyover
+     * @platform Android: hybrid | none | satellite | standard | terrain
      */
     mapType?: MapType;
     /**
@@ -152,6 +152,7 @@ export type MapViewProps = ViewProps & {
      * @default 20
      * @platform iOS: Supported
      * @platform Android: Supported
+     * @deprecated on Apple Maps, use `cameraZoomRange` instead
      */
     maxZoomLevel?: number;
     /**
@@ -167,6 +168,7 @@ export type MapViewProps = ViewProps & {
      * @default 0
      * @platform iOS: Supported
      * @platform Android: Supported
+     * @deprecated on Apple Maps, use `cameraZoomRange` instead
      */
     minZoomLevel?: number;
     /**
@@ -560,6 +562,15 @@ 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<MapViewProps, {
     region?: MapViewProps['region'] | null;

package/lib/MapView.js

@@ -36,6 +36,8 @@ exports.MAP_TYPES = {
     TERRAIN: 'terrain',
     NONE: 'none',
     MUTEDSTANDARD: 'mutedStandard',
+    SATELLITE_FLYOVER: 'satelliteFlyover',
+    HYBRID_FLYOVER: 'hybridFlyover',
 };
 const GOOGLE_MAPS_ONLY_TYPES = [exports.MAP_TYPES.TERRAIN, exports.MAP_TYPES.NONE];
 class MapView extends React.Component {

package/lib/MapView.types.d.ts

@@ -19,12 +19,12 @@ export type MapStyleElement = {
     stylers: object[];
 };
 export type EdgePadding = {
-    top: Number;
-    right: Number;
-    bottom: Number;
-    left: Number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
 };
-export type MapType = 'hybrid' | 'mutedStandard' | 'none' | 'satellite' | 'standard' | 'terrain';
+export type MapType = 'hybrid' | 'mutedStandard' | 'none' | 'satellite' | 'standard' | 'terrain' | 'satelliteFlyover' | 'hybridFlyover';
 export type MapTypes = {
     STANDARD: 'standard';
     SATELLITE: 'satellite';
@@ -32,6 +32,8 @@ export type MapTypes = {
     TERRAIN: 'terrain';
     NONE: 'none';
     MUTEDSTANDARD: 'mutedStandard';
+    SATELLITE_FLYOVER: 'satelliteFlyover';
+    HYBRID_FLYOVER: 'hybridFlyover';
 };
 export type IndoorLevel = {
     index: number;
@@ -151,4 +153,9 @@ export type Address = {
     thoroughfare: string;
     subThoroughfare?: string;
 };
+export type CameraZoomRange = {
+    minCenterCoordinateDistance?: number;
+    maxCenterCoordinateDistance?: number;
+    animated?: boolean;
+};
 export type NativeCommandName = 'animateCamera' | 'animateToRegion' | 'coordinateForPoint' | 'fitToCoordinates' | 'fitToElements' | 'fitToSuppliedMarkers' | 'getAddressFromCoordinates' | 'getCamera' | 'getMapBoundaries' | 'getMarkersFrames' | 'pointForCoordinate' | 'setCamera' | 'setIndoorActiveLevelIndex' | 'setMapBoundaries' | 'takeSnapshot';

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "author": "Leland Richardson <leland.m.richardson@gmail.com>",
   "homepage": "https://github.com/react-native-maps/react-native-maps#readme",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",