Implement camera controls and expose MapHandle API in MapView

This commit is contained in:
2026-01-30 23:00:14 +05:30
parent 8710bc7a7f
commit 5b04cc9a58
4 changed files with 113 additions and 6 deletions

View File

@@ -1,11 +1,27 @@
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import React, { useRef } from 'react';
import { SafeAreaView, StyleSheet, Button, View } from 'react-native';
import { MapView, Marker } from '@lynkedup/map-sdk';
import type { MapHandle } from '@lynkedup/map-sdk';
export default function App() {
const mapRef = useRef<MapHandle | null>(null);
return (
<SafeAreaView style={styles.container}>
<View style={styles.controls}>
<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>
<MapView
ref={mapRef}
style={styles.map}
initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
>
@@ -17,5 +33,6 @@ export default function App() {
const styles = StyleSheet.create({
container: { flex: 1 },
controls: { position: 'absolute', top: 40, left: 10, right: 10, zIndex: 1000, flexDirection: 'row', justifyContent: 'space-between' },
map: { flex: 1 }
});