src/components/Map/MainMapComponent/ArrowButton.tsx

@@ -3,13 +3,17 @@ import React from 'react'
 import { FontAwesome } from "@expo/vector-icons";
 import { colors} from "../../../utils/GlobalUtils";
 
+// Component that renders each individual arrow button, which allows user to go to different floors incrementally (either +1 or -1)
+// 3 props that are used:   
+// 1. propEvent (handles the logic behind either adding 1 or subtracting 1 to change floors ) 
+// 2. num (has a value of either +1 or -1, used here to enforce consistent symmetry for styling the button)
+// 3. fontAweIcon (name of font awesome icon that's used)
 
 function ArrowButton(props) {
     if (props.num != 0) {
         return (
             <TouchableOpacity style={styles.arrowButton} onPress={props.propEvent} >
               <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-                {/* <FontAwesomeIcon icon="fa-solid fa-left" /> */}
                 <FontAwesome style={{ marginLeft: (props.num == 1 ? 5 : -5) }} color={"white"} size={20} name={props.fontAweIcon} />
               </View>
             </TouchableOpacity>
@@ -28,7 +32,6 @@ const styles = StyleSheet.create({
     arrowButton: {
         flex: 1,
         backgroundColor: colors.red,
-        // backgroundColor: "blue",
         height: 53.5,
         borderRadius: 8,
       },

src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -15,7 +15,6 @@ import IndoorFloor from '../IndoorFloor'
 // import Toast from 'react-native-toast-message';
 import Toast from 'react-native-root-toast';
 import ArrowButton from './ArrowButton'
-import BottomButtons from './BottomButtons'
 import Picker from 'react-native-picker-select';
 import { Landmark } from '../../../data/landmarks';
 
@@ -43,6 +42,9 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
   const imageDim = 0.05 * Dimensions.get("window").width;
 
+
+  // Goes through every landmark found in the landmarks array and if corresponding landmark_type exists, return the landmark in the form of an SVG Image, with set width and height properties.
+  // Coordinates (x and y) of said landmark are percentages/proportions of screen dimensions, which can only be kept consistent if a fixed aspect ratio is set.  
   const loadLandmarks = applyFilter(landmarks)?.map((item) => {
     if (!lmTypesIndoor[item.landmark_type]) {
       return null
@@ -62,7 +64,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
   }
   )
 
-
+// Called once a user longPresses on an indoor map, calls the promptAddLandmark method if successful.
   function addLandmark(evt: GestureResponderEvent) {
     if (evt != null) {
       Alert.alert("Are you sure you want to add a landmark here?", undefined,
@@ -76,8 +78,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
             catch (err) {
               Toast.show("Please ensure finger is not moving when holding down on screen.", { duration: Toast.durations.LONG, })
 
-              // Alert.alert("An error has occured." , "Please ensure thumb is not moving when holding down on screen.")
-              // consider toast
             }
           }
         }]
@@ -86,49 +86,20 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
   }
 
   useEffect(() => {
-    // Alert.alert("useEffect has been triggered")
     setShowAddedDot(false)
     setShowDots(false)
     setTimeout(() => setShowME(true), 100);
   })
 
-  const childToWeb = (child: any) => {
-    const { type, props } = child;
-    const name = type && type.displayName;
-    const webName = name && name[0].toLowerCase() + name.slice(1);
-    const Tag = webName ? webName : type;
-    return <Tag {...props}>{toWeb(props.children)}</Tag>;
-  };
-
-  const toWeb = (children: any) => React.Children.map(children, childToWeb);
-
-  function renderSvg() {
-    return (
-      <Svg height="100%" width="100%" style={{ backgroundColor: '#33AAFF' }}>
-        <Rect
-          x="50"
-          y="50"
-          width="50"
-          height="50"
-          fill="#3399ff"
-          strokeWidth="3"
-          stroke="rgb(0,0,0)"
-        />
-      </Svg>
-    )
-  }
-
   function changer(num) {
     setFloor(prevState => prevState + num)
   }
 
-  // TODO: wire up promptaddlandmark, applyfilters, and focuslandmark methods passed from MapNavigator
   return (
     <View style={{ height: '100%', width: Dimensions.get("screen").width, backgroundColor:colors.red }}>
 
       <StatusBar backgroundColor={colors.red} />
       <CustomModal />
-      {/* <Text style={{ fontSize: 16, marginBottom: 5 }}>Please select a floor you would like to go to.</Text> */}
 
       <View style={{ borderColor: "blue", borderWidth: 0, maxHeight: 50, flex: 1, flexDirection: "row", justifyContent: "center", }}>
 
@@ -161,25 +132,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
           />
         </View>
 
-
-        {/* <EricPicker
-          style={{ backgroundColor: colors.red, width: 200, height: 50, flex: 5, color: 'white' }}
-          selectedValue={floor} // the text of what gets displayed on the dropdown header
-          onValueChange={(itemValue, itemIndex: number) => {
-            setFloor(itemIndex)
-            setShowME(false)
-          }}>
-          The value in EricPicker.Item refers to selectedValue in EricPicker, which refers to the state "floor"
-          <EricPicker.Item label="Basement" value={0} />
-          <EricPicker.Item label="First Floor" value={1} />
-          <EricPicker.Item label="Second Floor" value={2} />
-          <EricPicker.Item label="Third Floor" value={3} />
-          <EricPicker.Item label="Fourth Floor" value={4} />
-          <EricPicker.Item label="Fifth Floor" value={5} />
-        </EricPicker> */}
-
-
-        {/* {floor == 5 ? arrowBut(0, "") : arrowBut(1, "chevron-right")} */}
         {floor == 5 ? <ArrowButton num={0} fontAweIcon={""} /> : <ArrowButton num={1} fontAweIcon={"chevron-right"} propEvent={() => changer(1)} />}
 
 
@@ -194,15 +146,12 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
             <ReactNativeZoomableView
               panBoundaryPadding={100}
-              // bindToBorders={false}
               bindToBorders={true}
               zoomStep={2.8}
-              // initialZoom={2.2}
               maxZoom={2.8}
               minZoom={1}
               initialOffsetY={5}
               onLongPress={(event) => {
-                // serialize()
                 addLandmark(event)
               }}
               movementSensibility={3}
@@ -215,11 +164,9 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
                 const transformedLandmarks = localLandmarks.map(item => {
                   return { ...item, coordx: item.longitude * event.nativeEvent.layout.width, coordy: item.latitude * event.nativeEvent.layout.height }
                 })
-                //console.log("*this is within onLayout* SVGdim values are " + SVGdim[0] + " AND " + SVGdim[1])
                 setLocalLandmarks(transformedLandmarks)
               }}
               >
-                {/* {firstTime == true ? undefined : loadCircles} */}
                 <IndoorFloor floorNum={floor} />
                 {loadLandmarks}
               </Svg>
@@ -228,21 +175,6 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
         </View>
       </View>
-      {/* <Button title="load coordinates" onPress={() => {
-        setfirstTime(false)
-        setLocalLandmarks(landmarks)
-      }} /> */}
-
-      {/* <Button title='Press me to svgString' color={colors.red} onPress={serialize}></Button> */}
-      {/* <View style={{ flex: 0.1, flexDirection: 'row', alignItems:'flex-end', justifyContent: 'space-around' , borderColor:'green' , borderWidth:0 ,}}>
-      <Button title="Go back to map" color={colors.red} onPress={() => navigation.goBack()} />
-      <Button title="Resources" color={colors.red} onPress={() => Linking.openURL('https://www.library.ualberta.ca/')} />
-      </View> */}
-      {/* <TouchableOpacity style={styles.arrowButton} onPress={() => setFloor(prevState => prevState+1)} ><Text>Increase floor by 1</Text></TouchableOpacity> */}
-
-
-      {/* <BottomButtons navigation={navigation}/> */}
-      {/* <Text>{floor}</Text> */}
 
     </View >
   );
@@ -251,18 +183,11 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    // backgroundColor: "#fff",
     justifyContent: "center",
     borderColor: "black",
     borderWidth: 0,
     marginVertical: 0,
     aspectRatio: 8 / 10,  // (caters to portrait mode) (width is 80% the value of height dimension)
-    // flex: 1,
-    // // backgroundColor: "#fff",
-    // justifyContent: "center",
-    // borderColor: "black",
-    // borderWidth: 2,
-    // marginVertical: 15,
     width: '100%',
     height: '100%',
     maxWidth: "100%",
@@ -281,9 +206,7 @@ const styles = StyleSheet.create({
   arrowButton: {
     flex: 1,
     backgroundColor: colors.red,
-    // backgroundColor: "blue",
     height: 53.5,
-    // borderRadius: 10,
   },
 });
 

src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -314,7 +314,8 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                         setSize(Region.latitudeDelta) 
                       }}
                     >
-                    <Polygon // polygon for cameron library
+                    
+                    <Polygon // polygon overlaid across Cameron library
                         coordinates={[
                             { latitude: 53.527190, longitude: -113.524205 },
                             { latitude: 53.526510, longitude: -113.524205 },
@@ -345,7 +346,8 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     }
                     )}
 
-                    <Polyline
+
+                    <Polyline // displays the route going from University Station to Cameron library
                         coordinates={[
                             {
                                 latitude: 53.527192,
@@ -398,25 +400,17 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                         tappable={true}
                     >
                     </Polyline>
-                    {/* <MapViewDirections
-                        origin={coordinates[0]}
-                        destination={coordinates[1]}
-                        apikey={"xxxxxxxxxxxxxxx"} // insert your API Key here
-                        strokeWidth={4}
-                        strokeColor="#111111"
-                        mode="WALKING"
-                    /> */}
-                    <Marker coordinate={coordinates[1]} pinColor={colors.red}/>
 
+                    {/* Marker at university station */}
+                    <Marker coordinate={coordinates[1]} pinColor={colors.red}/> 
+
+                    {/* Scalable text that enlarges/shrinks dynamically with the zoom level of the outdoor map */}
                     <Marker coordinate={{  latitude: 53.527189,longitude: -113.5233285, }} pinColor={colors.red}>
-                        {/* <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/modal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StatusBar, StyleSheet, Dimensions, Button, ActivityIndicator, Alert, Modal } from 'react-native';
 
+// A modal with basic messages, lets the user know how to use basic functions. 
 function CustomModal() {
 
     const [showModal, setShowModal] = useState(true)

src/components/Map/Panels/AddLandmarkPanel.tsx

@@ -162,16 +162,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
             await addLandmarkMutation.mutateAsync({ landmarkValue: newLandmark, photos: photos })
         }
 
-
-        // create svg content here, then pass it to addLandmarkAsync as the value of indoorLmLocImg
-        // if (typeof newLandmark.floor === 'number') {
-        //     let rectangle = serialize()
-        //     await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos, indoorLmLocImg: rectangle }); // pass it in here
-        // }
-        // else {
-        //     await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos });
-        // }
-
         close()
     }
 
@@ -210,8 +200,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
                 enabled={photos?.length > 0}
             >
                 {console.log("state of keyboard is " + keyboardOpened)}
-                {/* {console.log("*THIS IS IN PANEL* navigationState is " + navigationState.index)}
-                {console.log("*THIS IS IN PANEL* currentRoute is " + currentRoute)} */}
 
                 <SafeAreaView style={{ backgroundColor: colors.red, height: determineModalHeight(), }}>
                     {addLandmarkMutation.isIdle ?
@@ -310,7 +298,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
 
 
                 <ViewShot style={{ width: imgWidth + 20, height: imgHeight + 20, position: 'absolute', right: -2000 }} ref={capture} >
-                    {/* {console.log("newLandmark is " + newLandmark)} */}
                     {newLandmark == null || newLandmark.floor == null || newLandmark.landmark_type == null ? <></> :
                         <View style={styles.container}>
                             <Svg>

src/components/Map/Panels/FilterPanel/FilterLmTypes.tsx

@@ -44,7 +44,6 @@ export const FilterLmTypes: React.FC<FilterLmTypesProps> = ({ setLocalFilterType
             <Text style={{ marginRight: 10, marginBottom: 5 }}>Landmark type:</Text>
             <View style={{ borderColor: "blue", borderWidth: 0, width: '100%', justifyContent: 'center' }}>
 
-                {/* <ScrollView style={{height:"60%"}}> */}
                     <Select
                         styleRowList={{ borderColor: "red", borderWidth: 0 }}
                         textColor='black'
@@ -64,9 +63,6 @@ export const FilterLmTypes: React.FC<FilterLmTypesProps> = ({ setLocalFilterType
                             )
                         })}>
                     </Select>
-                {/* </ScrollView> */}
-
-                {/* {console.log("*FILTER PANEL* currentRoute is " + currentRoute)} */}
             </View>
         </View>
     )

src/navigation/MapNavigator.tsx

@@ -237,24 +237,6 @@ const MapNavigator: React.FC = ({ }) => {
                 </View>
             }
 
-
-
-            {/* {!mapState.filterVisible ?
-                <View style={{ top: 10, marginLeft: 40, marginRight: 20, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
-                    <IconButton size={20} color={colors.red} style={[mapStyles.filterButton]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
-                    <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
-                        {mapState.onlyOwned ? <Chip avatar={(<FontAwesome name="user" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginRight: 5, marginLeft: 10 }} onClose={() => mapState.toggleOnlyOwned(false)}>My landmarks</Chip> : null}
-                        {mapState.lmFilteredTypes.map((type, i) => {
-                            return (
-                                <Chip key={i} avatar={(<Image style={{ height: 22, width: 17 }} source={lmTypes[type].image} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginHorizontal: 5, justifyContent: 'center' }} onClose={() => mapState.setLmTypeFilter(mapState.lmFilteredTypes.filter(t => t !== type))}>{lmTypes[type].label}</Chip>
-                            )
-                        })}
-                        {mapState.minLmRating > 0 ? <Chip avatar={(<FontAwesome name="star" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginLeft: 5, marginRight: 10 }} onClose={() => mapState.setMinLmRating(0)}>Minimum rating: {mapState.minLmRating}</Chip> : null}
-                    </ScrollView>
-                </View>
-                 : null}                */}
-
-
             <AddLandmarkPanel
                 setNewLandmark={mapState.setNewLandmark}
                 setVisible={mapState.toggleLmAdd}