feat(MapView): implement boundary for Apple Maps

BREAKING CHANGE: drop support for iOS < 13.0.
react-native-maps · Apr 29, 2023 · 079e7ab · 079e7ab
1 parent 2505c3f
commit 079e7ab
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 51 deletions.
diff --git a/docs/mapview.md b/docs/mapview.md
@@ -4,7 +4,7 @@
 
 | Prop                              | Type                                 | Default      | Note                                                                                                                                                                                                                                                                                                                                                               |
 | --------------------------------- | ------------------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `boundary`                        | `BoundingBox`                        |              | A boundary of an area within which the map’s center needs to remain. **Note:** Google Maps only.                                                                                                                                                                                                                                                                   |
+| `boundary`                        | `BoundingBox`                        |              | A boundary of an area within which the map’s center needs to remain.                                                                                                                                                                                                                                                                                               |
 | `cacheEnabled`                    | `Boolean`                            | `false`      | If `true` map will be cached and displayed as an image instead of being interactable, for performance usage. **Note:** Apple Maps only                                                                                                                                                                                                                             |
 | `camera`                          | `Camera`                             |              | The camera view the map should display. If you use this, the `region` property is ignored.                                                                                                                                                                                                                                                                         |
 | `compassOffset`                   | `Point`                              |              | If set, changes the position of the compass. **Note:** iOS Maps only.                                                                                                                                                                                                                                                                                              |

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -493,7 +493,7 @@ SPEC CHECKSUMS:
   React-jsinspector: d76d32327f21d4f40dcf696231fdbbca60de4711
   React-logger: 1b3522f1e05c6360e93df3607a016c39e30a7351
   react-native-google-maps: 73059b1016aaebf00c4b56781871bb678d92a219
-  react-native-maps: 0323b83cf962d5486bc68ae910e9dd828dd82e14
+  react-native-maps: 12ab4f2f9613c41d226c0152d725de49c6b37e29
   React-perflogger: cce000b5caa4bcecbb29ee9cfdb47f26202d2599
   React-RCTActionSheet: ba29f52a82d970e2aba5804490ecaea587c7a751
   React-RCTAnimation: 36efe35933875c9aeea612f7d2c0394fa22552c1

diff --git a/ios/Maps/RCTConvert+RNMMap.m b/ios/Maps/RCTConvert+RNMMap.m
@@ -56,6 +56,23 @@ + (MKMapCamera*)MKMapCameraWithDefaults:(id)json existingCamera:(MKMapCamera*)ca
     return camera;
 }
 
++ (MKMapCameraBoundary *)MKMapCameraBoundary:(id)json
+{
+    json = [self NSDictionary:json];
+    CLLocationCoordinate2D northEast = [self CLLocationCoordinate2D:json[@"northEast"]];
+    CLLocationCoordinate2D southWest = [self CLLocationCoordinate2D:json[@"southWest"]];
+    MKCoordinateSpan span = {
+        northEast.latitude - southWest.latitude,
+        northEast.longitude - southWest.longitude
+    };
+    CLLocationCoordinate2D center = {
+        (northEast.latitude + southWest.latitude) / 2,
+        (northEast.longitude + southWest.longitude) / 2
+    };
+
+    MKCoordinateRegion region = {center, span}; 
+    return [[MKMapCameraBoundary alloc] initWithCoordinateRegion:region];
+}
 
 RCT_ENUM_CONVERTER(MKMapType, (@{
   @"standard": @(MKMapTypeStandard),

diff --git a/ios/Maps/RNMMap.m b/ios/Maps/RNMMap.m
@@ -340,6 +340,10 @@ - (NSArray *)getMapBoundaries
     ];
 }
 
+- (void)setBoundary:(MKMapCameraBoundary*)boundary {
+    [self setCameraBoundary:boundary animated:NO];
+}
+
 - (void)setShowsUserLocation:(BOOL)showsUserLocation
 {
     if (self.showsUserLocation != showsUserLocation) {

diff --git a/ios/Maps/RNMMapManager.m b/ios/Maps/RNMMapManager.m
@@ -81,57 +81,60 @@ - (UIView *)view
     return map;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(isAccessibilityElement, BOOL)
-RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
-RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
-RCT_EXPORT_VIEW_PROPERTY(userLocationAnnotationTitle, NSString)
-RCT_EXPORT_VIEW_PROPERTY(userInterfaceStyle, NSString)
+RCT_EXPORT_VIEW_PROPERTY(boundary, MKMapCameraBoundary*)
+RCT_EXPORT_VIEW_PROPERTY(cacheEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(compassOffset, CGPoint)
 RCT_EXPORT_VIEW_PROPERTY(followsUserLocation, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(userLocationCalloutEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsPointsOfInterest, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsBuildings, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsScale, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(showsTraffic, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(handlePanDrag, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isAccessibilityElement, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(kmlSrc, NSString)
-RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(cacheEnabled, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(loadingEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(loadingBackgroundColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(loadingEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(loadingIndicatorColor, UIColor)
-RCT_EXPORT_VIEW_PROPERTY(handlePanDrag, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(maxDelta, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat)
-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(onMapReady, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(maxDelta, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(onCalloutPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onPanDrag, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onLongPress, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onDoublePress, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onMarkerSelect, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLongPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMarkerDeselect, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onMarkerDragStart, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMarkerDrag, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMarkerDragEnd, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onCalloutPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMarkerDragStart, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMarkerSelect, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPanDrag, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onUserLocationChange, RCTBubblingEventBlock)
-RCT_CUSTOM_VIEW_PROPERTY(initialRegion, MKCoordinateRegion, RNMMap)
+RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsBuildings, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsPointsOfInterest, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsScale, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsTraffic, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(userInterfaceStyle, NSString)
+RCT_EXPORT_VIEW_PROPERTY(userLocationAnnotationTitle, NSString)
+RCT_EXPORT_VIEW_PROPERTY(userLocationCalloutEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
+RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
+RCT_CUSTOM_VIEW_PROPERTY(camera, MKMapCamera*, RNMMap)
 {
     if (json == nil) return;
-
-    // don't emit region change events when we are setting the initialRegion
+    
+    // don't emit region change events when we are setting the camera
     BOOL originalIgnore = view.ignoreRegionChanges;
     view.ignoreRegionChanges = YES;
-    [view setInitialRegion:[RCTConvert MKCoordinateRegion:json]];
+    [view setCamera:[RCTConvert MKMapCamera:json] animated:NO];
     view.ignoreRegionChanges = originalIgnore;
 }
 RCT_CUSTOM_VIEW_PROPERTY(initialCamera, MKMapCamera, RNMMap)
@@ -145,34 +148,28 @@ - (UIView *)view
     view.ignoreRegionChanges = originalIgnore;
 }
 
-
-RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, CGFloat)
-
-
-RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RNMMap)
+RCT_CUSTOM_VIEW_PROPERTY(initialRegion, MKCoordinateRegion, RNMMap)
 {
     if (json == nil) return;
 
-    // don't emit region change events when we are setting the region
+    // don't emit region change events when we are setting the initialRegion
     BOOL originalIgnore = view.ignoreRegionChanges;
     view.ignoreRegionChanges = YES;
-    [view setRegion:[RCTConvert MKCoordinateRegion:json] animated:NO];
+    [view setInitialRegion:[RCTConvert MKCoordinateRegion:json]];
     view.ignoreRegionChanges = originalIgnore;
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(camera, MKMapCamera*, RNMMap)
+RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RNMMap)
 {
     if (json == nil) return;
-    
-    // don't emit region change events when we are setting the camera
+
+    // don't emit region change events when we are setting the region
     BOOL originalIgnore = view.ignoreRegionChanges;
     view.ignoreRegionChanges = YES;
-    [view setCamera:[RCTConvert MKMapCamera:json] animated:NO];
+    [view setRegion:[RCTConvert MKCoordinateRegion:json] animated:NO];
     view.ignoreRegionChanges = originalIgnore;
 }
 
-
 #pragma mark exported MapView methods
 
 RCT_EXPORT_METHOD(setCamera:(nonnull NSNumber *)reactTag

diff --git a/react-native-maps.podspec b/react-native-maps.podspec
@@ -9,7 +9,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
-  s.platform     = :ios, "11.0"
+  s.platform     = :ios, "13.0"
 
   s.source       = { :git => "https://github.com/react-native-maps/react-native-maps.git", :tag=> "v#{s.version}" }
   s.source_files  = "ios/Maps/**/*.{h,m}"