Tampilan maps android

- screens/Maps/MapsView2.tsx

### No Issue

screens/Maps/MapsView2.tsx

@@ -1,29 +1,25 @@
-import React, { useCallback, useState } from "react";
-import { StyleSheet, View } from "react-native";
+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 {
-  MapView,
   Camera,
+  MapView,
   PointAnnotation,
-  Images,
-  ShapeSource,
-  SymbolLayer,
 } from "@maplibre/maplibre-react-native";
+import { router, useFocusEffect } from "expo-router";
 import {
-  ButtonCustom,
   DrawerCustom,
   DummyLandscapeImage,
-  Grid,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  Grid,
+  ButtonCustom,
 } from "@/components";
-import { apiMapsGetAll } from "@/service/api-client/api-maps";
-import { router, useFocusEffect } from "expo-router";
-import { Image } from "expo-image";
-import API_IMAGE from "@/constants/api-storage";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
@@ -31,6 +27,31 @@ import { FontAwesome, Ionicons } from "@expo/vector-icons";
 
 const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
 
+interface TypeMaps {
+  id: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  namePin: string;
+  latitude: number;
+  longitude: number;
+  authorId: string;
+  portofolioId: string;
+  imageId: string;
+  pinId: string | null;
+  Portofolio: {
+    id: string;
+    namaBisnis: string;
+    logoId: string;
+    alamatKantor: string;
+    tlpn: string;
+    MasterBidangBisnis: {
+      id: string;
+      name: string;
+    };
+  };
+}
+
 const defaultRegion = {
   latitude: -8.737109,
   longitude: 115.1756897,
@@ -40,7 +61,7 @@ const defaultRegion = {
 };
 
 export default function MapsView2() {
-  const [list, setList] = useState<any[] | null>(null);
+  const [list, setList] = useState<TypeMaps[] | null>(null);
   const [loadList, setLoadList] = useState(false);
   const [openDrawer, setOpenDrawer] = useState(false);
   const [selected, setSelected] = useState({
@@ -67,6 +88,7 @@ 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) {
@@ -76,57 +98,51 @@ export default function MapsView2() {
     }
   };
 
-  // Data GeoJSON untuk marker
-  const markerData: GeoJSON.FeatureCollection = {
-    type: "FeatureCollection",
-    features: [
-      {
-        type: "Feature",
-        geometry: {
-          type: "Point",
-          coordinates: [115.1756897, -8.737109],
-        },
-        properties: { id: "1", title: "Lokasi A" },
-      },
-      {
-        type: "Feature",
-        geometry: {
-          type: "Point",
-          coordinates: [106.83, -6.18],
-        },
-        properties: { id: "2", title: "Lokasi B" },
-      },
-    ],
-  };
-
   return (
     <>
       <View style={styles.container}>
         <MapView style={styles.map} mapStyle={MAP_STYLE}>
           <Camera
-            zoomLevel={14}
+            zoomLevel={12}
             centerCoordinate={[defaultRegion.longitude, defaultRegion.latitude]}
           />
 
-          <Images
-            images={{
-              customMarker: API_IMAGE.GET({
-                fileId: "cmcvppftd00t7bpnnnma0hfei",
-              }),
-            }}
-            onImageMissing={(imageKey) => console.log("Missing:", imageKey)}
-          />
-          <ShapeSource id="markers-source" shape={markerData}>
-            <SymbolLayer
-              id="markers-layer"
-              style={{
-                iconImage: "customMarker", // Nama alias dari Images
-                iconSize: 0.05, // Skala ukuran
-                iconAnchor: "bottom", // Titik anchor marker
-                iconAllowOverlap: true, // Marker tidak saling menyembunyikan
-              }}
-            />
-          </ShapeSource>
+          {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>
 
@@ -223,10 +239,21 @@ export default function MapsView2() {
 const styles = StyleSheet.create({
   container: { flex: 1 },
   map: { flex: 1 },
-  marker: {
+  markerContainer: {
     width: 30,
     height: 30,
     borderRadius: 100,
-    backgroundColor: "red",
+    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,
+  },
+  markerImage: {
+    width: "100%",
+    height: "100%",
   },
 });