Update docs from maps rnmapbox/maps@f6ee1b0

rnmapbox · Dec 5, 2023 · ad7fa2a · ad7fa2a
1 parent 0ae4403
commit ad7fa2a
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 64 deletions.
diff --git a/docs/components/MarkerView.md b/docs/components/MarkerView.md
@@ -63,6 +63,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

diff --git a/docs/examples/Annotations/MarkerView.md b/docs/examples/Annotations/MarkerView.md
@@ -2,21 +2,21 @@
 title: Marker View
 tags: [PointAnnotation, MarkerView]
 custom_props:
-  example_rel_path: Annotations/MarkerView.js
-custom_edit_url: https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.js
+  example_rel_path: Annotations/MarkerView.tsx
+custom_edit_url: https://github.com/rnmapbox/maps/tree/master/example/src/examples/Annotations/MarkerView.tsx
 ---
 
 Shows marker view and poitn annotations
 
 
 ```jsx
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { Button, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import Mapbox from '@rnmapbox/maps';
 
 import Bubble from '../common/Bubble';
 
-const styles = {
+const styles = StyleSheet.create({
   touchableContainer: { borderColor: 'black', borderWidth: 1.0, width: 60 },
   touchable: {
     backgroundColor: 'blue',
@@ -31,81 +31,80 @@ const styles = {
     fontWeight: 'bold',
   },
   matchParent: { flex: 1 },
-};
+});
 
-const AnnotationContent = ({ title }) => (
+const AnnotationContent = ({ title }: { title: string }) => (
   <View style={styles.touchableContainer}>
     <Text>{title}</Text>
     <TouchableOpacity style={styles.touchable}>
       <Text style={styles.touchableText}>Btn</Text>
     </TouchableOpacity>
   </View>
 );
-
-class ShowMarkerView extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      backgroundColor: 'blue',
-      coordinates: [
-        [-73.99155, 40.73581],
-        [-73.99155, 40.73681],
-      ],
-    };
-  }
-
-  onPress(e) {
-    this.setState({
-      coordinates: [...this.state.coordinates, e.geometry.coordinates],
-    });
-  }
-
-  render() {
-    return (
-      <>
-        <Mapbox.MapView
-          ref={(c) => (this._map = c)}
-          onPress={(e) => this.onPress(e)}
-          onDidFinishLoadingMap={this.onDidFinishLoadingMap}
-          style={styles.matchParent}
+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}
         >
-          <Mapbox.Camera
-            defaultSettings={{
-              zoomLevel: 16,
-              centerCoordinate: this.state.coordinates[0],
-            }}
-          />
+          <AnnotationContent title={'this is a marker view'} />
+        </Mapbox.MarkerView>
 
+        {pointList.slice(2).map((coordinate, index) => (
           <Mapbox.PointAnnotation
-            coordinate={this.state.coordinates[1]}
-            id="pt-ann"
+            coordinate={coordinate}
+            id={`pt-ann-${index}`}
+            key={`pt-ann-${index}`}
           >
             <AnnotationContent title={'this is a point annotation'} />
           </Mapbox.PointAnnotation>
+        ))}
 
-          <Mapbox.MarkerView coordinate={this.state.coordinates[0]}>
-            <AnnotationContent title={'this is a marker view'} />
-          </Mapbox.MarkerView>
-
-          {this.state.coordinates.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.MapView>
-
-        <Bubble>
-          <Text>Click to add a point annotation</Text>
-        </Bubble>
-      </>
-    );
-  }
-}
+        <Mapbox.NativeUserLocation />
+      </Mapbox.MapView>
+
+      <Bubble>
+        <Text>Tap on map to add a point annotation</Text>
+      </Bubble>
+    </>
+  );
+};
 
 export default ShowMarkerView;