Hiển thị tọa độ và khu vực khi tàu vi phạm

components/map/MarkerCustom.tsx

@@ -0,0 +1,110 @@
+import { getShipIcon } from "@/services/map_service";
+import React from "react";
+import { Animated, Image, StyleSheet, View } from "react-native";
+import { Marker } from "react-native-maps";
+
+interface MarkerCustomProps {
+  id: string;
+  latitude: number;
+  longitude: number;
+  shipName?: string;
+  description?: string;
+  stateLevel?: number;
+  isFishing?: boolean;
+  heading?: number;
+  zIndex?: number;
+  anchor?: { x: number; y: number };
+  tracksViewChanges?: boolean;
+  identifier?: string;
+  animated?: {
+    scale: Animated.Value;
+    opacity: Animated.Value;
+  };
+}
+
+export const MarkerCustom: React.FC<MarkerCustomProps> = ({
+  id,
+  latitude,
+  longitude,
+  shipName,
+  description,
+  stateLevel = 0,
+  isFishing = false,
+  heading = 0,
+  zIndex = 50,
+  anchor = { x: 0.5, y: 0.5 },
+  tracksViewChanges = false,
+  identifier,
+  animated,
+}) => {
+  const uniqueKey =
+    id || `marker-${latitude.toFixed(6)}-${longitude.toFixed(6)}`;
+
+  return (
+    <Marker
+      key={uniqueKey}
+      coordinate={{
+        latitude,
+        longitude,
+      }}
+      zIndex={zIndex}
+      anchor={anchor}
+      title={shipName}
+      description={description}
+      tracksViewChanges={tracksViewChanges}
+      identifier={identifier || uniqueKey}
+    >
+      <View className="w-8 h-8 items-center justify-center">
+        <View style={styles.pingContainer}>
+          {animated && stateLevel === 3 && (
+            <Animated.View
+              style={[
+                styles.pingCircle,
+                {
+                  transform: [{ scale: animated.scale }],
+                  opacity: animated.opacity,
+                },
+              ]}
+            />
+          )}
+          <Image
+            source={(() => {
+              const icon = getShipIcon(stateLevel, isFishing);
+              return typeof icon === "string" ? { uri: icon } : icon;
+            })()}
+            style={{
+              width: 32,
+              height: 32,
+              transform: [
+                {
+                  rotate: `${
+                    typeof heading === "number" && !isNaN(heading) ? heading : 0
+                  }deg`,
+                },
+              ],
+            }}
+          />
+        </View>
+      </View>
+    </Marker>
+  );
+};
+
+export default MarkerCustom;
+
+const styles = StyleSheet.create({
+  pingContainer: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "visible",
+  },
+  pingCircle: {
+    position: "absolute",
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#ED3F27",
+  },
+});