Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Longboard_App_Prototype/Map.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
152 lines (142 sloc)
4.84 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react'; | |
import { StyleSheet, View, TouchableOpacity, Image, TextInput, Alert} from 'react-native'; | |
import MapView, { Marker } from 'react-native-maps'; | |
import { FontAwesome } from '@expo/vector-icons'; | |
import { FontAwesome5 } from '@expo/vector-icons'; | |
export default function App() { | |
const [delta, setDelta] = useState({ lngDelta: 0.05, latDelta: 0.05 }); | |
const [mapStandard, setMapStandard] = useState(true); | |
const [marker, setMarker] = useState([]); | |
const [searchQuery, setSearchQuery] = useState(''); | |
// Mock data for demonstration | |
const mockLocations = [ | |
{ id: 1, lng: -74.0060, lat: 40.7128, name: 'New York' }, | |
{ id: 2, lng: -71.0589, lat: 42.360, name: 'Boston' }, | |
{ id: 3, lng: -118.2437, lat: 34.0522, name: 'Los Angeles' }, | |
{ id: 4, lng: -87.6298, lat: 41.8781, name: 'Chicago' }, | |
{ id: 5, lng: -95.3698, lat: 29.7604, name: 'Houston' }, | |
{ id: 6, lng: -80.1918, lat: 25.7617, name: 'Miami' }, | |
{ id: 7, lng: -72.2495, lat: 41.8084, name: 'Storrs' }, | |
]; | |
const handleSearch = () => { | |
// If searchQuery is empty, display an alert | |
if (!searchQuery.trim()) { | |
Alert.alert('Error', 'Please enter a search query'); | |
return; | |
} | |
// Filter mockLocations based on searchQuery | |
const filteredLocations = mockLocations.filter(location => location.name.toLowerCase().includes(searchQuery.toLowerCase())); | |
// If there are filtered locations, set the map region to the first one | |
if (filteredLocations.length > 0) { | |
const firstLocation = filteredLocations[0]; | |
setDelta({ | |
longitude: firstLocation.lng, | |
latitude: firstLocation.lat, | |
longitudeDelta: 0.05, // Adjust as needed | |
latitudeDelta: 0.05, // Adjust as needed | |
}); | |
setMarker([]); // Clear markers | |
} else { | |
// If no matching locations found, reset the map region to default | |
setDelta({ | |
longitude: -74.0060, | |
latitude: 40.7128, | |
longitudeDelta: 0.05, | |
latitudeDelta: 0.05, | |
}); | |
setMarker([]); // Clear markers | |
} | |
}; | |
const mapClick = (where) => { | |
setMarker([...marker, { id: Date.now(), lng: where.nativeEvent.coordinate.longitude, lat: where.nativeEvent.coordinate.latitude }]); | |
} | |
const deleteMarker = (id) => { | |
setMarker(marker.filter(item => item.id !== id)); | |
}; | |
return ( | |
<View style={styles.container}> | |
<MapView region={delta} style={{ flex: 1 }} mapType={mapStandard ? 'standard' : 'satellite'} onPress={mapClick}> | |
{marker.map((item) => ( | |
<TouchableOpacity onPress={() => deleteMarker(item.id)}> | |
<Marker key={item.id} coordinate={{ longitude: item.lng, latitude: item.lat }} pinColor='yellow'> | |
<FontAwesome5 name="map-marker-alt" size={24} color="red" /> | |
</Marker> | |
</TouchableOpacity> | |
))} | |
</MapView> | |
<TextInput | |
style={styles.searchBar} | |
placeholder="Search for attractions...(Mock data in code)" | |
value={searchQuery} | |
onChangeText={setSearchQuery} | |
onSubmitEditing={handleSearch} | |
/> | |
<TouchableOpacity | |
style={styles.plus} | |
onPress={() => { | |
const newLongitudeDelta = delta.longitudeDelta * 0.5; | |
const newLatitudeDelta = delta.latitudeDelta * 0.5; | |
setDelta({ | |
...delta, | |
longitudeDelta: newLongitudeDelta, | |
latitudeDelta: newLatitudeDelta, | |
}); | |
}}> | |
<FontAwesome name="plus-square" size={50} color="gray" /> | |
</TouchableOpacity> | |
<TouchableOpacity | |
style={styles.minus} | |
onPress={() => { | |
const newLongitudeDelta = delta.longitudeDelta * 2; | |
const newLatitudeDelta = delta.latitudeDelta * 2; | |
setDelta({ | |
...delta, | |
longitudeDelta: newLongitudeDelta, | |
latitudeDelta: newLatitudeDelta, | |
}); | |
}}> | |
<FontAwesome name="minus-square" size={50} color="gray" /> | |
</TouchableOpacity> | |
<TouchableOpacity style={styles.mapimage} onPress={() => setMapStandard(!mapStandard)}> | |
<Image source={mapStandard ? { uri: 'https://t3.ftcdn.net/jpg/03/61/09/50/360_F_361095053_T8cGCfUxvR0LqVDGnnqOKWfi7fNowaZG.jpg' } : { uri: 'https://newsroom.haas.berkeley.edu/wp-content/uploads/2023/08/Road_To_Success_Aug23_2000x1182_v4.jpg' }} style={styles.image} /> | |
</TouchableOpacity> | |
</View> | |
); | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
}, | |
searchBar: { | |
position: 'absolute', | |
top: 20, | |
left: 20, | |
right: 20, | |
paddingHorizontal: 20, | |
height: 40, | |
backgroundColor: 'grey', | |
borderRadius: 20, | |
zIndex: 1, | |
elevation: 2, | |
}, | |
plus: { | |
position: 'absolute', | |
right: 30, | |
bottom: 80, | |
}, | |
minus: { | |
position: 'absolute', | |
right: 30, | |
bottom: 30, | |
}, | |
mapimage: { | |
position: 'absolute', | |
left: 30, | |
bottom: 40, | |
opacity: 0.5 | |
}, | |
image: { | |
width: 100, | |
height: 100 | |
}, | |
}); |