From fb56521d84bb70446b12275a62396a8c17c127eb Mon Sep 17 00:00:00 2001
From: mansi-dev <mansi@lynkeduppro.com>
Date: Mon, 2 Feb 2026 23:46:52 +0530
Subject: [PATCH] Add camera presets and enhance App component with camera
 controls

---
 example/App.tsx                       | 88 +++++++++++++++++++++++----
 packages/map-sdk/README.md            | 17 ++++++
 packages/map-sdk/src/cameraPresets.ts | 26 ++++++++
 packages/map-sdk/src/index.ts         |  1 +
 4 files changed, 119 insertions(+), 13 deletions(-)
 create mode 100644 packages/map-sdk/src/cameraPresets.ts

diff --git a/example/App.tsx b/example/App.tsx
index f6bc057..03ab93d 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { SafeAreaView, StyleSheet, Button, View } from 'react-native';
-import { MapView, Marker, PropertyMap } from '@lynkedup/map-sdk';
+import { MapView, Marker, PropertyMap, CameraPresets } from '@lynkedup/map-sdk';
 import type { MapHandle } from '@lynkedup/map-sdk';
 
 export default function App() {
@@ -12,18 +12,80 @@ export default function App() {
             <View style={styles.controls}>
                 <Button title="Toggle SDK Example" onPress={() => setShowPropertyMap((s) => !s)} />
                 {!showPropertyMap && (
-                    <View style={{ flexDirection: 'row' }}>
-                        <Button
-                            title="Fly to SF"
-                            onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })}
-                        />
-                        <Button
-                            title="Fit Bounds"
-                            onPress={() =>
-                                mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 })
-                            }
-                        />
-                    </View>
+                    <>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Button
+                                title="Fly to SF"
+                                onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })}
+                            />
+                            <Button
+                                title="Fit Bounds"
+                                onPress={() =>
+                                    mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 })
+                                }
+                            />
+                        </View>
+
+                        <View style={{ marginTop: 8, flexDirection: 'row', justifyContent: 'space-between' }}>
+                            <Button
+                                title="Tilt 60°"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        { center: { latitude: 37.78825, longitude: -122.4324 }, pitch: 60 },
+                                        { duration: 800 }
+                                    )
+                                }
+                            />
+                            <Button
+                                title="Rotate 90°"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        { center: { latitude: 37.78825, longitude: -122.4324 }, heading: 90 },
+                                        { duration: 800 }
+                                    )
+                                }
+                            />
+                            <Button
+                                title="Zoom In"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        { center: { latitude: 37.78825, longitude: -122.4324 }, zoom: 15 },
+                                        { duration: 800 }
+                                    )
+                                }
+                            />
+                        </View>
+
+                        <View style={{ marginTop: 8, flexDirection: 'row', justifyContent: 'space-between' }}>
+                            <Button
+                                title="Overlook"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        CameraPresets.viewOverlook({ latitude: 37.78825, longitude: -122.4324 }),
+                                        { duration: 1000 }
+                                    )
+                                }
+                            />
+                            <Button
+                                title="Street"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        CameraPresets.streetLevel({ latitude: 37.78825, longitude: -122.4324 }),
+                                        { duration: 1000 }
+                                    )
+                                }
+                            />
+                            <Button
+                                title="Overview"
+                                onPress={() =>
+                                    mapRef.current?.animateCamera(
+                                        CameraPresets.overview({ latitude: 37.78825, longitude: -122.4324 }),
+                                        { duration: 1000 }
+                                    )
+                                }
+                            />
+                        </View>
+                    </>
                 )}
             </View>
 
diff --git a/packages/map-sdk/README.md b/packages/map-sdk/README.md
index fac3a53..6d07133 100644
--- a/packages/map-sdk/README.md
+++ b/packages/map-sdk/README.md
@@ -48,6 +48,23 @@ Available methods:
 - `flyTo(coordinate, duration?)` — quick helper that animates to a small region around `coordinate`.
 - `fitBounds(northEast, southWest, options?)` — fit the two coordinates with optional `edgePadding`.
 
+### Camera presets
+
+For convenience, `CameraPresets` provides common camera configurations you can pass into `animateCamera`.
+
+Example:
+
+```ts
+import { CameraPresets } from '@lynkedup/map-sdk';
+mapRef.current?.animateCamera(CameraPresets.viewOverlook({ latitude: 37.78825, longitude: -122.4324 }), { duration: 1000 });
+```
+
+Provided presets:
+
+- `viewOverlook(center)` — tilt and rotate to create an overview with pitch ~65° and heading ~45°.
+- `streetLevel(center)` — street-level view (pitch 0, zoom high).
+- `overview(center)` — wide overview of the area.
+
 ---
 
 ## PropertyMap (high-level SDK component) ✅
diff --git a/packages/map-sdk/src/cameraPresets.ts b/packages/map-sdk/src/cameraPresets.ts
new file mode 100644
index 0000000..ed7e62d
--- /dev/null
+++ b/packages/map-sdk/src/cameraPresets.ts
@@ -0,0 +1,26 @@
+import { Camera, LatLng } from 'react-native-maps';
+
+export type CameraPreset = (center: LatLng) => Partial<Camera>;
+
+export const CameraPresets: Record<string, CameraPreset> = {
+    viewOverlook: (center: LatLng) => ({
+        center,
+        pitch: 65,
+        heading: 45,
+        zoom: 16,
+    }),
+
+    streetLevel: (center: LatLng) => ({
+        center,
+        pitch: 0,
+        heading: 0,
+        zoom: 18,
+    }),
+
+    overview: (center: LatLng) => ({
+        center,
+        pitch: 0,
+        heading: 0,
+        zoom: 12,
+    }),
+};
diff --git a/packages/map-sdk/src/index.ts b/packages/map-sdk/src/index.ts
index 6df897c..d22cc54 100644
--- a/packages/map-sdk/src/index.ts
+++ b/packages/map-sdk/src/index.ts
@@ -1,6 +1,7 @@
 export { default as MapView } from './MapView';
 export type { MapHandle } from './MapView';
 export { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';
+export { CameraPresets } from './cameraPresets';
 
 // High-level components
 export { default as PropertyMap } from './components/PropertyMap';