Map.js

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
  },
});