feat: add scaleBarUnits prop to MapView (#4211)

Author: mfazekas

android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt

@@ -1357,6 +1357,7 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
     }
 
     var mScaleBarSettings = OrnamentSettings(enabled = false)
+    var mScaleBarUnits: String? = null
 
     fun setReactScaleBarEnabled(scaleBarEnabled: Boolean) {
         mScaleBarSettings.enabled = scaleBarEnabled
@@ -1378,9 +1379,21 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
         changes.add(Property.SCALEBAR)
     }
 
+    fun setReactScaleBarUnits(units: String?) {
+        mScaleBarUnits = units
+        changes.add(Property.SCALEBAR)
+    }
+
     private fun applyScaleBar() {
         mapView.scalebar.updateSettings {
             updateOrnament("scaleBar", mScaleBarSettings, this.toGenericOrnamentSettings())
+            mScaleBarUnits?.let { units ->
+                distanceUnits = when (units) {
+                    "imperial" -> com.mapbox.maps.plugin.DistanceUnits.IMPERIAL
+                    "nautical" -> com.mapbox.maps.plugin.DistanceUnits.NAUTICAL
+                    else -> com.mapbox.maps.plugin.DistanceUnits.METRIC
+                }
+            }
         }
         workaroundToRelayoutChildOfMapView()
     }

android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapViewManager.kt

@@ -326,6 +326,11 @@ open class RNMBXMapViewManager(context: ReactApplicationContext, val viewTagReso
         mapView.setReactScaleBarPosition(mapValue)
     }
 
+    @ReactProp(name = "scaleBarUnits")
+    override fun setScaleBarUnits(mapView: RNMBXMapView, scaleBarUnits: Dynamic) {
+        mapView.setReactScaleBarUnits(scaleBarUnits.asString())
+    }
+
     @ReactProp(name = "compassEnabled")
     override fun setCompassEnabled(mapView: RNMBXMapView, compassEnabled: Dynamic) {
         mapView.setReactCompassEnabled(compassEnabled.asBoolean())

docs/MapView.md

@@ -246,6 +246,15 @@ OrnamentPositonProp
 
 [Ornaments](../examples/Map/Ornaments)
   
+### scaleBarUnits
+
+```tsx
+'metric' | 'imperial' | 'nautical'
+```
+Set the scale bar distance units. Defaults to metric.
+
+
+  
 ### surfaceView
 
 ```tsx

docs/docs.json

@@ -5397,6 +5397,13 @@
         "default": "none",
         "description": "[`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"
       },
+      {
+        "name": "scaleBarUnits",
+        "required": false,
+        "type": "'metric' \\| 'imperial' \\| 'nautical'",
+        "default": "none",
+        "description": "Set the scale bar distance units. Defaults to metric."
+      },
       {
         "name": "surfaceView",
         "required": false,

ios/RNMBX/RNMBXMapView.swift

@@ -823,6 +823,7 @@ open class RNMBXMapView: UIView, RCTInvalidating {
   var scaleBarEnabled: Bool? = nil
   var scaleBarPosition: OrnamentPosition? = nil
   var scaleBarMargins: CGPoint? = nil
+  var scaleBarUnits: String? = nil
 
   @objc public func setReactScaleBarEnabled(_ value: Bool) {
     scaleBarEnabled = value
@@ -836,6 +837,11 @@ open class RNMBXMapView: UIView, RCTInvalidating {
     }
   }
 
+  @objc public func setReactScaleBarUnits(_ value: NSString?) {
+    scaleBarUnits = value as? String
+    changed(.scaleBar)
+  }
+
   func applyScaleBar() {
     if let enabled = scaleBarEnabled {
       mapView.ornaments.options.scaleBar.visibility = enabled ? .visible : .hidden
@@ -846,6 +852,16 @@ open class RNMBXMapView: UIView, RCTInvalidating {
     if let margins = scaleBarMargins {
       mapView.ornaments.options.scaleBar.margins = margins
     }
+    if let units = scaleBarUnits {
+      switch units {
+      case "imperial":
+        mapView.ornaments.options.scaleBar.units = .imperial
+      case "nautical":
+        mapView.ornaments.options.scaleBar.units = .nautical
+      default:
+        mapView.ornaments.options.scaleBar.units = .metric
+      }
+    }
   }
 
   @objc override public func didSetProps(_ props: [String]) {

ios/RNMBX/RNMBXMapViewComponentView.mm

@@ -185,6 +185,11 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
         _view.reactScaleBarPosition = scaleBarPosition;
     }
 
+    id scaleBarUnits = RNMBXConvertFollyDynamicToId(newViewProps.scaleBarUnits);
+    if (scaleBarUnits != nil) {
+        [_view setReactScaleBarUnits:scaleBarUnits];
+    }
+
     RNMBX_REMAP_OPTIONAL_PROP_BOOL(zoomEnabled, reactZoomEnabled)
 
     RNMBX_REMAP_OPTIONAL_PROP_BOOL(scrollEnabled, reactScrollEnabled)

src/components/MapView.tsx

@@ -289,6 +289,11 @@ type Props = ViewProps & {
    */
   scaleBarPosition?: OrnamentPositonProp;
 
+  /**
+   * Set the scale bar distance units. Defaults to metric.
+   */
+  scaleBarUnits?: 'metric' | 'imperial' | 'nautical';
+
   /**
    * [Android only] Enable/Disable use of GLSurfaceView instead of TextureView.
    */

src/specs/RNMBXMapViewNativeComponent.ts

@@ -49,6 +49,7 @@ export interface NativeProps extends ViewProps {
 
   scaleBarEnabled?: OptionalProp<boolean>;
   scaleBarPosition?: UnsafeMixed<any>;
+  scaleBarUnits?: OptionalProp<string>;
 
   zoomEnabled?: OptionalProp<boolean>;
   scrollEnabled?: OptionalProp<boolean>;