diff --git a/CHANGELOG.md b/CHANGELOG.md
index a03d39a02..1b7280de7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ Please add unreleased changes in the following style:
PR Title ([#123](link to my pr))
```
+Add logoPosition props to `MapView` to position the mapbox logo ([#1396](https://github.com/react-native-mapbox-gl/maps/pull/1396))
Add compatibility with React 17/ npm7 ([#1387](https://github.com/react-native-mapbox-gl/maps/pull/1387))
Add Expo config plugin ([#1388](https://github.com/react-native-mapbox-gl/maps/pull/1388))
Android: Bump `okhttp` to `4.9.0` ([#1390](https://github.com/react-native-mapbox-gl/maps/pull/1390))
diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
index 6c16cb6a8..ae5ef960f 100644
--- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
+++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java
@@ -131,6 +131,8 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
private Integer mAttributionGravity;
private int[] mAttributionMargin;
private Boolean mLogoEnabled;
+ private Integer mLogoGravity;
+ private int[] mLogoMargins;
private Boolean mCompassEnabled;
private ReadableMap mCompassViewMargins;
private int mCompassViewPosition = -1;
@@ -827,6 +829,41 @@ public void setReactLogoEnabled(boolean logoEnabled) {
updateUISettings();
}
+ public void setReactLogoPosition(ReadableMap position) {
+ if (position == null) {
+ // reset from explicit to default
+ if (mLogoGravity != null) {
+ MapboxMapOptions defaultOptions = MapboxMapOptions.createFromAttributes(mContext);
+ mLogoGravity = defaultOptions.getLogoGravity();
+ mLogoMargins = Arrays.copyOf(defaultOptions.getLogoMargins(), 4);
+ updateUISettings();
+ }
+ return;
+ }
+
+ mLogoGravity = Gravity.NO_GRAVITY;
+ if (position.hasKey("left")) {
+ mLogoGravity |= Gravity.START;
+ }
+ if (position.hasKey("right")) {
+ mLogoGravity |= Gravity.END;
+ }
+ if (position.hasKey("top")) {
+ mLogoGravity |= Gravity.TOP;
+ }
+ if (position.hasKey("bottom")) {
+ mLogoGravity |= Gravity.BOTTOM;
+ }
+ float density = getDisplayDensity();
+ mLogoMargins = new int[]{
+ position.hasKey("left") ? (int) density * position.getInt("left") : 0,
+ position.hasKey("top") ? (int) density * position.getInt("top") : 0,
+ position.hasKey("right") ? (int) density * position.getInt("right") : 0,
+ position.hasKey("bottom") ? (int) density * position.getInt("bottom") : 0
+ };
+ updateUISettings();
+ }
+
public void setReactCompassEnabled(boolean compassEnabled) {
mCompassEnabled = compassEnabled;
updateUISettings();
@@ -1084,6 +1121,25 @@ private void updateUISettings() {
uiSettings.setLogoEnabled(mLogoEnabled);
}
+ if (mLogoGravity != null && uiSettings.getLogoGravity() != mLogoGravity) {
+ uiSettings.setLogoGravity(mLogoGravity);
+ }
+
+ if (mLogoMargins != null &&
+ (uiSettings.getLogoMarginLeft() != mLogoMargins[0] ||
+ uiSettings.getLogoMarginTop() != mLogoMargins[1] ||
+ uiSettings.getLogoMarginRight() != mLogoMargins[2] ||
+ uiSettings.getLogoMarginBottom() != mLogoMargins[3]
+ )
+ ) {
+ uiSettings.setLogoMargins(
+ mLogoMargins[0],
+ mLogoMargins[1],
+ mLogoMargins[2],
+ mLogoMargins[3]
+ );
+ }
+
if (mCompassEnabled != null && uiSettings.isCompassEnabled() != mCompassEnabled) {
uiSettings.setCompassEnabled(mCompassEnabled);
}
diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapViewManager.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapViewManager.java
index 87f8e1bc0..e8d761ade 100644
--- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapViewManager.java
+++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapViewManager.java
@@ -165,6 +165,11 @@ public void setLogoEnabled(RCTMGLMapView mapView, boolean logoEnabled) {
mapView.setReactLogoEnabled(logoEnabled);
}
+ @ReactProp(name="logoPosition")
+ public void setLogoPosition(RCTMGLMapView mapView, ReadableMap logoPosition) {
+ mapView.setReactLogoPosition(logoPosition);
+ }
+
@ReactProp(name="compassEnabled")
public void setCompassEnabled(RCTMGLMapView mapView, boolean compassEnabled) {
mapView.setReactCompassEnabled(compassEnabled);
diff --git a/docs/MapView.md b/docs/MapView.md
index 3c24077d8..be29325b7 100644
--- a/docs/MapView.md
+++ b/docs/MapView.md
@@ -19,6 +19,7 @@
| attributionPosition | `union` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
| tintColor | `union` | `none` | `false` | MapView's tintColor - ios only
@platform ios |
| logoEnabled | `bool` | `true` | `false` | Enable/Disable the logo on the map. |
+| logoPosition | `union` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
| compassEnabled | `bool` | `none` | `false` | Enable/Disable the compass from appearing on the map |
| compassViewPosition | `number` | `none` | `false` | Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight |
| compassViewMargins | `object` | `none` | `false` | Add margins to the compass with x and y values |
diff --git a/docs/docs.json b/docs/docs.json
index 2b95a0d1b..c0836012c 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -2816,6 +2816,13 @@
"default": "true",
"description": "Enable/Disable the logo on the map."
},
+ {
+ "name": "logoPosition",
+ "required": false,
+ "type": "union",
+ "default": "none",
+ "description": "Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map"
+ },
{
"name": "compassEnabled",
"required": false,
diff --git a/index.d.ts b/index.d.ts
index c4d9caf4c..0b45eebf3 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -420,6 +420,12 @@ export type AttributionPosition =
| { bottom: number; left: number }
| { bottom: number; right: number };
+export type LogoPosition =
+ | { top: number; left: number }
+ | { top: number; right: number }
+ | { bottom: number; left: number }
+ | { bottom: number; right: number };
+
export interface RegionPayload {
zoomLevel: number;
heading: number;
@@ -445,6 +451,7 @@ export interface MapViewProps extends ViewProps {
attributionEnabled?: boolean;
attributionPosition?: AttributionPosition;
logoEnabled?: boolean;
+ logoPosition?: LogoPosition;
compassEnabled?: boolean;
compassViewPosition?: number;
compassViewMargins?: Point;
diff --git a/ios/RCTMGL/RCTMGLMapView.h b/ios/RCTMGL/RCTMGLMapView.h
index 413e63f3e..c4fabec17 100644
--- a/ios/RCTMGL/RCTMGLMapView.h
+++ b/ios/RCTMGL/RCTMGLMapView.h
@@ -49,6 +49,7 @@ typedef void (^StyleLoadedBlock) (MGLStyle* __nonnull style);
@property (nonatomic, assign) BOOL reactAttributionEnabled;
@property (nonatomic, strong) NSDictionary *reactAttributionPosition;
@property (nonatomic, assign) BOOL reactLogoEnabled;
+@property (nonatomic, strong) NSDictionary *reactLogoPosition;
@property (nonatomic, assign) BOOL reactCompassEnabled;
@property (nonatomic, assign) BOOL reactZoomEnabled;
diff --git a/ios/RCTMGL/RCTMGLMapView.m b/ios/RCTMGL/RCTMGLMapView.m
index 6a72c529e..1ff1867e4 100644
--- a/ios/RCTMGL/RCTMGLMapView.m
+++ b/ios/RCTMGL/RCTMGLMapView.m
@@ -301,6 +301,31 @@ - (void)setReactLogoEnabled:(BOOL)reactLogoEnabled
self.logoView.hidden = !_reactLogoEnabled;
}
+- (void)setReactLogoPosition:(NSDictionary *)logoPosition
+{
+ NSNumber *left = [logoPosition valueForKey:@"left"];
+ NSNumber *right = [logoPosition valueForKey:@"right"];
+ NSNumber *top = [logoPosition valueForKey:@"top"];
+ NSNumber *bottom = [logoPosition valueForKey:@"bottom"];
+ if (left != nil && top != nil) {
+ [self setLogoViewPosition:MGLOrnamentPositionTopLeft];
+ [self setLogoViewMargins:CGPointMake([left floatValue], [top floatValue])];
+ } else if (right != nil && top != nil) {
+ [self setLogoViewPosition:MGLOrnamentPositionTopRight];
+ [self setLogoViewMargins:CGPointMake([right floatValue], [top floatValue])];
+ } else if (bottom != nil && right != nil) {
+ [self setLogoViewPosition:MGLOrnamentPositionBottomRight];
+ [self setLogoViewMargins:CGPointMake([right floatValue], [bottom floatValue])];
+ } else if (bottom != nil && left != nil) {
+ [self setLogoViewPosition:MGLOrnamentPositionBottomLeft];
+ [self setLogoViewMargins:CGPointMake([left floatValue], [bottom floatValue])];
+ } else {
+ [self setLogoViewPosition:MGLOrnamentPositionBottomRight];
+ [self setLogoViewMargins:CGPointMake(8, 8)];
+ }
+
+}
+
- (void)setReactCompassEnabled:(BOOL)reactCompassEnabled
{
_reactCompassEnabled = reactCompassEnabled;
diff --git a/ios/RCTMGL/RCTMGLMapViewManager.m b/ios/RCTMGL/RCTMGLMapViewManager.m
index 95293be3d..d7d298583 100644
--- a/ios/RCTMGL/RCTMGLMapViewManager.m
+++ b/ios/RCTMGL/RCTMGLMapViewManager.m
@@ -80,6 +80,7 @@ - (UIView *)view
RCT_REMAP_VIEW_PROPERTY(attributionEnabled, reactAttributionEnabled, BOOL)
RCT_REMAP_VIEW_PROPERTY(attributionPosition, reactAttributionPosition, NSDictionary)
RCT_REMAP_VIEW_PROPERTY(logoEnabled, reactLogoEnabled, BOOL)
+RCT_REMAP_VIEW_PROPERTY(logoPosition, reactLogoPosition, NSDictionary)
RCT_REMAP_VIEW_PROPERTY(compassEnabled, reactCompassEnabled, BOOL)
RCT_REMAP_VIEW_PROPERTY(zoomEnabled, reactZoomEnabled, BOOL)
diff --git a/javascript/components/MapView.js b/javascript/components/MapView.js
index 2173fc84d..ba430b175 100644
--- a/javascript/components/MapView.js
+++ b/javascript/components/MapView.js
@@ -139,6 +139,16 @@ class MapView extends NativeBridgeComponent(React.Component) {
*/
logoEnabled: PropTypes.bool,
+ /**
+ * Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
+ */
+ logoPosition: PropTypes.oneOfType([
+ PropTypes.shape({top: PropTypes.number, left: PropTypes.number}),
+ PropTypes.shape({top: PropTypes.number, right: PropTypes.number}),
+ PropTypes.shape({bottom: PropTypes.number, left: PropTypes.number}),
+ PropTypes.shape({bottom: PropTypes.number, right: PropTypes.number}),
+ ]),
+
/**
* Enable/Disable the compass from appearing on the map
*/