111 lines
2.5 KiB
TypeScript
111 lines
2.5 KiB
TypeScript
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",
|
|
},
|
|
});
|