39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
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 }}
|
|
>
|
|
<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
|
|
</MapView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
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 }
|
|
});
|