Add camera presets and enhance App component with camera controls

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,6 +12,7 @@ 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"
@@ -24,6 +25,67 @@ export default function App() {
                                 }
                             />
                         </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>
 

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) ✅

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,
+    }),
+};

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';