Added logoPosition props that allows to position the Mapbox logo (rnm…

…apbox#1396) * feat: add the ability to position the mapbox logo * Update CHANGELOG.md Co-authored-by: Kid Commit <26439946+ferdicus@users.noreply.github.com>
EasyTech-International-Sdn-Bhd · Jun 18, 2021 · fb430a5 · fb430a5
1 parent 0e173c7
commit fb430a5
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<br/>@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
@@ -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
@@ -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
@@ -49,6 +49,7 @@ typedef void (^StyleLoadedBlock) (MGLStyle* __nonnull style);
 @property (nonatomic, assign) BOOL reactAttributionEnabled;
 @property (nonatomic, strong) NSDictionary<NSString *, NSNumber *> *reactAttributionPosition;
 @property (nonatomic, assign) BOOL reactLogoEnabled;
+@property (nonatomic, strong) NSDictionary<NSString *, NSNumber *> *reactLogoPosition;
 @property (nonatomic, assign) BOOL reactCompassEnabled;
 @property (nonatomic, assign) BOOL reactZoomEnabled;
 

diff --git 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<NSString *,NSNumber *> *)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
@@ -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
@@ -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
      */