Skip to content
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

Jump to bottom

added option to switch ScaleBar MetricUnits #3422

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added option to switch ScaleBar MetricUnits #3422

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
53bcd9c
added option to switch ScaleBar MetricUnits
gongdao123 Mar 13, 2024
427d2e2
fix for fore ground service
gongdao123 Mar 27, 2024
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
8 changes: 6 additions & 2 deletions android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1305,12 +1305,15 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
}

var mScaleBarSettings = OrnamentSettings(enabled = false)

var mScaleBarIsMetricUnits = false
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about the default, value.

Currently it depends on the locale
https://docs.mapbox.com/android/maps/api/11.2.1/mapbox-maps-android/com.mapbox.maps.plugin.scalebar/-locale-unit-resolver/is-metric-system.html
https://docs.mapbox.com/ios/maps/api/11.0.0/documentation/mapboxmaps/scalebarviewoptions/usemetricunits/

with this PR it will default to imperial.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, let me update the pr.

fun setReactScaleBarEnabled(scaleBarEnabled: Boolean) {
mScaleBarSettings.enabled = scaleBarEnabled
changes.add(Property.SCALEBAR)
}

fun setReactScaleBarIsMetricUnits(isMetricUnits: Boolean) {
mScaleBarIsMetricUnits = isMetricUnits
changes.add(Property.SCALEBAR)
}
fun setReactScaleBarViewMargins(scaleBarMargins: ReadableMap) {
mScaleBarSettings.margins = scaleBarMargins
changes.add(Property.SCALEBAR)
Expand All @@ -1328,6 +1331,7 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie

private fun applyScaleBar() {
mapView.scalebar.updateSettings {
isMetricUnits = mScaleBarIsMetricUnits
updateOrnament("scaleBar", mScaleBarSettings, this.toGenericOrnamentSettings())
}
workaroundToRelayoutChildOfMapView()
Expand Down
5 changes: 5 additions & 0 deletions android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapViewManager.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,11 @@ open class RNMBXMapViewManager(context: ReactApplicationContext, val viewTagReso
mapView.setReactScaleBarEnabled(scaleBarEnabled.asBoolean())
}

@ReactProp(name = "scaleBarIsMetricUnits")
override fun setScaleBarIsMetricUnits(mapView: RNMBXMapView, isMetricUnits: Dynamic) {
mapView.setReactScaleBarIsMetricUnits(isMetricUnits.asBoolean())
}

@ReactProp(name = "scaleBarViewMargins")
override fun setScaleBarViewMargins(mapView: RNMBXMapView, scaleBarMargins: Dynamic) {
mapView.setReactScaleBarViewMargins(scaleBarMargins.asMap())
Expand Down
3 changes: 3 additions & 0 deletions android/src/main/old-arch/com/facebook/react/viewmanagers/RNMBXMapViewManagerDelegate.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
case "scaleBarEnabled":
mViewManager.setScaleBarEnabled(view, new DynamicFromObject(value));
break;
case "scaleBarIsMetricUnits":
mViewManager.setScaleBarIsMetricUnits(view, new DynamicFromObject(value));
break;
case "scaleBarPosition":
mViewManager.setScaleBarPosition(view, new DynamicFromObject(value));
break;
Expand Down
1 change: 1 addition & 0 deletions android/src/main/old-arch/com/facebook/react/viewmanagers/RNMBXMapViewManagerInterface.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ public interface RNMBXMapViewManagerInterface<T extends View> {
void setCompassViewPosition(T view, Dynamic value);
void setCompassViewMargins(T view, Dynamic value);
void setScaleBarEnabled(T view, Dynamic value);
void setScaleBarIsMetricUnits(T view, Dynamic value);
void setScaleBarPosition(T view, Dynamic value);
void setZoomEnabled(T view, Dynamic value);
void setScrollEnabled(T view, Dynamic value);
Expand Down
17 changes: 17 additions & 0 deletions example/src/examples/Map/Ornaments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,10 @@ type OrnamentButtonsProps = {
ornamentType: OrnamentType;
visibility: Record<OrnamentType, true | false | undefined>;
position: Record<OrnamentType, OrnamentPosition>;
isMetricUnits?: boolean;
onPressVisibility: (ornamentType: OrnamentType) => void;
onPressPosition: (ornamentType: OrnamentType) => void;
onPressIsMetricUnits?: () => void;
};

const OrnamentButtons = ({
Expand All @@ -47,6 +49,8 @@ const OrnamentButtons = ({
position,
onPressVisibility,
onPressPosition,
isMetricUnits,
onPressIsMetricUnits,
}: OrnamentButtonsProps) => (
<>
<Button
Expand All @@ -57,6 +61,12 @@ const OrnamentButtons = ({
title={'Position: ' + position[ornamentType]}
onPress={(): void => onPressPosition(ornamentType)}
/>
{!!onPressIsMetricUnits && (
<Button
title={'Metric Units: ' + isMetricUnits}
onPress={(): void => onPressIsMetricUnits()}
/>
)}
</>
);

Expand All @@ -68,6 +78,8 @@ const Ornaments = () => {
[OrnamentType.ScaleBar]: undefined,
});

const [scaleBarIsMetricUnits, setScaleBarIsMetricUnits] = useState(false);

const [position, setPosition] = useState({
[OrnamentType.Logo]: OrnamentPosition.BottomLeft,
[OrnamentType.Attribution]: OrnamentPosition.BottomRight,
Expand Down Expand Up @@ -125,6 +137,7 @@ const Ornaments = () => {
compassEnabled={visibility[OrnamentType.Compass]}
compassPosition={POSITIONS[position[OrnamentType.Compass]]}
compassImage={compassImage}
scaleBarIsMetricUnits={scaleBarIsMetricUnits}
compassFadeWhenNorth={compassFadeWhenNorth}
scaleBarEnabled={visibility[OrnamentType.ScaleBar]}
scaleBarPosition={POSITIONS[position[OrnamentType.ScaleBar]]}
Expand Down Expand Up @@ -196,8 +209,12 @@ const Ornaments = () => {
ornamentType={OrnamentType.ScaleBar}
visibility={visibility}
position={position}
isMetricUnits={scaleBarIsMetricUnits}
onPressVisibility={handlePressVisibility}
onPressPosition={handlePressPosition}
onPressIsMetricUnits={() => {
setScaleBarIsMetricUnits(!scaleBarIsMetricUnits);
}}
/>
</Bubble>
</>
Expand Down
11 changes: 11 additions & 0 deletions ios/RNMBX/RNMBXMapView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,13 +669,19 @@ open class RNMBXMapView: UIView {
}

var scaleBarEnabled: Bool? = nil
var scaleBarIsMetricUnits: Bool? = nil
var scaleBarPosition: OrnamentPosition? = nil
var scaleBarMargins: CGPoint? = nil

@objc public func setReactScaleBarEnabled(_ value: Bool) {
scaleBarEnabled = value
changed(.scaleBar)
}

@objc public func setReactScaleBarIsMetricUnits(_ value: Bool) {
scaleBarIsMetricUnits = value
changed(.scaleBar)
}

@objc public func setReactScaleBarPosition(_ position: [String: NSNumber]) {
if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
Expand All @@ -688,6 +694,11 @@ open class RNMBXMapView: UIView {
if let enabled = scaleBarEnabled {
mapView.ornaments.options.scaleBar.visibility = enabled ? .visible : .hidden
}

if let useMetricUnits = scaleBarIsMetricUnits {
mapView.ornaments.options.scaleBar.useMetricUnits = useMetricUnits
}

if let position = scaleBarPosition {
mapView.ornaments.options.scaleBar.position = position
}
Expand Down
5 changes: 5 additions & 0 deletions ios/RNMBX/RNMBXMapViewComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,11 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
if (scaleBarEnabled != nil) {
_view.reactScaleBarEnabled = scaleBarEnabled;
}

id scaleBarIsMetricUnits = RNMBXConvertFollyDynamicToId(newViewProps.scaleBarIsMetricUnits);
if (scaleBarIsMetricUnits != nil) {
_view.reactScaleBarEnabled = scaleBarIsMetricUnits;
}

id scaleBarPosition = RNMBXConvertFollyDynamicToId(newViewProps.scaleBarPosition);
if (scaleBarPosition != nil) {
Expand Down
1 change: 1 addition & 0 deletions ios/RNMBX/RNMBXMapViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ @interface RCT_EXTERN_REMAP_MODULE(RNMBXMapView, RNMBXMapViewManager, RCTViewMan
RCT_REMAP_VIEW_PROPERTY(compassImage, reactCompassImage, NSString)

RCT_REMAP_VIEW_PROPERTY(scaleBarEnabled, reactScaleBarEnabled, BOOL)
RCT_REMAP_VIEW_PROPERTY(scaleBarIsMetricUnits, reactScaleBarIsMetricUnits, BOOL)
RCT_REMAP_VIEW_PROPERTY(scaleBarPosition, reactScaleBarPosition, NSDictionary)

RCT_REMAP_VIEW_PROPERTY(zoomEnabled, reactZoomEnabled, BOOL)
Expand Down
7 changes: 7 additions & 0 deletions src/components/MapView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,12 @@ type Props = ViewProps & {
*/
scaleBarEnabled?: boolean;

/**
* [`mapbox` (v10) implementation only] Whether the scale bar is using metric unit.
* True if the scale bar is using metric system, false if the scale bar is using imperial units.
*/
scaleBarIsMetricUnits?: boolean;

/**
* [`mapbox` (v10) implementation only] Adds scale bar offset, e.g. `{top: 8, left: 8}` will put the scale bar in top-left corner of the map
*/
Expand Down Expand Up @@ -486,6 +492,7 @@ class MapView extends NativeBridgeComponent(
compassFadeWhenNorth: false,
logoEnabled: true,
scaleBarEnabled: true,
scaleBarIsMetricUnits: false,
surfaceView: RNMBXModule.MapboxV10 ? true : false,
requestDisallowInterceptTouchEvent: false,
regionWillChangeDebounceTime: 10,
Expand Down
Loading