react-native-maps 2.0.0-beta.11 → 2.0.0-beta.12

package/android/src/main/java/com/rnmaps/maps/MapViewModule.java

@@ -434,26 +434,34 @@ public class MapViewModule extends ReactContextBaseJavaModule {
           promise.reject("RNMMapView.map is not valid");
           return;
         }
-        LatLngBounds.Builder builder = new LatLngBounds.Builder();
-
         boolean addedPosition = false;
 
+        double maxLatitude = -Double.MAX_VALUE;
+        double minLatitude = Double.MAX_VALUE;
+        double maxLongitude = -Double.MAX_VALUE;
+        double minLongitude = Double.MAX_VALUE;
+
         for (MapFeature feature : view.features) {
           if (feature instanceof MapMarker) {
-            Marker marker = (Marker) feature.getFeature();
-            builder.include(marker.getPosition());
+            LatLng position = ((Marker) feature.getFeature()).getPosition();
+            maxLatitude = Math.max(maxLatitude, position.latitude);
+            minLatitude = Math.min(minLatitude, position.latitude);
+            maxLongitude = Math.max(maxLongitude, position.longitude);
+            minLongitude = Math.min(minLongitude, position.longitude);
             addedPosition = true;
           }
           // TODO(lmr): may want to include shapes / etc.
         }
-        if (addedPosition) {
-          LatLngBounds bounds = builder.build();
-          CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, view.baseMapPadding);
-
-          if (edgePadding != null) {
-            view.map.setPadding(edgePadding.getInt("left"), edgePadding.getInt("top"),
-                    edgePadding.getInt("right"), edgePadding.getInt("bottom"));
-          }
+        if(!addedPosition) {
+          // nothing to do
+          promise.resolve(null);
+        } else {
+          Map<String, Double> paddedBoundary = padBoundary(view, maxLatitude, minLatitude, maxLongitude, minLongitude, edgePadding);
+          LatLngBounds bounds = new LatLngBounds(
+                  new LatLng(paddedBoundary.get("minLatitude"), paddedBoundary.get("minLongitude")), // southwest
+                  new LatLng(paddedBoundary.get("maxLatitude"), paddedBoundary.get("maxLongitude"))  // northeast
+          );
+          CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 0);
 
           if (duration > 0) {
             view.map.animateCamera(cu, duration, new GoogleMap.CancelableCallback() {
@@ -491,7 +499,6 @@ public class MapViewModule extends ReactContextBaseJavaModule {
           promise.reject("RNMMapView.map is not valid");
           return;
         }
-        LatLngBounds.Builder builder = new LatLngBounds.Builder();
 
         String[] markerIDs = new String[markersIds.size()];
         for (int i = 0; i < markersIds.size(); i++) {
@@ -502,25 +509,35 @@ public class MapViewModule extends ReactContextBaseJavaModule {
 
         List<String> markerIDList = Arrays.asList(markerIDs);
 
+        double maxLatitude = -Double.MAX_VALUE;
+        double minLatitude = Double.MAX_VALUE;
+        double maxLongitude = -Double.MAX_VALUE;
+        double minLongitude = Double.MAX_VALUE;
+
         for (MapFeature feature : view.features) {
           if (feature instanceof MapMarker) {
             String identifier = ((MapMarker) feature).getIdentifier();
-            Marker marker = (Marker) feature.getFeature();
             if (markerIDList.contains(identifier)) {
-              builder.include(marker.getPosition());
+              LatLng position = ((Marker) feature.getFeature()).getPosition();
+              maxLatitude = Math.max(maxLatitude, position.latitude);
+              minLatitude = Math.min(minLatitude, position.latitude);
+              maxLongitude = Math.max(maxLongitude, position.longitude);
+              minLongitude = Math.min(minLongitude, position.longitude);
               addedPosition = true;
             }
           }
         }
 
-        if (addedPosition) {
-          LatLngBounds bounds = builder.build();
-          CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, view.baseMapPadding);
-
-          if (edgePadding != null) {
-            view.map.setPadding(edgePadding.getInt("left"), edgePadding.getInt("top"),
-                    edgePadding.getInt("right"), edgePadding.getInt("bottom"));
-          }
+        if(!addedPosition) {
+          // nothing to do
+          promise.resolve(null);
+        } else {
+          Map<String, Double> paddedBoundary = padBoundary(view, maxLatitude, minLatitude, maxLongitude, minLongitude, edgePadding);
+          LatLngBounds bounds = new LatLngBounds(
+                  new LatLng(paddedBoundary.get("minLatitude"), paddedBoundary.get("minLongitude")), // southwest
+                  new LatLng(paddedBoundary.get("maxLatitude"), paddedBoundary.get("maxLongitude"))  // northeast
+          );
+          CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 0);
 
           if (duration > 0) {
             view.map.animateCamera(cu, duration, new GoogleMap.CancelableCallback() {
@@ -558,21 +575,28 @@ public class MapViewModule extends ReactContextBaseJavaModule {
           return;
         }
 
-        LatLngBounds.Builder builder = new LatLngBounds.Builder();
+        double maxLatitude = -Double.MAX_VALUE;
+        double minLatitude = Double.MAX_VALUE;
+        double maxLongitude = -Double.MAX_VALUE;
+        double minLongitude = Double.MAX_VALUE;
 
         for (int i = 0; i < coordinates.size(); i++) {
           ReadableMap latLng = coordinates.getMap(i);
           double lat = latLng.getDouble("latitude");
           double lng = latLng.getDouble("longitude");
-          builder.include(new LatLng(lat, lng));
+          maxLatitude = Math.max(maxLatitude, lat);
+          minLatitude = Math.min(minLatitude, lat);
+          maxLongitude = Math.max(maxLongitude, lng);
+          minLongitude = Math.min(minLongitude, lng);
         }
 
-        LatLngBounds bounds = builder.build();
-        CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, view.baseMapPadding);
+        Map<String, Double> paddedBoundary = padBoundary(view, maxLatitude, minLatitude, maxLongitude, minLongitude, edgePadding);
+        LatLngBounds bounds = new LatLngBounds(
+                new LatLng(paddedBoundary.get("minLatitude"), paddedBoundary.get("minLongitude")), // southwest
+                new LatLng(paddedBoundary.get("maxLatitude"), paddedBoundary.get("maxLongitude"))  // northeast
+        );
 
-        if (edgePadding != null) {
-          view.appendMapPadding(edgePadding.getInt("left"), edgePadding.getInt("top"), edgePadding.getInt("right"), edgePadding.getInt("bottom"));
-        }
+        CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, 0);
 
         if (duration > 0) {
           view.map.animateCamera(cu, duration, new GoogleMap.CancelableCallback() {
@@ -590,9 +614,29 @@ public class MapViewModule extends ReactContextBaseJavaModule {
           view.map.moveCamera(cu);
           promise.resolve(null);
         }
-        // Move the google logo to the default base padding value.
-        view.map.setPadding(view.baseLeftMapPadding, view.baseTopMapPadding, view.baseRightMapPadding, view.baseBottomMapPadding);
       }
     });
   }
+
+  private Map<String, Double> padBoundary(MapView mapView, double maxLat, double minLat, double maxLng, double minLng, ReadableMap edgePadding) {
+    double latitudeDelta = maxLat - minLat;
+    double longitudeDelta = maxLng - minLng;
+    float displayDensity = context.getResources().getDisplayMetrics().density;
+    double mapViewHeight = mapView.getHeight() / displayDensity;
+    double mapViewWidth = mapView.getWidth() / displayDensity;
+    double latPerHeight = latitudeDelta / mapViewHeight;
+    double lngPerWidth = longitudeDelta / mapViewWidth;
+    double paddedMaxLatitude = maxLat + latPerHeight * edgePadding.getInt("top");
+    double paddedMinLatitude = minLat - latPerHeight * edgePadding.getInt("bottom");
+    double paddedMaxLongitude = maxLng + lngPerWidth * edgePadding.getInt("right");
+    double paddedMinLongitude = minLng - lngPerWidth * edgePadding.getInt("left");
+
+    Map<String,Double> paddedBoundary = new HashMap<String,Double>();
+    paddedBoundary.put("maxLatitude", paddedMaxLatitude);
+    paddedBoundary.put("minLatitude", paddedMinLatitude);
+    paddedBoundary.put("maxLongitude", paddedMaxLongitude);
+    paddedBoundary.put("minLongitude", paddedMinLongitude);
+
+    return paddedBoundary;
+  }
 }

package/ios/GoogleMaps/RNMGoogleMapViewModule.m

@@ -261,17 +261,13 @@ RCT_EXPORT_METHOD(fitToElements:(nonnull NSNumber *)reactTag
         
         GMSCameraUpdate* cameraUpdate;
         
-        if ([edgePadding count] != 0) {
-            // 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"]];
+        // 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"]];
             
-            cameraUpdate = [GMSCameraUpdate fitBounds:bounds withEdgeInsets:UIEdgeInsetsMake(top, left, bottom, right)];
-        } else {
-            cameraUpdate = [GMSCameraUpdate fitBounds:bounds withPadding:55.0f];
-        }
+        cameraUpdate = [GMSCameraUpdate fitBounds:bounds withEdgeInsets:UIEdgeInsetsMake(top, left, bottom, right)];
       if (duration > 0.0f) {
         [CATransaction begin];
         [CATransaction setCompletionBlock:^{

package/ios/Maps/RNMMapViewModule.m

@@ -287,21 +287,62 @@ RCT_EXPORT_METHOD(fitToElements:(nonnull NSNumber *)reactTag
             RCTLogError(@"Invalid view returned from registry, expecting RNMMap, got: %@", view);
         } else {
             RNMMap *mapView = (RNMMap *)view;
+            
+            if(mapView.annotations.count < 1) {
+                resolve(nil);
+            } else {
+                CLLocationDegrees minLatitude = DBL_MAX;
+                CLLocationDegrees maxLatitude = -DBL_MAX;
+                CLLocationDegrees minLongitude = DBL_MAX;
+                CLLocationDegrees maxLongitude = -DBL_MAX;
+                
+                for(id<MKAnnotation> annotation in mapView.annotations) {
+                    double annotationLat = annotation.coordinate.latitude;
+                    double annotationLong = annotation.coordinate.longitude;
+                    minLatitude = fmin(annotationLat, minLatitude);
+                    maxLatitude = fmax(annotationLat, maxLatitude);
+                    minLongitude = fmin(annotationLong, minLongitude);
+                    maxLongitude = fmax(annotationLong, maxLongitude);
+                }
+                
+                double latitudeDelta = maxLatitude - minLatitude;
+                double longitudeDelta = maxLongitude - minLongitude;
+                
+                double mapViewHeight = mapView.bounds.size.height;
+                double mapViewWidth = mapView.bounds.size.width;
+                
+                double latPerHeight = latitudeDelta / mapViewHeight;
+                double lngPerWidth = longitudeDelta / mapViewWidth;
+                
+                CGFloat topPadding = [RCTConvert CGFloat:edgePadding[@"top"]];
+                CGFloat rightPadding = [RCTConvert CGFloat:edgePadding[@"right"]];
+                CGFloat bottomPadding = [RCTConvert CGFloat:edgePadding[@"bottom"]];
+                CGFloat leftPadding = [RCTConvert CGFloat:edgePadding[@"left"]];
+                
+                maxLatitude = maxLatitude + topPadding * latPerHeight;
+                minLatitude = minLatitude - bottomPadding * latPerHeight;
+                maxLongitude = maxLongitude + rightPadding * lngPerWidth;
+                minLongitude = minLongitude - leftPadding * lngPerWidth;
+                
+                MKCoordinateRegion region;
+                region.center.latitude = (minLatitude + maxLatitude) / 2;
+                region.center.longitude = (minLongitude + maxLongitude) / 2;
+                // if fitting a single marker or if all markers are aligned, the delta will be zero (infinite zoom)
+                // this will cause mapkit not to zoom at all. Picking an arbitrary small number to circumvent
+                region.span.latitudeDelta = fmax(maxLatitude - minLatitude, 0.000001);
+                region.span.longitudeDelta = fmax(maxLongitude - minLongitude, 0.000001);
 
-            // TODO(lmr): we potentially want to include overlays here... and could concat the two arrays together.
-            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
                 if(duration > 0.0f) {
                     [RNMMap animateWithDuration:duration/1000 animations:^{
-                        [mapView showAnnotations:mapView.annotations animated:YES];
+                        [mapView setRegion:region animated:YES];
                     } completion:^(BOOL finished){
                         resolve(nil);
                     }];
                 } else {
-                    [mapView showAnnotations:mapView.annotations animated:NO];
+                    [mapView setRegion:region animated:NO];
                     resolve(nil);
                 }
-                
-            });
+            }
         }
     }];
 }
@@ -328,17 +369,62 @@ RCT_EXPORT_METHOD(fitToSuppliedMarkers:(nonnull NSNumber *)reactTag
             }];
 
             NSArray *filteredMarkers = [mapView.annotations filteredArrayUsingPredicate:filterMarkers];
+            
+            if(filteredMarkers.count < 1) {
+                resolve(nil);
+            } else {
+                CLLocationDegrees minLatitude = DBL_MAX;
+                CLLocationDegrees maxLatitude = -DBL_MAX;
+                CLLocationDegrees minLongitude = DBL_MAX;
+                CLLocationDegrees maxLongitude = -DBL_MAX;
+                
+                for(id<MKAnnotation> annotation in filteredMarkers) {
+                    double annotationLat = annotation.coordinate.latitude;
+                    double annotationLong = annotation.coordinate.longitude;
+                    minLatitude = fmin(annotationLat, minLatitude);
+                    maxLatitude = fmax(annotationLat, maxLatitude);
+                    minLongitude = fmin(annotationLong, minLongitude);
+                    maxLongitude = fmax(annotationLong, maxLongitude);
+                }
+                
+                double latitudeDelta = maxLatitude - minLatitude;
+                double longitudeDelta = maxLongitude - minLongitude;
+                
+                double mapViewHeight = mapView.bounds.size.height;
+                double mapViewWidth = mapView.bounds.size.width;
+                
+                double latPerHeight = latitudeDelta / mapViewHeight;
+                double lngPerWidth = longitudeDelta / mapViewWidth;
+                
+                CGFloat topPadding = [RCTConvert CGFloat:edgePadding[@"top"]];
+                CGFloat rightPadding = [RCTConvert CGFloat:edgePadding[@"right"]];
+                CGFloat bottomPadding = [RCTConvert CGFloat:edgePadding[@"bottom"]];
+                CGFloat leftPadding = [RCTConvert CGFloat:edgePadding[@"left"]];
+                
+                maxLatitude = maxLatitude + topPadding * latPerHeight;
+                minLatitude = minLatitude - bottomPadding * latPerHeight;
+                maxLongitude = maxLongitude + rightPadding * lngPerWidth;
+                minLongitude = minLongitude - leftPadding * lngPerWidth;
+                
+                MKCoordinateRegion region;
+                region.center.latitude = (minLatitude + maxLatitude) / 2;
+                region.center.longitude = (minLongitude + maxLongitude) / 2;
+                // if fitting a single marker or if all markers are aligned, the delta will be zero (infinite zoom)
+                // this will cause mapkit not to zoom at all. Picking an arbitrary small number to circumvent
+                region.span.latitudeDelta = fmax(maxLatitude - minLatitude, 0.000001);
+                region.span.longitudeDelta = fmax(maxLongitude - minLongitude, 0.000001);
 
-            if(duration > 0.0f) {
-                [RNMMap animateWithDuration:duration/1000 animations:^{
-                [mapView showAnnotations:filteredMarkers animated:YES];
-                } completion:^(BOOL finished){
-                    resolve(nil);
-                }];
+                if(duration > 0.0f) {
+                    [RNMMap animateWithDuration:duration/1000 animations:^{
+                        [mapView setRegion:region animated:YES];
+                    } completion:^(BOOL finished){
+                        resolve(nil);
+                    }];
                 } else {
-                [mapView showAnnotations:filteredMarkers animated:NO];
+                    [mapView setRegion:region animated:NO];
                     resolve(nil);
                 }
+            }
         }
     }];
 }

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": "2.0.0-beta.11",
+  "version": "2.0.0-beta.12",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",