feat: addd allowOverlapWithPuck to MarkerView (#3212)

* Feat: MarkerView has allowOverlapWithPuck, MarkerView example updated and converted to typescript

* MarkerView example fixed typescript error in onPressMap

* MarkerView android crash for undefined allowOverlapWithPuck fixed

* RNMBXMarkerView crash with v11 fixed

android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerView.kt

@@ -31,6 +31,7 @@ class RNMBXMarkerView(context: Context?, private val mManager: RNMBXMarkerViewMa
     private var mCoordinate: Point? = null
     private var mAnchor: Vec2 = Vec2(0.5, 0.5)
     private var mAllowOverlap = false
+    private var mAllowOverlapWithPuck = false
     private var mIsSelected = false
 
     fun setCoordinate(point: Point?) {
@@ -48,6 +49,11 @@ class RNMBXMarkerView(context: Context?, private val mManager: RNMBXMarkerViewMa
         update()
     }
 
+    fun setAllowOverlapWithPuck(allowOverlapWithPuck: Boolean) {
+        mAllowOverlapWithPuck = allowOverlapWithPuck
+        update()
+    }
+
     fun setIsSelected(isSelected: Boolean) {
         mIsSelected = isSelected
         update()
@@ -176,6 +182,7 @@ class RNMBXMarkerView(context: Context?, private val mManager: RNMBXMarkerViewMa
             width(width.toDouble())
             height(height.toDouble())
             allowOverlap(mAllowOverlap)
+            allowOverlapWithPuck(mAllowOverlapWithPuck)
             offsets(offset.dx, offset.dy)
             selected(mIsSelected)
 

android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewManager.kt

@@ -49,6 +49,11 @@ class RNMBXMarkerViewManager(reactApplicationContext: ReactApplicationContext) :
         markerView.setAllowOverlap(allowOverlap.asBoolean())
     }
 
+    @ReactProp(name = "allowOverlapWithPuck")
+    override fun setAllowOverlapWithPuck(markerView: RNMBXMarkerView, allowOverlapWithPuck: Dynamic) {
+        markerView.setAllowOverlapWithPuck(allowOverlapWithPuck.asBoolean())
+    }
+
     @ReactProp(name = "isSelected")
     override fun setIsSelected(markerView: RNMBXMarkerView, isSelected: Dynamic) {
         markerView.setIsSelected(isSelected.asBoolean())

android/src/main/old-arch/com/facebook/react/viewmanagers/RNMBXMarkerViewManagerDelegate.java

@@ -31,6 +31,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "allowOverlap":
         mViewManager.setAllowOverlap(view, new DynamicFromObject(value));
         break;
+      case "allowOverlapWithPuck":
+        mViewManager.setAllowOverlapWithPuck(view, new DynamicFromObject(value));
+        break;
       case "isSelected":
         mViewManager.setIsSelected(view, new DynamicFromObject(value));
         break;

android/src/main/old-arch/com/facebook/react/viewmanagers/RNMBXMarkerViewManagerInterface.java

@@ -16,5 +16,6 @@ public interface RNMBXMarkerViewManagerInterface<T extends View> {
   void setCoordinate(T view, Dynamic value);
   void setAnchor(T view, Dynamic value);
   void setAllowOverlap(T view, Dynamic value);
+  void setAllowOverlapWithPuck(T view, Dynamic value);
   void setIsSelected(T view, Dynamic value);
 }

docs/MarkerView.md

@@ -60,6 +60,17 @@ markers will 'collapse' and only one will be shown. Defaults to false.
   _defaults to:_ `false`
 
   
+### allowOverlapWithPuck
+
+```tsx
+boolean
+```
+Whether or not nearby markers on the map should be hidden if close to a
+UserLocation puck. Defaults to false.
+
+  _defaults to:_ `false`
+
+  
 ### isSelected
 
 ```tsx

docs/docs.json

@@ -4277,6 +4277,13 @@
         "default": "false",
         "description": "@v10\n\nWhether or not nearby markers on the map should all be displayed. If false, adjacent\nmarkers will 'collapse' and only one will be shown. Defaults to false."
       },
+      {
+        "name": "allowOverlapWithPuck",
+        "required": false,
+        "type": "boolean",
+        "default": "false",
+        "description": "Whether or not nearby markers on the map should be hidden if close to a\nUserLocation puck. Defaults to false."
+      },
       {
         "name": "isSelected",
         "required": false,

docs/examples.json

@@ -546,8 +546,8 @@
           ],
           "docs": "\nShows marker view and poitn annotations\n"
         },
-        "fullPath": "example/src/examples/Annotations/MarkerView.js",
-        "relPath": "Annotations/MarkerView.js",
+        "fullPath": "example/src/examples/Annotations/MarkerView.tsx",
+        "relPath": "Annotations/MarkerView.tsx",
         "name": "MarkerView"
       },
       {

example/src/examples/Annotations/MarkerView.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Button, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import Mapbox from '@rnmapbox/maps';
+
+import Bubble from '../common/Bubble';
+
+const styles = StyleSheet.create({
+  touchableContainer: { borderColor: 'black', borderWidth: 1.0, width: 60 },
+  touchable: {
+    backgroundColor: 'blue',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  touchableText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  matchParent: { flex: 1 },
+});
+
+const AnnotationContent = ({ title }: { title: string }) => (
+  <View style={styles.touchableContainer}>
+    <Text>{title}</Text>
+    <TouchableOpacity style={styles.touchable}>
+      <Text style={styles.touchableText}>Btn</Text>
+    </TouchableOpacity>
+  </View>
+);
+const INITIAL_COORDINATES: [number, number][] = [
+  [-73.99155, 40.73581],
+  [-73.99155, 40.73681],
+];
+
+const ShowMarkerView = () => {
+  const [pointList, setPointList] =
+    React.useState<GeoJSON.Position[]>(INITIAL_COORDINATES);
+  const [allowOverlapWithPuck, setAllowOverlapWithPuck] =
+    React.useState<boolean>(false);
+
+  const onPressMap = (e: GeoJSON.Feature) => {
+    const geometry = e.geometry as GeoJSON.Point;
+    setPointList((pl) => [...pl, geometry.coordinates]);
+  };
+
+  return (
+    <>
+      <Button
+        title={
+          allowOverlapWithPuck
+            ? 'allowOverlapWithPuck true'
+            : 'allowOverlapWithPuck false'
+        }
+        onPress={() => setAllowOverlapWithPuck((prev) => !prev)}
+      />
+      <Mapbox.MapView onPress={onPressMap} style={styles.matchParent}>
+        <Mapbox.Camera
+          defaultSettings={{
+            zoomLevel: 16,
+            centerCoordinate: pointList[0],
+          }}
+        />
+
+        <Mapbox.PointAnnotation coordinate={pointList[1]} id="pt-ann">
+          <AnnotationContent title={'this is a point annotation'} />
+        </Mapbox.PointAnnotation>
+
+        <Mapbox.MarkerView
+          coordinate={pointList[0]}
+          allowOverlapWithPuck={allowOverlapWithPuck}
+        >
+          <AnnotationContent title={'this is a marker view'} />
+        </Mapbox.MarkerView>
+
+        {pointList.slice(2).map((coordinate, index) => (
+          <Mapbox.PointAnnotation
+            coordinate={coordinate}
+            id={`pt-ann-${index}`}
+            key={`pt-ann-${index}`}
+          >
+            <AnnotationContent title={'this is a point annotation'} />
+          </Mapbox.PointAnnotation>
+        ))}
+
+        <Mapbox.NativeUserLocation />
+      </Mapbox.MapView>
+
+      <Bubble>
+        <Text>Tap on map to add a point annotation</Text>
+      </Bubble>
+    </>
+  );
+};
+
+export default ShowMarkerView;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Marker View',
+  tags: ['PointAnnotation', 'MarkerView'],
+  docs: `
+Shows marker view and poitn annotations
+`,
+};
+ShowMarkerView.metadata = metadata;

ios/RNMBX/RNMBXMarkerView.swift

@@ -60,6 +60,12 @@ public class RNMBXMarkerView: UIView, RNMBXMapComponent {
     }
   }
 
+  @objc public var allowOverlapWithPuck: Bool = false {
+    didSet {
+      update()
+    }
+  }
+
   @objc public var isSelected: Bool = false {
     didSet {
       update()
@@ -227,7 +233,7 @@ public class RNMBXMarkerView: UIView, RNMBXMapComponent {
     let size = self.bounds.size
     let offset = calcOffset(size: size)
 
-    let options = ViewAnnotationOptions(
+    var options = ViewAnnotationOptions(
       geometry: geometry,
       width: size.width,
       height: size.height,
@@ -236,6 +242,9 @@ public class RNMBXMarkerView: UIView, RNMBXMapComponent {
       offsetY: offset.dy,
       selected: isSelected
     )
+    #if RNMBX_11
+    options.allowOverlapWithPuck = allowOverlapWithPuck
+    #endif
     return options
   }
 

ios/RNMBX/RNMBXMarkerViewComponentView.mm

@@ -84,6 +84,10 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     if (allowOverlap != nil) {
         _view.allowOverlap = allowOverlap;
     }
+    id allowOverlapWithPuck = RNMBXConvertFollyDynamicToId(newProps.allowOverlapWithPuck);
+    if (allowOverlapWithPuck != nil) {
+        _view.allowOverlapWithPuck = allowOverlapWithPuck;
+    }
     id isSelected = RNMBXConvertFollyDynamicToId(newProps.isSelected);
     if (isSelected != nil) {
         _view.isSelected = isSelected;

ios/RNMBX/RNMBXMarkerViewManager.m

@@ -7,6 +7,7 @@ @interface RCT_EXTERN_REMAP_MODULE(RNMBXMarkerView, RNMBXMarkerViewManager, RCTV
 RCT_EXPORT_VIEW_PROPERTY(coordinate, NSString)
 RCT_EXPORT_VIEW_PROPERTY(anchor, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(allowOverlap, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(allowOverlapWithPuck, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(isSelected, BOOL)
 
 @end