Mansi/Mapsdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add camera presets and enhance App component with camera controls

Browse Source
This commit is contained in:
mansi-dev
2026-02-02 23:46:52 +05:30
parent b9cae949d4
commit fb56521d84
4 changed files with 119 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
example/App.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, Button, View } from 'react-native'; 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'; import type { MapHandle } from '@lynkedup/map-sdk';
export default function App() { export default function App() {
@@ -12,18 +12,80 @@ export default function App() {
<View style={styles.controls}> <View style={styles.controls}>
<Button title="Toggle SDK Example" onPress={() => setShowPropertyMap((s) => !s)} /> <Button title="Toggle SDK Example" onPress={() => setShowPropertyMap((s) => !s)} />
{!showPropertyMap && ( {!showPropertyMap && (
<View style={{ flexDirection: 'row' }}> <>
<Button <View style={{ flexDirection: 'row' }}>
title="Fly to SF" <Button
onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })} title="Fly to SF"
/> onPress={() => mapRef.current?.flyTo({ latitude: 37.78825, longitude: -122.4324 })}
<Button />
title="Fit Bounds" <Button
onPress={() => title="Fit Bounds"
mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 }) onPress={() =>
} mapRef.current?.fitBounds({ latitude: 37.809, longitude: -122.410 }, { latitude: 37.779, longitude: -122.450 })
/> }
</View> />
</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> </View>

17
packages/map-sdk/README.md
View File

@@ -48,6 +48,23 @@ Available methods:
- `flyTo(coordinate, duration?)` — quick helper that animates to a small region around `coordinate`. - `flyTo(coordinate, duration?)` — quick helper that animates to a small region around `coordinate`.
- `fitBounds(northEast, southWest, options?)` — fit the two coordinates with optional `edgePadding`. - `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) ✅ ## PropertyMap (high-level SDK component) ✅

26
packages/map-sdk/src/cameraPresets.ts Normal file
View File

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

1
packages/map-sdk/src/index.ts
View File

@@ -1,6 +1,7 @@
export { default as MapView } from './MapView'; export { default as MapView } from './MapView';
export type { MapHandle } from './MapView'; export type { MapHandle } from './MapView';
export { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps'; export { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';
export { CameraPresets } from './cameraPresets';
// High-level components // High-level components
export { default as PropertyMap } from './components/PropertyMap'; export { default as PropertyMap } from './components/PropertyMap';