Fix Maps

iOS Project
- HIPMIBadungConnect.xcodeproj/project.pbxproj

Maps & Location Screens
- screens/Maps/MapsView2.tsx
- screens/Portofolio/BusinessLocationSection.tsx

New Map Components
- components/Map/MapsV2Custom.tsx
- components/Map/SelectLocationMap.tsx

### No Issue

screens/Maps/MapsView2.tsx

@@ -1,19 +1,13 @@
 import { useCallback, useState } from "react";
-import { Image, StyleSheet, View } from "react-native";
 
-// Cek versi >= 10.x gunakan ini
-import API_IMAGE from "@/constants/api-storage";
-import { MainColor } from "@/constants/color-palet";
 import { apiMapsGetAll } from "@/service/api-client/api-maps";
-import {
-  Camera,
-  MapView,
-  PointAnnotation,
-} from "@maplibre/maplibre-react-native";
 import { useFocusEffect } from "expo-router";
-import DrawerMaps from "./DrawerMaps";
 
-const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+import { ViewWrapper } from "@/components";
+import { MapMarker, MapsV2Custom } from "@/components/Map/MapsV2Custom";
+
+import DrawerMaps from "./DrawerMaps";
+import { StyleSheet } from "react-native";
 
 interface TypeMaps {
   id: string;
@@ -40,14 +34,6 @@ interface TypeMaps {
   };
 }
 
-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-  height: 300,
-};
-
 export default function MapsView2() {
   const [list, setList] = useState<TypeMaps[] | null>(null);
   const [loadList, setLoadList] = useState(false);
@@ -76,7 +62,6 @@ export default function MapsView2() {
       const response = await apiMapsGetAll();
 
       if (response.success) {
-        // console.log("[RESPONSE]", JSON.stringify(response.data, null, 2));
         setList(response.data);
       }
     } catch (error) {
@@ -86,53 +71,31 @@ export default function MapsView2() {
     }
   };
 
+  const markers: MapMarker[] = list?.map((item) => ({
+    id: item.id,
+    coordinate: [item.longitude, item.latitude] as [number, number],
+    imageId: item.Portofolio.logoId,
+    onSelected: () => {
+      setOpenDrawer(true);
+      setSelected({
+        id: item.id,
+        bidangBisnis: item.Portofolio.MasterBidangBisnis.name,
+        nomorTelepon: item.Portofolio.tlpn,
+        alamatBisnis: item.Portofolio.alamatKantor,
+        namePin: item.namePin,
+        imageId: item.imageId,
+        portofolioId: item.Portofolio.id,
+        latitude: item.latitude,
+        longitude: item.longitude,
+      });
+    },
+  })) || [];
+
   return (
     <>
-      <View style={styles.container}>
-        <MapView style={styles.map} mapStyle={MAP_STYLE}>
-          <Camera
-            zoomLevel={12}
-            centerCoordinate={[defaultRegion.longitude, defaultRegion.latitude]}
-          />
-
-          {list?.map((item: TypeMaps) => {
-            const imageUrl = API_IMAGE.GET({ fileId: item.Portofolio.logoId });
-
-            return (
-              <PointAnnotation
-                key={item.id}
-                id={item.id}
-                coordinate={[item.longitude, item.latitude] as [number, number]}
-                onSelected={() => {
-                  setOpenDrawer(true);
-                  setSelected({
-                    id: item?.id,
-                    bidangBisnis: item?.Portofolio?.MasterBidangBisnis?.name,
-                    nomorTelepon: item?.Portofolio?.tlpn,
-                    alamatBisnis: item?.Portofolio?.alamatKantor,
-                    namePin: item?.namePin,
-                    imageId: item?.imageId,
-                    portofolioId: item?.Portofolio?.id,
-                    latitude: item?.latitude,
-                    longitude: item?.longitude,
-                  });
-                }}
-              >
-                <View style={styles.markerContainer}>
-                  <Image
-                    source={{ uri: imageUrl }}
-                    style={styles.markerImage}
-                    resizeMode="cover"
-                    onError={(e: any) =>
-                      console.log("Image error:", e.nativeEvent.error)
-                    } // Tangkap error image
-                  />
-                </View>
-              </PointAnnotation>
-            );
-          })}
-        </MapView>
-      </View>
+      <ViewWrapper>
+        <MapsV2Custom markers={markers} />
+      </ViewWrapper>
 
       <DrawerMaps
         openDrawer={openDrawer}
@@ -144,23 +107,9 @@ export default function MapsView2() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  map: { flex: 1 },
-  markerContainer: {
-    width: 30,
-    height: 30,
-    borderRadius: 100,
-    overflow: "hidden", // Wajib agar borderRadius terapply pada Image
-    borderWidth: 1,
-    borderColor: MainColor.darkblue, // Opsional, biar lebih cantik
-    elevation: 4, // Shadow Android
-    shadowColor: "#000", // Shadow iOS
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.3,
-    shadowRadius: 3,
+  map: {
+    flex: 1,
+    width: "50%",
+    maxHeight: "50%",
   },
-  markerImage: {
-    width: "100%",
-    height: "100%",
-  },
-});
+});