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 */