feat(v10, ios) Custom compass image

docs/MapView.md

@@ -26,6 +26,7 @@ MapView backed by Mapbox Native GL
 | compassPosition | `custom` | `none` | `false` | [`mapbox` (v10) implementation only] Adds compass offset, e.g. `{top: 8, left: 8}` will put the compass in top-left corner of 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 |
+| compassImage | `string` | `none` | `false` | [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component. |
 | scaleBarEnabled | `bool` | `true` | `false` | [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map |
 | scaleBarPosition | `custom` | `none` | `false` | [`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 |
 | surfaceView | `bool` | `false` | `false` | [Android only] Enable/Disable use of GLSurfaceView instead of TextureView. |

docs/docs.json

@@ -3028,6 +3028,13 @@
         "default": "none",
         "description": "Add margins to the compass with x and y values"
       },
+      {
+        "name": "compassImage",
+        "required": false,
+        "type": "string",
+        "default": "none",
+        "description": "[iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component."
+      },
       {
         "name": "scaleBarEnabled",
         "required": false,

example/src/examples/Map/Ornaments.tsx

@@ -1,10 +1,18 @@
 import React, { FC, useState } from 'react';
 import MapboxGL from '@rnmapbox/maps';
 import { Button, StyleSheet, Text } from 'react-native';
+import { Divider } from '@rneui/base';
 
 import sheet from '../../styles/sheet';
 import Page from '../common/Page';
 import Bubble from '../common/Bubble';
+import { Images } from '../../../../javascript';
+
+type CompassImage = 'compass1' | 'compass2';
+const images: Record<CompassImage, NodeRequire> = {
+  compass1: require('../../assets/compass1.png'),
+  compass2: require('../../assets/compass2.png'),
+};
 
 enum OrnamentType {
   Logo = 'logo',
@@ -27,12 +35,6 @@ const POSITIONS = {
   [OrnamentPosition.BottomLeft]: { bottom: 8, left: 8 },
 };
 
-const styles = StyleSheet.create({
-  bubble: {
-    marginBottom: 96,
-  },
-});
-
 type OrnamentButtonsProps = {
   ornamentType: OrnamentType;
   visibility: Record<OrnamentType, true | false | undefined>;
@@ -75,6 +77,11 @@ const ShowMap: FC<any> = (props) => {
     [OrnamentType.ScaleBar]: OrnamentPosition.TopLeft,
   });
 
+  const [compassImage, setCompassImage] = useState<CompassImage | undefined>();
+  const [compassFadeWhenNorth, setCompassFadeWhenNorth] = useState<
+    boolean | undefined
+  >(undefined);
+
   const handlePressVisibility = (ornamentType: OrnamentType): void => {
     setVisibility((prevState) => {
       let newValue;
@@ -119,9 +126,12 @@ const ShowMap: FC<any> = (props) => {
         attributionPosition={POSITIONS[position[OrnamentType.Attribution]]}
         compassEnabled={visibility[OrnamentType.Compass]}
         compassPosition={POSITIONS[position[OrnamentType.Compass]]}
+        compassImage={compassImage}
+        compassFadeWhenNorth={compassFadeWhenNorth}
         scaleBarEnabled={visibility[OrnamentType.ScaleBar]}
         scaleBarPosition={POSITIONS[position[OrnamentType.ScaleBar]]}
       >
+        <Images images={images} />
         <MapboxGL.Camera />
       </MapboxGL.MapView>
 
@@ -135,6 +145,8 @@ const ShowMap: FC<any> = (props) => {
           onPressPosition={handlePressPosition}
         />
 
+        <Divider style={styles.divider} />
+
         <Text>Attribution</Text>
         <OrnamentButtons
           ornamentType={OrnamentType.Attribution}
@@ -144,6 +156,8 @@ const ShowMap: FC<any> = (props) => {
           onPressPosition={handlePressPosition}
         />
 
+        <Divider style={styles.divider} />
+
         <Text>Compass</Text>
         <OrnamentButtons
           ornamentType={OrnamentType.Compass}
@@ -152,6 +166,32 @@ const ShowMap: FC<any> = (props) => {
           onPressVisibility={handlePressVisibility}
           onPressPosition={handlePressPosition}
         />
+        <Button
+          title={'Image: ' + compassImage}
+          onPress={() => {
+            if (!compassImage) {
+              setCompassImage('compass1');
+            } else if (compassImage === 'compass1') {
+              setCompassImage('compass2');
+            } else {
+              setCompassImage(undefined);
+            }
+          }}
+        />
+        <Button
+          title={'Fade when north: ' + compassFadeWhenNorth}
+          onPress={() => {
+            if (compassFadeWhenNorth === undefined) {
+              setCompassFadeWhenNorth(true);
+            } else if (compassFadeWhenNorth === true) {
+              setCompassFadeWhenNorth(false);
+            } else {
+              setCompassFadeWhenNorth(undefined);
+            }
+          }}
+        />
+
+        <Divider style={styles.divider} />
 
         <Text>ScaleBar</Text>
         <OrnamentButtons
@@ -166,4 +206,18 @@ const ShowMap: FC<any> = (props) => {
   );
 };
 
+const styles = StyleSheet.create({
+  divider: {
+    width: '100%',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  bubble: {
+    flex: 0,
+    alignItems: 'flex-start',
+    padding: 10,
+    marginBottom: 96,
+  },
+});
+
 export default ShowMap;

index.d.ts

@@ -568,6 +568,7 @@ export interface MapViewProps extends ViewProps {
   compassPosition?: OrnamentPosition;
   compassViewPosition?: number;
   compassViewMargins?: Point;
+  compassImage?: string;
   scaleBarEnabled?: boolean;
   scaleBarPosition?: OrnamentPosition;
   surfaceView?: boolean;

ios/RCTMGL-v10/RCTMGLMapView.swift

@@ -8,21 +8,22 @@ open class RCTMGLMapView : MapView {
 
   var compassEnabled: Bool = false
   var compassFadeWhenNorth: Bool = false
+  var compassImage: String?
+
   var reactOnPress : RCTBubblingEventBlock?
   var reactOnLongPress : RCTBubblingEventBlock?
   var reactOnMapChange : RCTBubblingEventBlock?
 
   var styleLoaded: Bool = false
   var styleLoadWaiters : [(MapboxMap)->Void] = []
+  var onStyleLoadedComponents: [RCTMGLMapComponent] = []
 
   weak var reactCamera : RCTMGLCamera?
   var images : [RCTMGLImages] = []
   var sources : [RCTMGLInteractiveElement] = []
 
   var handleMapChangedEvents = Set<RCTMGLEvent.EventType>()
-
-  var onStyleLoadedComponents: [RCTMGLMapComponent] = []
-
+
   private var isPendingInitialLayout = true
   private var wasGestureActive = false
   private var isGestureActive = false
@@ -80,7 +81,7 @@ open class RCTMGLMapView : MapView {
     super.insertReactSubview(subview, at: atIndex)
   }
 
-  @objc open override func removeReactSubview(_ subview:UIView!) {
+  @objc open override func removeReactSubview(_ subview: UIView!) {
     removeFromMap(subview)
     super.removeReactSubview(subview)
   }
@@ -138,7 +139,7 @@ open class RCTMGLMapView : MapView {
 
   @objc func setReactProjection(_ value: String?) {
     if let value = value {
-      var projection = StyleProjection(name: value == "globe" ? .globe : .mercator)
+      let projection = StyleProjection(name: value == "globe" ? .globe : .mercator)
       try! self.mapboxMap.style.setProjection(projection)
     }
   }
@@ -148,7 +149,7 @@ open class RCTMGLMapView : MapView {
     mapView.ornaments.options.attributionButton.visibility = value ? .visible : .hidden
   }
 
-  @objc func setReactAttributionPosition(_ position: [String: Int]!) {
+  @objc func setReactAttributionPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.attributionButton.position = ornamentOptions.position
       mapView.ornaments.options.attributionButton.margins = ornamentOptions.margins
@@ -159,7 +160,7 @@ open class RCTMGLMapView : MapView {
     mapView.ornaments.options.logo.visibility = value ? .visible : .hidden
   }
 
-  @objc func setReactLogoPosition(_ position: [String: Int]!) {
+  @objc func setReactLogoPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.logo.position = ornamentOptions.position
       mapView.ornaments.options.logo.margins = ornamentOptions.margins
@@ -168,17 +169,25 @@ open class RCTMGLMapView : MapView {
 
   @objc func setReactCompassEnabled(_ value: Bool) {
     compassEnabled = value
-    mapView.ornaments.options.compass.visibility = value ? compassFadeWhenNorth ? .adaptive : .visible : .hidden
+    refreshCompassVisibility()
   }
 
   @objc func setReactCompassFadeWhenNorth(_ value: Bool) {
     compassFadeWhenNorth = value
-    if (compassEnabled) {
-      mapView.ornaments.options.compass.visibility = value ? .adaptive : .visible
+    refreshCompassVisibility()
+  }
+
+  private func refreshCompassVisibility() {
+    var visibility: OrnamentVisibility = .hidden
+    if compassEnabled {
+      visibility = compassFadeWhenNorth ? .adaptive : .visible
     }
+    mapView.ornaments.options.compass.visibility = visibility
+
+    refreshCompassImage()
   }
 
-  @objc func setReactCompassPosition(_ position: [String: Int]!) {
+  @objc func setReactCompassPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.compass.position = ornamentOptions.position
       mapView.ornaments.options.compass.margins = ornamentOptions.margins
@@ -208,19 +217,37 @@ open class RCTMGLMapView : MapView {
     }
   }
 
-  @objc func setReactCompassViewPosition(_ position: Int) {
-    mapView.ornaments.options.compass.position = toOrnamentPositon(position)
+  @objc func setReactCompassViewPosition(_ position: NSNumber) {
+    mapView.ornaments.options.compass.position = toOrnamentPositon(Int(truncating: position))
   }
 
   @objc func setReactCompassViewMargins(_ margins: CGPoint) {
     mapView.ornaments.options.compass.margins = margins;
   }
 
+  @objc func setReactCompassImage(_ image: String) {
+    compassImage = image.isEmpty ? nil : image
+    refreshCompassImage()
+  }
+
+  private func refreshCompassImage() {
+    if let compassImage = compassImage {
+      onMapStyleLoaded { map in
+        let img = map.style.image(withId: compassImage)
+        self.mapView.ornaments.options.compass.image = img
+      }
+    } else {
+      // Does not currently reset the image to the default.
+      // See https://github.com/mapbox/mapbox-maps-ios/issues/1673.
+      self.mapView.ornaments.options.compass.image = nil
+    }
+  }
+
   @objc func setReactScaleBarEnabled(_ value: Bool) {
     self.mapView.ornaments.options.scaleBar.visibility = value ? .visible : .hidden
   }
 
-  @objc func setReactScaleBarPosition(_ position: [String: Int]!) {
+  @objc func setReactScaleBarPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.scaleBar.position = ornamentOptions.position
       mapView.ornaments.options.scaleBar.margins = ornamentOptions.margins
@@ -259,20 +286,20 @@ open class RCTMGLMapView : MapView {
     }
   }
 
-  private func getOrnamentOptionsFromPosition(_ position: [String: Int]) -> (position: OrnamentPosition, margins: CGPoint)? {
+  private func getOrnamentOptionsFromPosition(_ position: [String: NSNumber]) -> (position: OrnamentPosition, margins: CGPoint)? {
     let left = position["left"]
     let right = position["right"]
     let top = position["top"]
     let bottom = position["bottom"]
 
     if let left = left, let top = top {
-      return (OrnamentPosition.topLeading, CGPoint(x: left, y: top))
+      return (OrnamentPosition.topLeading, CGPoint(x: Int(truncating: left), y: Int(truncating: top)))
     } else if let right = right, let top = top {
-      return (OrnamentPosition.topTrailing, CGPoint(x: right, y: top))
+      return (OrnamentPosition.topTrailing, CGPoint(x: Int(truncating: right), y: Int(truncating: top)))
     } else if let bottom = bottom, let right = right {
-      return (OrnamentPosition.bottomTrailing, CGPoint(x: right, y: bottom))
+      return (OrnamentPosition.bottomTrailing, CGPoint(x: Int(truncating: right), y: Int(truncating: bottom)))
     } else if let bottom = bottom, let left = left {
-      return (OrnamentPosition.bottomLeading, CGPoint(x: left, y: bottom))
+      return (OrnamentPosition.bottomLeading, CGPoint(x: Int(truncating: left), y: Int(truncating: bottom)))
     }
 
     return nil
@@ -428,7 +455,7 @@ extension RCTMGLMapView {
       self.onStyleLoadedComponents.forEach { (component) in
         component.addToMap(self, style: self.mapboxMap.style)
       }
-
+      
       if !self.styleLoaded {
         self.styleLoaded = true
         if let mapboxMap = self.mapboxMap {

ios/RCTMGL-v10/RCTMGLMapViewManager.m

@@ -5,13 +5,16 @@ @interface RCT_EXTERN_REMAP_MODULE(RCTMGLMapView, RCTMGLMapViewManager, RCTViewM
 
 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(compassFadeWhenNorth, reactCompassFadeWhenNorth, BOOL)
 RCT_REMAP_VIEW_PROPERTY(compassPosition, reactCompassPosition, NSDictionary)
 RCT_REMAP_VIEW_PROPERTY(compassViewPosition, reactCompassViewPosition, NSInteger)
 RCT_REMAP_VIEW_PROPERTY(compassViewMargins, reactCompassViewMargins, CGPoint)
+RCT_REMAP_VIEW_PROPERTY(compassImage, reactCompassImage, NSString)
 
 RCT_REMAP_VIEW_PROPERTY(scaleBarEnabled, reactScaleBarEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scaleBarPosition, reactScaleBarPosition, NSDictionary)

javascript/components/MapView.js

@@ -172,6 +172,11 @@ class MapView extends NativeBridgeComponent(
      */
     compassViewMargins: PropTypes.object,
 
+    /**
+     * [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component.
+     */
+    compassImage: PropTypes.string,
+
     /**
      * [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map
      */