feat: add map padding (#373)

illuminati1911 · jokerttu · web-flow · commit bf50530fc369 · 2024-12-17T08:54:46.000+02:00
Co-authored-by: Joonas Kerttula &lt;joonas.kerttula@codemate.com&gt;
diff --git a/android/src/main/java/com/google/android/react/navsdk/Command.java b/android/src/main/java/com/google/android/react/navsdk/Command.java
@@ -54,7 +54,8 @@ public enum Command {
   REMOVE_CIRCLE(35, "removeCircle"),
   REMOVE_GROUND_OVERLAY(36, "removeGroundOverlay"),
   SET_ZOOM_CONTROLS_ENABLED(37, "setZoomControlsEnabled"),
-  SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled");
+  SET_RECENTER_BUTTON_ENABLED(38, "setRecenterButtonEnabled"),
+  SET_PADDING(39, "setPadding");
 
   private final int value;
   private final String name;
diff --git a/android/src/main/java/com/google/android/react/navsdk/MapViewController.java b/android/src/main/java/com/google/android/react/navsdk/MapViewController.java
@@ -536,6 +536,12 @@ public void setFollowingPerspective(int jsValue) {
     mGoogleMap.followMyLocation(EnumTranslationUtil.getCameraPerspectiveFromJsValue(jsValue));
   }
 
+  public void setPadding(int top, int left, int bottom, int right) {
+    if (mGoogleMap != null) {
+      mGoogleMap.setPadding(left, top, right, bottom);
+    }
+  }
+
   private String fetchJsonFromUrl(String urlString) throws IOException {
     URL url = new URL(urlString);
     HttpURLConnection connection = (HttpURLConnection) url.openConnection();
diff --git a/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java b/android/src/main/java/com/google/android/react/navsdk/NavAutoModule.java
@@ -506,6 +506,19 @@ public void isAutoScreenAvailable(final Promise promise) {
     promise.resolve(mMapViewController != null);
   }
 
+  @ReactMethod
+  public void setPadding(
+      final Integer top, final Integer left, final Integer bottom, final Integer right) {
+    UiThreadUtil.runOnUiThread(
+        () -> {
+          if (mMapViewController == null) {
+            return;
+          }
+
+          mMapViewController.setPadding(top, left, bottom, right);
+        });
+  }
+
   public void sendScreenState(boolean available) {
     WritableNativeArray params = new WritableNativeArray();
     params.pushBoolean(available);
diff --git a/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java b/android/src/main/java/com/google/android/react/navsdk/NavViewManager.java
@@ -119,6 +119,7 @@ public Map<String, Integer> getCommandsMap() {
     map.put(REMOVE_GROUND_OVERLAY.toString(), REMOVE_GROUND_OVERLAY.getValue());
     map.put(SET_HEADER_ENABLED.toString(), SET_HEADER_ENABLED.getValue());
     map.put(SET_FOOTER_ENABLED.toString(), SET_FOOTER_ENABLED.getValue());
+    map.put(SET_PADDING.toString(), SET_PADDING.getValue());
     return map;
   }
 
@@ -298,6 +299,10 @@ public void receiveCommand(
       case REMOVE_GROUND_OVERLAY:
         getFragmentForRoot(root).getMapController().removeGroundOverlay(args.getString(0));
         break;
+      case SET_PADDING:
+        getFragmentForRoot(root)
+            .getMapController()
+            .setPadding(args.getInt(0), args.getInt(1), args.getInt(2), args.getInt(3));
     }
   }
 
diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx
@@ -27,6 +27,7 @@ import {
   type Circle,
   type Polyline,
   type Polygon,
+  type Padding,
 } from '@googlemaps/react-native-navigation-sdk';
 
 export interface MapControlsProps {
@@ -41,6 +42,12 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
   const [enableLocationMarker, setEnableLocationMarker] = useState(true);
   const [latitude, onLatChanged] = useState('');
   const [longitude, onLngChanged] = useState('');
+  const [padding, setPadding] = useState<Padding>({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  });
 
   useEffect(() => {
     if (zoom !== null) {
@@ -195,6 +202,12 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
     mapViewController.clearMapView();
   };
 
+  const onPaddingChanged = (edge: keyof typeof padding, value: string) => {
+    const updatedPadding: Padding = { ...padding, [edge]: Number(value) };
+    setPadding(updatedPadding);
+    mapViewController.setPadding(updatedPadding);
+  };
+
   return (
     <View>
       <TextInput
@@ -280,6 +293,47 @@ const MapsControls: React.FC<MapControlsProps> = ({ mapViewController }) => {
           dropdownStyle={styles.dropdownMenuStyle}
         />
       </View>
+      <View style={styles.controlButtonGap} />
+      <View style={styles.rowContainer}>
+        <Text>Top padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('top', value)}
+          value={padding.top?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Bottom padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('bottom', value)}
+          value={padding.bottom?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Left padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('left', value)}
+          value={padding.left?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
+      <View style={styles.rowContainer}>
+        <Text>Right padding</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={value => onPaddingChanged('right', value)}
+          value={padding.right?.toFixed(0)}
+          keyboardType="numeric"
+          inputMode="numeric"
+        />
+      </View>
     </View>
   );
 };
diff --git a/example/src/styles.ts b/example/src/styles.ts
@@ -27,42 +27,23 @@ const styles = StyleSheet.create({
   button: {
     backgroundColor: '#2196f3',
   },
-  center: {
-    alignItems: 'center',
-  },
-  toggleControl: {
-    backgroundColor: '#9ee2ff',
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'baseline',
-    position: 'absolute',
-    right: 0,
-    padding: 6,
-    marginTop: 150,
-  },
   input: {
     backgroundColor: '#ffffff',
     height: 40,
     margin: 12,
     borderWidth: 1,
     padding: 10,
-  },
-  zoomBtn: {
-    color: '#fff',
+    flexGrow: 1,
   },
   rowContainer: {
     margin: 5,
     marginLeft: 20,
     marginRight: 20,
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     color: 'white',
   },
-  rowBtnContainer: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-    justifyContent: 'space-between',
-  },
   controlButtons: {
     alignSelf: 'stretch',
     flexDirection: 'row',
diff --git a/ios/react-native-navigation-sdk/NavAutoModule.m b/ios/react-native-navigation-sdk/NavAutoModule.m
@@ -387,6 +387,19 @@ + (void)unregisterNavAutoModuleReadyCallback {
   });
 }
 
+RCT_EXPORT_METHOD(setPadding
+                  : (nonnull NSNumber *)top left
+                  : (nonnull NSNumber *)left bottom
+                  : (nonnull NSNumber *)bottom right
+                  : (nonnull NSNumber *)right) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    if (self->_viewController) {
+      [self->_viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue,
+                                                         bottom.floatValue, right.floatValue)];
+    }
+  });
+}
+
 - (void)onScreenStateChange:(BOOL)available {
   [self sendCommandToReactNative:@"onAutoScreenAvailabilityChanged"
                             args:[NSNumber numberWithBool:available]];
diff --git a/ios/react-native-navigation-sdk/NavViewController.h b/ios/react-native-navigation-sdk/NavViewController.h
@@ -83,6 +83,7 @@ typedef void (^OnArrayResult)(NSArray *_Nullable result);
 - (void)removeGroundOverlay:(NSString *)overlayId;
 - (BOOL)attachToNavigationSession:(GMSNavigationSession *)session;
 - (void)setTravelMode:(GMSNavigationTravelMode)travelMode;
+- (void)setPadding:(UIEdgeInsets)insets;
 //- (void)removeNavigationListeners;
 @end
 
diff --git a/ios/react-native-navigation-sdk/NavViewController.m b/ios/react-native-navigation-sdk/NavViewController.m
@@ -661,4 +661,8 @@ - (BOOL)compare:(nullable id)userData to:(NSString *)elementId {
   return [userData[0] isEqualToString:elementId];
 }
 
+- (void)setPadding:(UIEdgeInsets)insets {
+  _mapView.padding = insets;
+}
+
 @end
diff --git a/ios/react-native-navigation-sdk/RCTNavViewManager.m b/ios/react-native-navigation-sdk/RCTNavViewManager.m
@@ -426,4 +426,17 @@ - (void)unregisterViewControllerForTag:(NSNumber *)reactTag {
   });
 }
 
+RCT_EXPORT_METHOD(setPadding
+                  : (nonnull NSNumber *)reactTag top
+                  : (nonnull NSNumber *)top left
+                  : (nonnull NSNumber *)left bottom
+                  : (nonnull NSNumber *)bottom right
+                  : (nonnull NSNumber *)right) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    NavViewController *viewController = [self getViewControllerForTag:reactTag];
+    [viewController setPadding:UIEdgeInsetsMake(top.floatValue, left.floatValue, bottom.floatValue,
+                                                right.floatValue)];
+  });
+}
+
 @end
diff --git a/src/auto/useNavigationAuto.ts b/src/auto/useNavigationAuto.ts
@@ -29,6 +29,7 @@ import type {
   Polygon,
   CameraPosition,
   UISettings,
+  Padding,
 } from '../maps';
 import { useMemo } from 'react';
 
@@ -188,6 +189,11 @@ export const useNavigationAuto = (): {
       moveCamera: (cameraPosition: CameraPosition) => {
         return NavAutoModule.moveCamera(cameraPosition);
       },
+
+      setPadding: (padding: Padding) => {
+        const { top = 0, left = 0, bottom = 0, right = 0 } = padding;
+        return NavAutoModule.setPadding(top, left, bottom, right);
+      },
     }),
     [moduleListenersHandler]
   );
diff --git a/src/maps/mapView/mapViewController.ts b/src/maps/mapView/mapViewController.ts
@@ -30,6 +30,7 @@ import type {
   MapType,
   MapViewController,
   MarkerOptions,
+  Padding,
   PolygonOptions,
   PolylineOptions,
 } from './types';
@@ -164,5 +165,10 @@ export const getMapViewController = (viewId: number): MapViewController => {
     moveCamera: (cameraPosition: CameraPosition) => {
       sendCommand(viewId, commands.moveCamera, [cameraPosition]);
     },
+
+    setPadding: (padding: Padding) => {
+      const { top = 0, left = 0, bottom = 0, right = 0 } = padding;
+      sendCommand(viewId, commands.setPadding, [top, left, bottom, right]);
+    },
   };
 };
diff --git a/src/maps/mapView/types.ts b/src/maps/mapView/types.ts
@@ -123,6 +123,20 @@ export enum MapType {
   HYBRID,
 }
 
+/**
+ * Defines the padding options for a map.
+ */
+export interface Padding {
+  /** Top padding in pixels. */
+  top?: number;
+  /** Left padding in pixels. */
+  left?: number;
+  /** Bottom padding in pixels. */
+  bottom?: number;
+  /** Right padding in pixels. */
+  right?: number;
+}
+
 /**
  * Defines the type of the map fragment.
  */
@@ -412,4 +426,12 @@ export interface MapViewController {
    * @param cameraPosition - Defines the position the camera will take with the move.
    */
   moveCamera(cameraPosition: CameraPosition): void;
+
+  /**
+   * Sets padding to the map.
+   *
+   * @param padding - An object defining padding for each side.
+   *                  Example: { top: 10, left: 5, bottom: 15, right: 10 }
+   */
+  setPadding(padding: Padding): void;
 }

Original file line number	Diff line number	Diff line change
`@@ -119,6 +119,7 @@ public Map<String, Integer> getCommandsMap() {`
`119`	`119`	`map.put(REMOVE_GROUND_OVERLAY.toString(), REMOVE_GROUND_OVERLAY.getValue());`
`120`	`120`	`map.put(SET_HEADER_ENABLED.toString(), SET_HEADER_ENABLED.getValue());`
`121`	`121`	`map.put(SET_FOOTER_ENABLED.toString(), SET_FOOTER_ENABLED.getValue());`
	`122`	`+ map.put(SET_PADDING.toString(), SET_PADDING.getValue());`
`122`	`123`	`return map;`
`123`	`124`	`}`
`124`	`125`
`@@ -298,6 +299,10 @@ public void receiveCommand(`
`298`	`299`	`case REMOVE_GROUND_OVERLAY:`
`299`	`300`	`getFragmentForRoot(root).getMapController().removeGroundOverlay(args.getString(0));`
`300`	`301`	`break;`
	`302`	`+ case SET_PADDING:`
	`303`	`+ getFragmentForRoot(root)`
	`304`	`+ .getMapController()`
	`305`	`+ .setPadding(args.getInt(0), args.getInt(1), args.getInt(2), args.getInt(3));`
`301`	`306`	`}`
`302`	`307`	`}`
`303`	`308`
Original file line number	Diff line number	Diff line change
`@@ -661,4 +661,8 @@ - (BOOL)compare:(nullable id)userData to:(NSString *)elementId {`
`661`	`661`	`return [userData[0] isEqualToString:elementId];`
`662`	`662`	`}`
`663`	`663`
	`664`	`+- (void)setPadding:(UIEdgeInsets)insets {`
	`665`	`+ _mapView.padding = insets;`
	`666`	`+}`
	`667`	`+`
`664`	`668`	`@end`