diff --git a/src/screens/Map.tsx b/src/screens/Map.tsx
index 8e4237c..269fedb 100644
--- a/src/screens/Map.tsx
+++ b/src/screens/Map.tsx
@@ -15,7 +15,12 @@ import {
} from 'react-native';
import MapView from 'react-native-map-clustering';
-import { Marker, MapType, Region } from 'react-native-maps';
+import {
+ Marker,
+ MapType,
+ Region,
+ Polygon,
+} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
const { width } = Dimensions.get('window');
@@ -38,6 +43,14 @@ const formatPrice = (value: number) => {
return value.toString();
};
+const getPolygonCoords = (polygon: number[][]) => {
+ if (!polygon) return [];
+ return polygon.map(([lat, lng]) => ({
+ latitude: lat,
+ longitude: lng,
+ }));
+};
+
/* ---------------- PRICE MARKER ---------------- */
const PriceMarker = ({ item, onPress, selected }: any) => {
@@ -151,8 +164,6 @@ const MapScreen = () => {
setProperties(json.properties || []);
setRegion(newRegion);
-
- // ✅ MOVE MAP TO SEARCH LOCATION
mapRef.current?.animateToRegion(newRegion, 1000);
}
} catch (error) {
@@ -162,6 +173,27 @@ const MapScreen = () => {
}
};
+ /* ---------------- SELECT PROPERTY ---------------- */
+
+ const onSelectProperty = (item: any) => {
+ setSelectedItem(item);
+
+ if (item.polygon?.length) {
+ mapRef.current?.fitToCoordinates(
+ getPolygonCoords(item.polygon),
+ {
+ edgePadding: {
+ top: 80,
+ right: 80,
+ bottom: 300,
+ left: 80,
+ },
+ animated: true,
+ }
+ );
+ }
+ };
+
const popupTranslateY = popupAnim.interpolate({
inputRange: [0, 1],
outputRange: [200, 0],
@@ -205,12 +237,28 @@ const MapScreen = () => {
spiralEnabled={false}
mapType={mapType}
>
+ {/* ---- POLYGONS ---- */}
+ {properties.map((item) =>
+ item.polygon ? (
+
+ ) : null
+ )}
+
+ {/* ---- MARKERS ---- */}
{properties.map((item) => (
))}