highlight selected landmark

src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -11,9 +11,8 @@ import { booleanPointInPolygon, circle } from '@turf/turf';
 import * as Notifications from 'expo-notifications';
 import { observer } from "mobx-react";
 import React, { useEffect, useState } from "react";
-import { ActivityIndicator, Alert, Image, Keyboard, Modal, Text, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
-import MapView, { LatLng, Marker, Polygon, Polyline } from "react-native-maps";
-import { ToggleButton } from "react-native-paper";
+import { Button, ActivityIndicator, Alert, Image, ImageBackground, Keyboard, Modal, Text, TouchableOpacity, TouchableWithoutFeedback, View, StyleProp, TextStyle } from "react-native";
+import MapView, { LatLng, MapEvent, Marker, Polygon, Polyline } from "react-native-maps";
 import { openSettings } from "react-native-permissions";
 import Spokestack, { activate } from 'react-native-spokestack';
 import { useAuth } from "../../../data/Auth/AuthContext";
@@ -55,7 +54,7 @@ interface OutdoorMapProps {
     authNavigation: MainTabsNavigationProp,
     authNavIndex: number,
     route: AuthTabsMapRouteProp,
-    focusLandmark: (landmark: Landmark) => void,
+    focusLandmark: (landmark: Landmark, e: MapEvent<{action: "marker-press"; id: string;}>) => void,
     setSelectedLandmarkId: (id: string) => void,
     selectedLandmarkId: string,
     newLandmark: Landmark
@@ -65,6 +64,7 @@ interface OutdoorMapProps {
     landmarks: Landmark[]
     applyFilters: (landmarks: Landmark[]) => Landmark[]
     promptAddLandmark: (longitude: number, latitude: number) => void
+    setMarkerWindowPosition: (point: {x: number, y: number}) => void
 }
 
 const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
@@ -85,7 +85,6 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
      * (See the AuthorizedNavigator page for the useEffect that will trigger this)
      */
     useEffect(() => {
-        console.log(props.route?.params?.selectedLandmark)
         if (props.route?.params?.selectedLandmark) {
             props.setSelectedLandmarkId(props.route?.params?.selectedLandmark)
         }
@@ -244,9 +243,12 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     followsUserLocation={mapState.followUser}
                     showsMyLocationButton={false}
                     
-                    onRegionChangeComplete={(Region) => {
-                        console.log("size is " + size)
-                        console.log(Region.latitudeDelta)
+                    onRegionChangeComplete={async (Region) => {
+                        if (props.selectedLandmarkId) {
+
+                            const {x, y} = await mapState.mapRef.current.pointForCoordinate({latitude: Region.latitude, longitude: Region.longitude})
+                            props.setMarkerWindowPosition({x: x, y: y})
+                        }
                         setSize(Region.latitudeDelta) 
                       }}
                     >
@@ -272,15 +274,15 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                             return (
                                 <Marker
                                     tracksViewChanges={trackChanges}
-                                    onPress={() => props.focusLandmark(landmark)}
+                                    onPress={e => props.focusLandmark(landmark, e)}
                                     key={landmark.id}
                                     coordinate={{ latitude: landmark.latitude as number, longitude: landmark.longitude as number }} >
-                                    {landmark.landmark_type ? <Image style={{ height: 35, width: 25 }} source={lmTypes[landmark.landmark_type]?.image} /> : null}
+                                    {landmark.landmark_type ? <Image style={{ height: 35, width: 25, zIndex: 10 }} source={lmTypes[landmark.landmark_type]?.image} /> : null}
                                 </Marker>)
                         }
                     }
                     )}
-
+                    
                     <Polyline
                         coordinates={[
                             {
@@ -348,11 +350,6 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                         {/* <Image source={require('../../../../assets/accessibleEntrance.png')} /> */}
                         <Text style={{ fontSize: size>0.00327 ? 0 : 0.05/size , maxWidth:200, }}>Route from University Station to Cameron Library</Text>
                     </Marker>
-
-
-
-
-
                 </MapView>
                 {/*Map buttons*/}
                 {mapState.landmarksNearUser?.length > 0 ?

src/components/Map/MainMapComponent/useMapState.ts

@@ -53,6 +53,7 @@ export const useMapState = () => {
      * State of landmark "only show owned" filter
      */
     const [onlyOwned, toggleOnlyOwned] = useState<boolean>(false)
+    const [markerWindowPosition, setMarkerWindowPosition] = useState<{ x: number, y: number }>()
 
     return { 
         onlyOwned, toggleOnlyOwned,

src/components/Map/Panels/LandmarkDetailsPanel/LandmarkDetails.tsx

@@ -12,7 +12,7 @@ import Modal from 'react-native-modal';
 import { LMComment, useAddComment, useDeleteComment, useEditComment, useLandmarkComments } from "../../../../data/comments";
 import { Landmark, useAddLandmarkPhoto, useDeleteLandmark, useDeleteLandmarkPhoto, useEditLandmark, useLandmark, useRateLandmark } from "../../../../data/landmarks";
 import { useAuth } from "../../../../data/Auth/AuthContext";
-import { colors } from "../../../../utils/GlobalUtils";
+import { colors, lmTypes } from "../../../../utils/GlobalUtils";
 import { IconButton, PrimaryButton } from "../../../Buttons";
 import { DetailsBody } from "./DetailsBody";
 import { DetailsHeader } from "./DetailsHeader";
@@ -46,6 +46,7 @@ export interface LandmarkDetailsProps {
     visible: boolean,
     toggleLmDetails: (state: boolean) => void
     authNavigation: MainTabsNavigationProp
+    markerWindowPosition: {x: number, y: number}
 }
 
 /**
@@ -53,7 +54,7 @@ export interface LandmarkDetailsProps {
  * @component
  * @category Map
  */
-const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({authNavigation, landmarkId, setLandmark, toggleDetailsPanel, setEditing, editingEnabled, visible, toggleLmDetails}) => {
+const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({markerWindowPosition, authNavigation, landmarkId, setLandmark, toggleDetailsPanel, setEditing, editingEnabled, visible, toggleLmDetails}) => {
     const {userId, landmarkOwnedByUser} = useAuth()
 
     // /**
@@ -180,8 +181,6 @@ const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({authNavigation, landma
             if (deleteLandmarkMutation.isSuccess) {
                 deleteLandmarkMutation.reset()
             }
-
-            console.log(deleteLandmarkMutation.status)
         }
         resetDeleteLMOnSuccess();
     }, [deleteLandmarkMutation.status]);
@@ -353,9 +352,9 @@ const LandmarkDetails: React.FC<LandmarkDetailsProps> = ({authNavigation, landma
             }}
             style={{justifyContent: "flex-end", height: '100%', margin: 0}}
             isVisible={visible}>
+            {markerWindowPosition && <Image source={lmTypes[landmarkQuery.data?.landmark.landmark_type]?.image} style={{position: 'absolute', top: markerWindowPosition.y - 35, left: markerWindowPosition.x - 12.5, height: 35, width: 25}} />}
             <SafeAreaView 
                 style={[styles.container, {height: determineModalHeight()}]}>
-
                 {selectedImage > -1 ?
                 <View style={{ padding: 14}}>
                     <View style={{justifyContent: 'space-between', flexDirection: 'row'}}>

src/components/Map/Panels/NearbyLandmarksPanel.tsx

@@ -9,6 +9,7 @@ import { FontAwesome } from "@expo/vector-icons";
 import React, { memo, useState } from "react";
 import { Dimensions, Image, SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
 import { ScrollView } from "react-native-gesture-handler";
+import { MapEvent } from "react-native-maps";
 import Modal from 'react-native-modal';
 import { Landmark } from "../../../data/landmarks";
 import { colors, lmTypes } from "../../../utils/GlobalUtils";
@@ -20,7 +21,7 @@ export interface NearbyLandmarksPanelProps {
     toggleAlertedLmPanel: (state: boolean) => void
     nearbyLmPanelVisible: boolean
     nearbyLandmarks?: Landmark[];
-    focusLandmark: (landmark: Landmark) => void
+    focusLandmark: (landmark: Landmark, e?: MapEvent<{action: "marker-press"; id: string;}>) => void
 }
 
 /**

src/components/Map/Panels/VoicePanel.tsx

@@ -61,7 +61,6 @@ export interface VoiceAction {
 
 const activateSpokestack = async (sourceCall: string) => {
     await Spokestack.activate();
-    console.log("Spokestack activated from: " + sourceCall);
 }
 
 export const VoicePanel: React.FC<VoicePanelProps> = ({

src/navigation/MapNavigator.tsx

@@ -22,6 +22,7 @@ import { MainTabsNavigationProp } from "./MainTabsNavigator"
 import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
 import { navigate } from "./RootNavigator"
 import { Separator } from "../components/Separator"
+import { MapEvent } from "react-native-maps"
 
 
 
@@ -39,6 +40,7 @@ const MapNavigator: React.FC = ({ }) => {
     const mapState = useMapState()
     const authNavigation = useNavigation() as MainTabsNavigationProp
     const authRoute = useRoute() as AuthTabsMapRouteProp
+    const [markerWindowPosition, setMarkerWindowPosition] = useState<{ x: number, y: number }>()
 
     // bring in all landmarks from useLandmark hook
     const landmarksQuery = useLandmarks();
@@ -94,7 +96,10 @@ const MapNavigator: React.FC = ({ }) => {
      * Triggered by on a {@link Landmark} displayed on the map. 
      * Sets {@linkcode selectedLandmark} to the pressed {@link Landmark} object's value and toggles the {@link LandmarkDetails} modal.
      */
-    const focusLandmark = (landmark: Landmark) => {
+    const focusLandmark = (landmark: Landmark, e?: MapEvent<{action: "marker-press"; id: string;}>) => {
+        const {x, y} = e?.nativeEvent?.position;
+        setMarkerWindowPosition({x: x, y: y});
+        console.log('x: ' + x + ' y: ' + y)
         if (mapState.selectedLandmarkId == landmark.id) {
             mapState.toggleLmDetails(true)
         }
@@ -136,7 +141,8 @@ const MapNavigator: React.FC = ({ }) => {
                             authNavigation={authNavigation}
                             landmarks={landmarksQuery?.data}
                             selectedLandmarkId={mapState.selectedLandmarkId}
-                            setSelectedLandmarkId={mapState.setSelectedLandmarkId} />}
+                            setSelectedLandmarkId={mapState.setSelectedLandmarkId}
+                            setMarkerWindowPosition={setMarkerWindowPosition} />}
                 </MapStackNavigator.Screen>
 
                 <MapStackNavigator.Screen name="Indoor" >
@@ -261,6 +267,7 @@ const MapNavigator: React.FC = ({ }) => {
                 newLandmark={mapState.newLandmark}
                 visible={mapState.lmAddVisible} />
             <LandmarkDetails
+                markerWindowPosition={markerWindowPosition}
                 authNavigation={authNavigation}
                 visible={mapState.lmDetailsVisible}
                 toggleLmDetails={mapState.toggleLmDetails}