Merge pull request react-native-maps#2479 from marcelkalveram/master

add edgePadding to fitToSuppliedMarkers function

Author: alvelig

docs/mapview.md

@@ -76,7 +76,7 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
 | `animateToViewingAngle` | `angle: Number`, `duration: Number` |
 | `setMapBoundaries` | `northEast: LatLng`, `southWest: LatLng` | `GoogleMaps only`
 | `fitToElements` | `animated: Boolean` |
-| `fitToSuppliedMarkers` | `markerIDs: String[]`, `animated: Boolean` | If you need to use this in `ComponentDidMount`, make sure you put it in a timeout or it will cause performance problems.
+| `fitToSuppliedMarkers` | `markerIDs: String[], options: { edgePadding: EdgePadding, animated: Boolean }` | If you need to use this in `ComponentDidMount`, make sure you put it in a timeout or it will cause performance problems.
 | `fitToCoordinates` | `coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean }` | If called in `ComponentDidMount` in android, it will cause an exception. It is recommended to call it from the MapView `onLayout` event.
 | `pointForCoordinate` | `coordinate: LatLng` | Converts a map coordinate to a view coordinate (`Point`). Returns a `Promise<Point>`.
 | `coordinateForPoint` | `point: Point` | Converts a view coordinate (`Point`) to a map coordinate. Returns a `Promise<Coordinate>`.

index.d.ts

@@ -221,7 +221,7 @@ declare module "react-native-maps" {
         animateToBearing(bearing: number, duration?: number): void;
         animateToViewingAngle(angle: number, duration?: number): void;
         fitToElements(animated: boolean): void;
-        fitToSuppliedMarkers(markers: string[], animated: boolean): void;
+        fitToSuppliedMarkers(markers: string[], options?: { edgePadding?: EdgePadding, animated?: boolean }): void;
         fitToCoordinates(coordinates?: LatLng[], options?: { edgePadding?: EdgePadding, animated?: boolean }): void;
         setMapBoundaries(northEast: LatLng, southWest: LatLng): void;
         takeSnapshot(options?: SnapshotOptions): Promise<string>;

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -303,7 +303,7 @@ public void receiveCommand(AirMapView view, int commandId, @Nullable ReadableArr
         break;
 
       case FIT_TO_SUPPLIED_MARKERS:
-        view.fitToSuppliedMarkers(args.getArray(0), args.getBoolean(1));
+        view.fitToSuppliedMarkers(args.getArray(0), args.getMap(1), args.getBoolean(2));
         break;
 
       case FIT_TO_COORDINATES:

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

@@ -703,7 +703,7 @@ public void fitToElements(boolean animated) {
     }
   }
 
-  public void fitToSuppliedMarkers(ReadableArray markerIDsArray, boolean animated) {
+  public void fitToSuppliedMarkers(ReadableArray markerIDsArray, ReadableMap edgePadding, boolean animated) {
     if (map == null) return;
 
     LatLngBounds.Builder builder = new LatLngBounds.Builder();
@@ -731,6 +731,12 @@ public void fitToSuppliedMarkers(ReadableArray markerIDsArray, boolean animated)
     if (addedPosition) {
       LatLngBounds bounds = builder.build();
       CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, baseMapPadding);
+      
+      if (edgePadding != null) {
+        map.setPadding(edgePadding.getInt("left"), edgePadding.getInt("top"),
+          edgePadding.getInt("right"), edgePadding.getInt("bottom"));
+      }   
+      
       if (animated) {
         map.animateCamera(cu);
       } else {

lib/components/MapView.js

@@ -573,8 +573,13 @@ class MapView extends React.Component {
     this._runCommand('fitToElements', [animated]);
   }
 
-  fitToSuppliedMarkers(markers, animated) {
-    this._runCommand('fitToSuppliedMarkers', [markers, animated]);
+  fitToSuppliedMarkers(markers, options = {}) {
+    const {
+      edgePadding = { top: 0, right: 0, bottom: 0, left: 0 },
+      animated = true,
+    } = options;
+
+    this._runCommand('fitToSuppliedMarkers', [markers, edgePadding, animated]);
   }
 
   fitToCoordinates(coordinates = [], options = {}) {

lib/ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -200,6 +200,7 @@ - (UIView *)view
 
 RCT_EXPORT_METHOD(fitToSuppliedMarkers:(nonnull NSNumber *)reactTag
                   markers:(nonnull NSArray *)markers
+                  edgePadding:(nonnull NSDictionary *)edgePadding
                   animated:(BOOL)animated)
 {
   [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
@@ -222,7 +223,13 @@ - (UIView *)view
       for (AIRGoogleMapMarker *marker in filteredMarkers)
         bounds = [bounds includingCoordinate:marker.realMarker.position];
 
-      [mapView animateWithCameraUpdate:[GMSCameraUpdate fitBounds:bounds withPadding:55.0f]];
+      // Set Map viewport
+      CGFloat top = [RCTConvert CGFloat:edgePadding[@"top"]];
+      CGFloat right = [RCTConvert CGFloat:edgePadding[@"right"]];
+      CGFloat bottom = [RCTConvert CGFloat:edgePadding[@"bottom"]];
+      CGFloat left = [RCTConvert CGFloat:edgePadding[@"left"]];
+
+      [mapView animateWithCameraUpdate:[GMSCameraUpdate fitBounds:bounds withPadding:55.0f withEdgeInsets:UIEdgeInsetsMake(top, left, bottom, right)]];
     }
   }];
 }

lib/ios/AirMaps/AIRMapManager.m

@@ -252,6 +252,7 @@ - (UIView *)view
 
 RCT_EXPORT_METHOD(fitToSuppliedMarkers:(nonnull NSNumber *)reactTag
                   markers:(nonnull NSArray *)markers
+                  edgePadding:(nonnull NSDictionary *)edgePadding
                   animated:(BOOL)animated)
 {
     [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
@@ -270,7 +271,13 @@ - (UIView *)view
 
             NSArray *filteredMarkers = [mapView.annotations filteredArrayUsingPredicate:filterMarkers];
 
-            [mapView showAnnotations:filteredMarkers animated:animated];
+            CGFloat top = [RCTConvert CGFloat:edgePadding[@"top"]];
+            CGFloat right = [RCTConvert CGFloat:edgePadding[@"right"]];
+            CGFloat bottom = [RCTConvert CGFloat:edgePadding[@"bottom"]];
+            CGFloat left = [RCTConvert CGFloat:edgePadding[@"left"]];
+
+            [mapView showAnnotations:filteredMarkers edgePadding:UIEdgeInsetsMake(top, left, bottom, right) animated:animated];
+            
         }
     }];
 }