feat: add onMapClick API for mapViewCallbacks (#125)

ArturoSalazarB16 · web-flow · commit 4e64ab81f6ef · 2024-04-19T11:05:47.000-07:00
diff --git a/SampleApp/src/app.tsx b/SampleApp/src/app.tsx
@@ -41,7 +41,7 @@ import {
   NavigationInitErrorCode,
   RouteStatus,
 } from 'react-native-navigation-sdk/components/navigation/types';
-import {Location} from 'react-native-navigation-sdk/components/shared/types';
+import {LatLng, Location} from 'react-native-navigation-sdk/components/shared/types';
 import Snackbar from 'react-native-snackbar';
 import MapsControls from './mapsControls';
 import NavigationControls from './navigationControls';
@@ -306,6 +306,9 @@ const App: React.FC = (): ReactElement => {
     onMarkerInfoWindowTapped: (marker: Marker) => {
       console.log('onMarkerInfoWindowTapped: ', marker);
     },
+    onMapClick: (latLng: LatLng) => {
+      console.log("onMapClick: ", latLng);
+    },
   };
 
   const termsAndConditionsDialogOptions: TermsAndConditionsDialogOptions = {
diff --git a/SampleApp/src/navigationControls.tsx b/SampleApp/src/navigationControls.tsx
@@ -59,6 +59,8 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
     useState(true);
   const [backgroundLocationUpdatesEnabled, setBackgroundLocationUpdatesEnabled] =
     useState(false);
+  const [etaCardEnabled, setEtaCardEnabled] =
+    useState(true);
 
   const [latitude, onLatChanged] = useState('');
   const [longitude, onLngChanged] = useState('');
@@ -195,6 +197,12 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
     navigationViewController.setRecenterButtonEnabled(isOn);
   };
 
+  const toggleEtaCardEnabled = (isOn: boolean) => {
+    console.log('toggleEtaCardEnabled:', isOn);
+    setEtaCardEnabled(isOn);
+    navigationViewController.setFooterEnabled(isOn);
+  };
+
   const showRouteOverview = () => {
     console.log('showRouteOverview');
     navigationViewController.showRouteOverview();
@@ -377,6 +385,15 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
           }}
         />
       </View>
+      <View style={styles.rowContainer}>
+        <Text>Footer enabled</Text>
+        <Switch
+          value={etaCardEnabled}
+          onValueChange={() => {
+            toggleEtaCardEnabled(!etaCardEnabled);
+          }}
+        />
+      </View>
       <View style={styles.rowContainer}>
         <Text>Night mode </Text>
         <SelectDropdown
diff --git a/android/src/main/java/com/google/android/react/navsdk/INavigationCallback.java b/android/src/main/java/com/google/android/react/navsdk/INavigationCallback.java
@@ -13,12 +13,13 @@
  */
 package com.google.android.react.navsdk;
 
+import android.location.Location;
 import com.google.android.gms.maps.model.Circle;
 import com.google.android.gms.maps.model.GroundOverlay;
+import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.Marker;
 import com.google.android.gms.maps.model.Polygon;
 import com.google.android.gms.maps.model.Polyline;
-import android.location.Location;
 import com.google.android.libraries.mapsplatform.turnbyturn.model.NavInfo;
 import com.google.android.libraries.navigation.ArrivalEvent;
 import com.google.android.libraries.navigation.Navigator;
@@ -65,4 +66,6 @@ public interface INavigationCallback {
   void onGroundOverlayClick(GroundOverlay overlay);
 
   void onMarkerInfoWindowTapped(Marker marker);
+
+  void onMapClick(LatLng latLng);
 }
diff --git a/android/src/main/java/com/google/android/react/navsdk/NavViewFragment.java b/android/src/main/java/com/google/android/react/navsdk/NavViewFragment.java
@@ -11,46 +11,41 @@
  * express or implied. See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 package com.google.android.react.navsdk;
 
-import com.facebook.react.bridge.UiThreadUtil;
 import android.Manifest.permission;
 import android.annotation.SuppressLint;
 import android.content.pm.PackageManager;
 import android.graphics.Color;
 import android.location.Location;
 import android.os.Bundle;
-import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-import androidx.appcompat.app.AppCompatActivity;
 import androidx.core.app.ActivityCompat;
 import androidx.fragment.app.Fragment;
 import androidx.lifecycle.Observer;
-
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.UiThreadUtil;
 import com.google.android.gms.maps.CameraUpdateFactory;
 import com.google.android.gms.maps.GoogleMap;
 import com.google.android.gms.maps.OnMapReadyCallback;
-import com.google.android.gms.maps.UiSettings;
 import com.google.android.gms.maps.model.BitmapDescriptor;
 import com.google.android.gms.maps.model.BitmapDescriptorFactory;
 import com.google.android.gms.maps.model.CameraPosition;
 import com.google.android.gms.maps.model.Circle;
-import com.google.android.gms.maps.model.Marker;
-import com.google.android.gms.maps.model.Polygon;
-import com.google.android.gms.maps.model.Polyline;
-import com.google.android.gms.maps.model.GroundOverlay;
 import com.google.android.gms.maps.model.CircleOptions;
+import com.google.android.gms.maps.model.GroundOverlay;
 import com.google.android.gms.maps.model.GroundOverlayOptions;
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.MapStyleOptions;
+import com.google.android.gms.maps.model.Marker;
 import com.google.android.gms.maps.model.MarkerOptions;
+import com.google.android.gms.maps.model.Polygon;
 import com.google.android.gms.maps.model.PolygonOptions;
+import com.google.android.gms.maps.model.Polyline;
 import com.google.android.gms.maps.model.PolylineOptions;
 import com.google.android.libraries.mapsplatform.turnbyturn.model.NavInfo;
 import com.google.android.libraries.navigation.ArrivalEvent;
@@ -61,32 +56,22 @@
 import com.google.android.libraries.navigation.Navigator;
 import com.google.android.libraries.navigation.RoadSnappedLocationProvider;
 import com.google.android.libraries.navigation.RoadSnappedLocationProvider.LocationListener;
-import com.google.android.libraries.navigation.RouteSegment;
-import com.google.android.libraries.navigation.RoutingOptions;
 import com.google.android.libraries.navigation.SimulationOptions;
 import com.google.android.libraries.navigation.SpeedAlertOptions;
 import com.google.android.libraries.navigation.SpeedAlertSeverity;
 import com.google.android.libraries.navigation.StylingOptions;
 import com.google.android.libraries.navigation.SupportNavigationFragment;
 import com.google.android.libraries.navigation.TermsAndConditionsCheckOption;
-import com.google.android.libraries.navigation.TimeAndDistance;
 import com.google.android.libraries.navigation.Waypoint;
-
-import org.json.JSONArray;
-import org.json.JSONException;
-import org.json.JSONObject;
-
 import java.io.BufferedReader;
 import java.io.IOException;
 import java.io.InputStream;
 import java.io.InputStreamReader;
 import java.net.HttpURLConnection;
 import java.net.URL;
 import java.util.ArrayList;
-import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
-import java.util.UUID;
 import java.util.concurrent.Executors;
 
 /**
@@ -739,6 +724,14 @@ public void onInfoWindowClick(Marker marker) {
                     navigationCallback.onMarkerInfoWindowTapped(marker);
                   }
                 });
+
+            mGoogleMap.setOnMapClickListener(
+                new GoogleMap.OnMapClickListener() {
+                  @Override
+                  public void onMapClick(LatLng latLng) {
+                    navigationCallback.onMapClick(latLng);
+                  }
+                });
           }
         });
 
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
@@ -583,6 +583,15 @@ public void onMapReady() {
     sendCommandToReactNative("onMapReady", null);
   }
 
+  @Override
+  public void onMapClick(LatLng latLng) {
+      CatalystInstance catalystInstance = reactContext.getCatalystInstance();
+
+      WritableNativeArray params = new WritableNativeArray();
+      params.pushMap(ObjectTranslationUtil.getMapFromLatLng(latLng));
+      catalystInstance.callFunction(Constants.JAVASCRIPT_FLAG, "onMapClick", params);
+  }
+
   @Override
   public void onRecenterButtonClick() {
     sendCommandToReactNative("onRecenterButtonClick", null);
diff --git a/components/maps/mapView/types.ts b/components/maps/mapView/types.ts
@@ -156,6 +156,12 @@ export interface MapViewCallbacks {
    * Callback invoked when tapping on a marker's info window.
    */
   onMarkerInfoWindowTapped?(args: Marker): void;
+
+  /**
+   * Callback invoked when there is a click on the map view.
+   * @param latLng position where the click occurred.
+   */
+  onMapClick?(latLng: LatLng): void;
 }
 
 export interface MapViewController {
diff --git a/components/navigation/navigationView/index.tsx b/components/navigation/navigationView/index.tsx
@@ -30,7 +30,7 @@ import {
   Polygon,
   Polyline,
 } from '../../maps/types';
-import {Location} from '../../shared/types';
+import {LatLng, Location} from '../../shared/types';
 import {NavViewManager, commands, sendCommand} from '../../shared/viewManager';
 import {NavigationInitErrorCode} from '../types';
 import NavHelper from './navHelper';
@@ -76,6 +76,13 @@ export default class NavigationView extends React.Component<NavigationViewProps>
     }
   };
 
+  onMapClick = (latLng: LatLng) => {
+    if (this.props.mapViewCallbacks != null &&
+      this.props.mapViewCallbacks.onMapClick) {
+        this.props.mapViewCallbacks.onMapClick(latLng);
+      }
+  };
+
   /**
    * A callback function that gets invoked when navigation information is ready.
    *
diff --git a/ios/react-native-navigation-sdk/CustomEventDispatcher.m b/ios/react-native-navigation-sdk/CustomEventDispatcher.m
@@ -52,6 +52,7 @@ + (id)allocWithZone:(NSZone *)zone {
     @"onPolygonClick",
     @"onCircleClick",
     @"logDebugInfo",
+    @"onMapClick",
   ];
 }
 
diff --git a/ios/react-native-navigation-sdk/INavigationCallback.h b/ios/react-native-navigation-sdk/INavigationCallback.h
@@ -35,6 +35,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)onNavigationInitError:(NSNumber *)errorCode;
 - (void)onStartGuidance;
 - (void)onMapReady;
+- (void)onMapClick:(NSDictionary *)latLngMap;
 - (void)onRecenterButtonClick;
 - (void)onRouteStatusResult:(GMSRouteStatus)routeStatus;
 - (void)onReroutingRequestedByOffRoute;
diff --git a/ios/react-native-navigation-sdk/NavViewController.m b/ios/react-native-navigation-sdk/NavViewController.m
@@ -64,6 +64,11 @@ - (void)mapView:(GMSMapView *)mapView didTapInfoWindowOfMarker:(GMSMarker *)mark
   [callbacks onMarkerInfoWindowTapped:marker];
 }
 
+- (void) mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate{
+    [callbacks onMapClick: [ObjectTranslationUtil transformCoordinateToDictionary: coordinate]];
+}
+
+
 - (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
   [callbacks onMarkerClick:marker];
   return FALSE;
diff --git a/ios/react-native-navigation-sdk/RCTNavViewManager.m b/ios/react-native-navigation-sdk/RCTNavViewManager.m
@@ -288,6 +288,10 @@ - (void)onMapReady {
     [self sendCommandToReactNative:@"onMapReady"];
 }
 
+- (void)onMapClick:(NSDictionary *)latLngMap {
+    [self sendCommandToReactNative:@"onMapClick" args:latLngMap];
+}
+
 - (void)onNavigationReady {
     [viewController setStylingOptions:_stylingOptions];
         

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,7 @@ + (id)allocWithZone:(NSZone *)zone {`
`52`	`52`	`@"onPolygonClick",`
`53`	`53`	`@"onCircleClick",`
`54`	`54`	`@"logDebugInfo",`
	`55`	`+ @"onMapClick",`
`55`	`56`	`];`
`56`	`57`	`}`
`57`	`58`