47 lines
1.1 KiB
React
47 lines
1.1 KiB
React
|
import { Platform, StyleSheet } from 'react-native'
|
||
|
|
import { ThemedView } from '@/components/ThemedView'
|
||
|
|
|
||
|
|
export default function MapScreen() {
|
||
|
|
if (Platform.OS === "web") {
|
||
|
|
const maplibre = require('react-map-gl/maplibre')
|
||
|
|
const Map = maplibre.Map
|
||
|
|
return <ThemedView style={styles.page}>
|
||
|
|
<Map
|
||
|
|
initialViewState={{
|
||
|
|
longitude: 0,
|
||
|
|
latitude: 0,
|
||
|
|
zoom: 1
|
||
|
|
}}
|
||
|
|
mapStyle="https://demotiles.maplibre.org/style.json"
|
||
|
|
/>
|
||
|
|
</ThemedView>
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const MapLibreGL = require('@maplibre/maplibre-react-native')
|
||
|
|
MapLibreGL.setAccessToken(null)
|
||
|
|
return (
|
||
|
|
<ThemedView style={styles.page}>
|
||
|
|
<MapLibreGL.MapView
|
||
|
|
style={styles.map}
|
||
|
|
logoEnabled={false}
|
||
|
|
styleURL="https://demotiles.maplibre.org/style.json"
|
||
|
|
children={[]}
|
||
|
|
/>
|
||
|
|
</ThemedView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
page: {
|
||
|
|
flex: 1,
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#F5FCFF',
|
||
|
|
},
|
||
|
|
map: {
|
||
|
|
flex: 1,
|
||
|
|
alignSelf: 'stretch',
|
||
|
|
},
|
||
|
|
});
|