feat: add marker rotation anchor support (#608)

Author: illuminati1911

android/src/main/java/com/google/android/react/navsdk/MapViewController.java

@@ -259,6 +259,15 @@ private Marker createMarker(Map<String, Object> optionsMap, String customId) {
     boolean draggable = CollectionUtil.getBool("draggable", optionsMap, false);
     boolean flat = CollectionUtil.getBool("flat", optionsMap, false);
     boolean visible = CollectionUtil.getBool("visible", optionsMap, true);
+    float anchorU = 0.5f;
+    float anchorV = 1.0f;
+    if (optionsMap.containsKey("anchor")) {
+      Map<String, Object> anchor = (Map<String, Object>) optionsMap.get("anchor");
+      if (anchor != null) {
+        anchorU = Double.valueOf(CollectionUtil.getDouble("u", anchor, 0.5)).floatValue();
+        anchorV = Double.valueOf(CollectionUtil.getDouble("v", anchor, 1.0)).floatValue();
+      }
+    }
 
     MarkerOptions options = new MarkerOptions();
     if (imagePath != null && !imagePath.isEmpty()) {
@@ -284,6 +293,7 @@ private Marker createMarker(Map<String, Object> optionsMap, String customId) {
     options.flat(flat);
     options.alpha(alpha);
     options.rotation(rotation);
+    options.anchor(anchorU, anchorV);
     options.draggable(draggable);
     options.visible(visible);
 
@@ -307,6 +317,15 @@ private void updateMarker(Marker marker, Map<String, Object> optionsMap) {
     boolean draggable = CollectionUtil.getBool("draggable", optionsMap, false);
     boolean flat = CollectionUtil.getBool("flat", optionsMap, false);
     boolean visible = CollectionUtil.getBool("visible", optionsMap, true);
+    float anchorU = 0.5f;
+    float anchorV = 1.0f;
+    if (optionsMap.containsKey("anchor")) {
+      Map<String, Object> anchor = (Map<String, Object>) optionsMap.get("anchor");
+      if (anchor != null) {
+        anchorU = Double.valueOf(CollectionUtil.getDouble("u", anchor, 0.5)).floatValue();
+        anchorV = Double.valueOf(CollectionUtil.getDouble("v", anchor, 1.0)).floatValue();
+      }
+    }
 
     if (imagePath != null && !imagePath.isEmpty()) {
       try {
@@ -331,6 +350,7 @@ private void updateMarker(Marker marker, Map<String, Object> optionsMap) {
     marker.setFlat(flat);
     marker.setAlpha(alpha);
     marker.setRotation(rotation);
+    marker.setAnchor(anchorU, anchorV);
     marker.setDraggable(draggable);
     marker.setVisible(visible);
   }

example/src/screens/integration_tests/integration_test.ts

@@ -921,6 +921,7 @@ export const testMapMarkers = async (testTools: TestTools) => {
     position: { lat: 37.7849, lng: -122.4094 },
     title: 'Marker with Icon',
     imgPath: 'circle.png',
+    anchor: { u: 0.5, v: 0.5 },
   });
 
   if (!markerWithIcon.id) {

ios/react-native-navigation-sdk/NavAutoModule.mm

@@ -152,13 +152,22 @@ - (void)addMarker:(MarkerOptionsSpec &)options
         }
       }
 
+      CGFloat anchorU = 0.5;
+      CGFloat anchorV = 1.0;
+      if (optionsCopy.anchor().has_value()) {
+        auto anchor = optionsCopy.anchor().value();
+        anchorU = anchor.u();
+        anchorV = anchor.v();
+      }
+
       GMSMarker *marker = [ObjectTranslationUtil
           createMarker:position
                  title:optionsCopy.title()
                snippet:optionsCopy.snippet()
                  alpha:(float)optionsCopy.alpha().value_or(1.0)
               rotation:optionsCopy.rotation().value_or(0.0)
                   flat:optionsCopy.flat().value_or(NO)
+                anchor:CGPointMake(anchorU, anchorV)
              draggable:optionsCopy.draggable().value_or(NO)
                   icon:icon
                 zIndex:optionsCopy.zIndex().has_value() ? @(optionsCopy.zIndex().value()) : nil

ios/react-native-navigation-sdk/NavViewController.mm

@@ -756,6 +756,7 @@ - (void)addMarker:(GMSMarker *)marker
                                   alpha:marker.opacity
                                rotation:marker.rotation
                                    flat:marker.flat
+                                 anchor:marker.groundAnchor
                               draggable:marker.draggable
                                    icon:marker.icon
                                  zIndex:@(marker.zIndex)

ios/react-native-navigation-sdk/NavViewModule.mm

@@ -155,13 +155,22 @@ - (void)addMarker:(NSString *)nativeID
         }
       }
 
+      CGFloat anchorU = 0.5;
+      CGFloat anchorV = 1.0;
+      if (optionsCopy.anchor().has_value()) {
+        auto anchor = optionsCopy.anchor().value();
+        anchorU = anchor.u();
+        anchorV = anchor.v();
+      }
+
       GMSMarker *marker = [ObjectTranslationUtil
           createMarker:position
                  title:optionsCopy.title()
                snippet:optionsCopy.snippet()
                  alpha:(float)optionsCopy.alpha().value_or(1.0)
               rotation:optionsCopy.rotation().value_or(0.0)
                   flat:optionsCopy.flat().value_or(NO)
+                anchor:CGPointMake(anchorU, anchorV)
              draggable:optionsCopy.draggable().value_or(NO)
                   icon:icon
                 zIndex:optionsCopy.zIndex().has_value() ? @(optionsCopy.zIndex().value()) : nil

ios/react-native-navigation-sdk/ObjectTranslationUtil.h

@@ -42,6 +42,7 @@
                       alpha:(float)alpha
                    rotation:(double)rotation
                        flat:(BOOL)flat
+                     anchor:(CGPoint)anchor
                   draggable:(BOOL)draggable
                        icon:(nullable UIImage *)icon
                      zIndex:(nullable NSNumber *)zIndex
@@ -101,6 +102,7 @@
                alpha:(float)alpha
             rotation:(double)rotation
                 flat:(BOOL)flat
+              anchor:(CGPoint)anchor
            draggable:(BOOL)draggable
                 icon:(nullable UIImage *)icon
               zIndex:(nullable NSNumber *)zIndex

ios/react-native-navigation-sdk/ObjectTranslationUtil.mm

@@ -275,6 +275,7 @@ + (GMSMarker *)createMarker:(CLLocationCoordinate2D)position
                       alpha:(float)alpha
                    rotation:(double)rotation
                        flat:(BOOL)flat
+                     anchor:(CGPoint)anchor
                   draggable:(BOOL)draggable
                        icon:(nullable UIImage *)icon
                      zIndex:(nullable NSNumber *)zIndex
@@ -285,6 +286,7 @@ + (GMSMarker *)createMarker:(CLLocationCoordinate2D)position
   marker.opacity = alpha;
   marker.rotation = rotation;
   marker.flat = flat;
+  marker.groundAnchor = anchor;
   marker.draggable = draggable;
   if (icon) {
     marker.icon = icon;
@@ -431,6 +433,7 @@ + (void)updateMarker:(GMSMarker *)marker
                alpha:(float)alpha
             rotation:(double)rotation
                 flat:(BOOL)flat
+              anchor:(CGPoint)anchor
            draggable:(BOOL)draggable
                 icon:(nullable UIImage *)icon
               zIndex:(nullable NSNumber *)zIndex
@@ -441,6 +444,7 @@ + (void)updateMarker:(GMSMarker *)marker
   marker.opacity = alpha;
   marker.rotation = rotation;
   marker.flat = flat;
+  marker.groundAnchor = anchor;
   marker.draggable = draggable;
   if (icon) {
     marker.icon = icon;

src/maps/mapView/types.ts

@@ -70,6 +70,8 @@ export interface MarkerOptions {
   draggable?: boolean;
   /** Indicates whether this marker should be flat against the map true or a billboard facing the camera false. */
   flat?: boolean;
+  /** The anchor point of the marker image in normalized coordinates (0-1). Use `{ u: 0.5, v: 0.5 }` to rotate around the image center. Platform default is bottom-center `{ u: 0.5, v: 1.0 }`. */
+  anchor?: { u: number; v: number };
   /** Indicates the visibility of the polygon. True by default. */
   visible?: boolean;
 }

src/native/NativeNavAutoModule.ts

@@ -56,6 +56,7 @@ type MarkerOptionsSpec = Readonly<{
   rotation?: WithDefault<Float, 0>;
   draggable?: WithDefault<boolean, false>;
   flat?: WithDefault<boolean, false>;
+  anchor?: Readonly<{ u: Float; v: Float }>;
   visible?: WithDefault<boolean, true>;
   zIndex?: WithDefault<Double, null>;
 }>;

src/native/NativeNavViewModule.ts

@@ -47,6 +47,7 @@ type CameraPositionSpec = Readonly<{
 
 type MarkerOptionsSpec = Readonly<{
   alpha?: WithDefault<Float, 0>;
+  anchor?: Readonly<{ u: Float; v: Float }>;
   draggable?: WithDefault<boolean, false>;
   flat?: WithDefault<boolean, false>;
   id?: WithDefault<string, null>;