zoom in for clusters

src/screens/InAppScreens/MapScreen/index.tsx

@@ -1252,10 +1252,22 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           <MapLibreGL.ShapeSource
             id="nomads"
             shape={nomads}
-            onPress={(event) => {
-              const isCluster = event.features[0].properties?.cluster;
+            onPress={async (event) => {
+              const feature = event.features[0];
+              const isCluster = feature.properties?.cluster;
 
               if (isCluster) {
+                const clusterCoordinates = (feature.geometry as GeoJSON.Point).coordinates;
+
+                const currentZoom = await mapRef.current?.getZoom();
+                const newZoom = (currentZoom || 0) + 3;
+
+                cameraRef.current?.setCamera({
+                  centerCoordinate: clusterCoordinates,
+                  zoomLevel: newZoom,
+                  animationDuration: 500,
+                  animationMode: 'flyTo'
+                });
                 return;
               } else {
                 handleUserPress(event);
@@ -1317,7 +1329,21 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         )}
         <MapLibreGL.Camera ref={cameraRef} />
         {location && (
-          <MapLibreGL.UserLocation animated={true} showsUserHeadingIndicator={true}>
+          <MapLibreGL.UserLocation
+            animated={true}
+            showsUserHeadingIndicator={true}
+            onPress={async () => {
+              const currentZoom = await mapRef.current?.getZoom();
+              const newZoom = (currentZoom || 0) + 2;
+
+              cameraRef.current?.setCamera({
+                centerCoordinate: [location.longitude, location.latitude],
+                zoomLevel: newZoom,
+                animationDuration: 500,
+                animationMode: 'flyTo'
+              });
+            }}
+          >
             {/* to do custom user location */}
           </MapLibreGL.UserLocation>
         )}