Skip to content

feat: add marker rotation anchor support #608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
illuminati1911 merged 2 commits into from
Jun 10, 2026
Merged

feat: add marker rotation anchor support #608

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14dbece
feat: add marker rotation anchor support
illuminati1911 Jun 10, 2026
f61b308
docs: documentation update
illuminati1911 Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions android/src/main/java/com/google/android/react/navsdk/MapViewController.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand All @@ -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);

Expand All @@ -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 {
Expand All @@ -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);
}
Expand Down
1 change: 1 addition & 0 deletions example/src/screens/integration_tests/integration_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
9 changes: 9 additions & 0 deletions ios/react-native-navigation-sdk/NavAutoModule.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions ios/react-native-navigation-sdk/NavViewController.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
9 changes: 9 additions & 0 deletions ios/react-native-navigation-sdk/NavViewModule.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions ios/react-native-navigation-sdk/ObjectTranslationUtil.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions ios/react-native-navigation-sdk/ObjectTranslationUtil.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions src/maps/mapView/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Comment thread
illuminati1911 marked this conversation as resolved.
Outdated
anchor?: { u: number; v: number };
/** Indicates the visibility of the polygon. True by default. */
visible?: boolean;
}
Expand Down
1 change: 1 addition & 0 deletions src/native/NativeNavAutoModule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}>;
Expand Down
1 change: 1 addition & 0 deletions src/native/NativeNavViewModule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
Loading