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 { 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>