diff --git a/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt b/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt index aa41338d2f..af774d6de1 100644 --- a/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt +++ b/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt @@ -27,6 +27,7 @@ import com.rnmapbox.rnmbx.v11compat.annotation.*; class RNMBXPointAnnotation(private val mContext: Context, private val mManager: RNMBXPointAnnotationManager) : AbstractMapFeature(mContext), View.OnLayoutChangeListener { var pointAnnotations: RNMBXPointAnnotationCoordinator? = null + var slot: String? = null var annotation: PointAnnotation? = null private set private var mMap: MapboxMap? = null @@ -98,6 +99,7 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager: super.addToMap(mapView) mMap = mapView.getMapboxMap() pointAnnotations = mapView.pointAnnotations + slot?.let { pointAnnotations?.manager?.slot = it } makeMarker() if (mChildView != null) { if (!mChildView!!.isAttachedToWindow) { diff --git a/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt b/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt index b9088c5053..7056f3f646 100644 --- a/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt +++ b/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt @@ -94,6 +94,14 @@ class RNMBXPointAnnotationManager(reactApplicationContext: ReactApplicationConte annotation.setDraggable(draggable.asBoolean()) } + @ReactProp(name = "slot") + override fun setSlot(annotation: RNMBXPointAnnotation, slot: Dynamic) { + if (!slot.isNull) { + annotation.slot = slot.asString() + annotation.pointAnnotations?.manager?.slot = slot.asString() + } + } + companion object { const val REACT_CLASS = "RNMBXPointAnnotation" } diff --git a/docs/PointAnnotation.md b/docs/PointAnnotation.md index a915e5df6f..5bdd182111 100644 --- a/docs/PointAnnotation.md +++ b/docs/PointAnnotation.md @@ -144,6 +144,16 @@ This callback is fired while this annotation is being dragged. +### slot + +```tsx +'bottom' | 'middle' | 'top' | string +``` +The slot in the Standard style to position the annotation layer. +Use with Mapbox Standard style to control layer ordering. + + + ### children ```tsx diff --git a/docs/docs.json b/docs/docs.json index 399a40f854..ca8594dc50 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -6510,6 +6510,13 @@ "default": "none", "description": "This callback is fired while this annotation is being dragged.\n*signature:*`(payload:Feature) => void`" }, + { + "name": "slot", + "required": false, + "type": "'bottom' \\| 'middle' \\| 'top' \\| string", + "default": "none", + "description": "The slot in the Standard style to position the annotation layer.\nUse with Mapbox Standard style to control layer ordering." + }, { "name": "children", "required": true, diff --git a/ios/RNMBX/RNMBXPointAnnotation.swift b/ios/RNMBX/RNMBXPointAnnotation.swift index 86eb1aa445..24e2d2b1f9 100644 --- a/ios/RNMBX/RNMBXPointAnnotation.swift +++ b/ios/RNMBX/RNMBXPointAnnotation.swift @@ -29,6 +29,14 @@ public class RNMBXPointAnnotation : RNMBXInteractiveElement { var reactSubviews : [UIView] = [] + @objc public var slot: String? { + didSet { + if let slot = slot { + map?.pointAnnotationManager.manager.slot = Slot(rawValue: slot) + } + } + } + @objc public var onDeselected: RCTBubblingEventBlock? = nil @objc public var onDrag: RCTBubblingEventBlock? = nil @objc public var onDragEnd: RCTBubblingEventBlock? = nil @@ -274,6 +282,9 @@ public class RNMBXPointAnnotation : RNMBXInteractiveElement { public override func addToMap(_ map: RNMBXMapView, mapView: MapView, style: Style) { super.addToMap(map, mapView: mapView, style: style) + if let slot = slot { + map.pointAnnotationManager.manager.slot = Slot(rawValue: slot) + } addIfPossible() } diff --git a/ios/RNMBX/RNMBXPointAnnotationComponentView.mm b/ios/RNMBX/RNMBXPointAnnotationComponentView.mm index 8472017016..73f4180790 100644 --- a/ios/RNMBX/RNMBXPointAnnotationComponentView.mm +++ b/ios/RNMBX/RNMBXPointAnnotationComponentView.mm @@ -131,6 +131,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared & RNMBX_OPTIONAL_PROP_NSString(id) RNMBX_OPTIONAL_PROP_NSDictionary(anchor) RNMBX_REMAP_OPTIONAL_PROP_BOOL(selected, reactSelected) + RNMBX_OPTIONAL_PROP_NSString(slot) [super updateProps:props oldProps:oldProps]; } diff --git a/src/components/PointAnnotation.tsx b/src/components/PointAnnotation.tsx index de2c0ddea5..ad052454f8 100644 --- a/src/components/PointAnnotation.tsx +++ b/src/components/PointAnnotation.tsx @@ -104,6 +104,12 @@ type Props = BaseProps & { */ onDrag?: (payload: FeaturePayload) => void; + /** + * The slot in the Standard style to position the annotation layer. + * Use with Mapbox Standard style to control layer ordering. + */ + slot?: 'bottom' | 'middle' | 'top' | string; + /** * Expects one child, and an optional callout can be added as well */ diff --git a/src/specs/RNMBXPointAnnotationNativeComponent.ts b/src/specs/RNMBXPointAnnotationNativeComponent.ts index a74ddb9797..ce35571593 100644 --- a/src/specs/RNMBXPointAnnotationNativeComponent.ts +++ b/src/specs/RNMBXPointAnnotationNativeComponent.ts @@ -5,6 +5,11 @@ import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; import type { UnsafeMixed } from './codegenUtils'; +// see https://github.com/rnmapbox/maps/wiki/FabricOptionalProp +type OptionalProp = UnsafeMixed; + +type Slot = 'bottom' | 'middle' | 'top'; + type OnMapboxPointAnnotationDeselectedEventType = { type: string; payload: string; @@ -29,6 +34,7 @@ export interface NativeProps extends ViewProps { id: UnsafeMixed; anchor: UnsafeMixed; selected: UnsafeMixed; + slot?: OptionalProp; onMapboxPointAnnotationDeselected: DirectEventHandler; onMapboxPointAnnotationDrag: DirectEventHandler;