added new icons, added hamburger menu to IndoorMap, removed bottom text buttons, resized the borderless zoomable view

src/components/Map/MainMapComponent/BottomButtons.tsx

@@ -1,17 +1,18 @@
-import { View, Text, TouchableOpacity, StyleSheet, Linking} from 'react-native'
+import { View, Text, TouchableOpacity, StyleSheet, Linking } from 'react-native'
 import React from 'react'
 import { colors, lmTypes } from "../../../utils/GlobalUtils";
 
 function BottomButtons(props) {
   return (
-<View style={{ flexDirection: "row", justifyContent: "space-around", alignItems: "flex-end", borderColor: "green", borderWidth: 0 }}>
-        <TouchableOpacity style={{ backgroundColor: colors.red, height: 30, paddingHorizontal: 7, paddingTop: 3, borderRadius: 5 }} onPress={() => props.navigation.goBack()}>
-          <Text style={{ fontSize: 16, color: "white", textAlign: "right", textAlignVertical: "bottom" }}>{"Go back to map"}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={{ backgroundColor: colors.red, height: 30, paddingHorizontal: 7, paddingTop: 3, borderRadius: 5 }} onPress={() => Linking.openURL('https://www.library.ualberta.ca/')}>
-          <Text style={{ fontSize: 16, color: "white", textAlign: "center", }}>{"Resources"}</Text>
-        </TouchableOpacity>
-      </View>  )
+    <View style={{ flexDirection: "row", justifyContent: "space-around", alignItems: "flex-end", borderColor: "green", borderWidth: 0 }}>
+      <TouchableOpacity style={{ backgroundColor: colors.red, height: 30, paddingHorizontal: 7, paddingTop: 3, borderRadius: 5 }} onPress={() => props.navigation.goBack()}>
+        <Text style={{ fontSize: 16, color: "white", textAlign: "right", textAlignVertical: "bottom" }}>{"Go back outdoors"}</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={{ backgroundColor: colors.red, height: 30, paddingHorizontal: 7, paddingTop: 3, borderRadius: 5 }} onPress={() => Linking.openURL('https://www.ualberta.ca/facilities-operations/portfolio/emergency-management-office/emergency-procedures/alarms-evacuation.html')}>
+        <Text style={{ fontSize: 16, color: "white", textAlign: "center", }}>{"Resources"}</Text>
+      </TouchableOpacity>
+    </View>
+  )
 }
 
 

src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -132,7 +132,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
   // TODO: wire up promptaddlandmark, applyfilters, and focuslandmark methods passed from MapNavigator
   return (
-    <View style={{ height: '100%', width: '100%', padding: 5, backgroundColor:colors.red }}>
+    <View style={{ height: '100%', width: Dimensions.get("screen").width, backgroundColor:colors.red }}>
       {/* {console.log("THE STATE IS NOW " + floor)} */}
 
       <StatusBar backgroundColor={colors.red} />
@@ -243,7 +243,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
       {/* <TouchableOpacity style={styles.arrowButton} onPress={() => setFloor(prevState => prevState+1)} ><Text>Increase floor by 1</Text></TouchableOpacity> */}
 
 
-      <BottomButtons navigation={navigation}/>
+      {/* <BottomButtons navigation={navigation}/> */}
       {/* <Text>{floor}</Text> */}
 
     </View >
@@ -256,8 +256,8 @@ const styles = StyleSheet.create({
     // backgroundColor: "#fff",
     justifyContent: "center",
     borderColor: "black",
-    borderWidth: 2,
-    marginVertical: 7,
+    borderWidth: 0,
+    marginVertical: 0,
     aspectRatio: 8 / 10,  // (caters to portrait mode) (width is 80% the value of height dimension)
     // flex: 1,
     // // backgroundColor: "#fff",
@@ -269,7 +269,8 @@ const styles = StyleSheet.create({
     height: '100%',
     maxWidth: "100%",
     maxHeight: "100%",
-    backgroundColor:"white"
+    backgroundColor:"white",
+    
   },
   image: {
     alignItems: 'center',

src/navigation/MapNavigator.tsx

@@ -4,7 +4,7 @@ import { createStackNavigator, StackNavigationProp } from "@react-navigation/sta
 import { createNativeStackNavigator } from "@react-navigation/native-stack"
 import { observer } from "mobx-react"
 import React, { useEffect, useState } from "react"
-import { Alert, Dimensions, Image, ScrollView, View } from "react-native"
+import { Alert, Dimensions, Image, ScrollView, View, Linking } from "react-native"
 import { Chip } from "react-native-paper"
 import { IconButton } from "../components/Buttons"
 import IndoorMap from "../components/Map/MainMapComponent/IndoorMap"
@@ -161,7 +161,7 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
 
             {/* Filter chips and button*/}
             {!mapState.filterVisible && currentRoute == 'Indoor' ?
-                <View style={{ width: Dimensions.get("window").width * 0.8, marginLeft: Dimensions.get("window").width * 0.12, borderColor: "red", borderWidth: 0, top: 75, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
+                <View style={{ top: 60, right: 7.5 , position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
                     <IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} 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}
@@ -189,7 +189,29 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
             }
 
             {/* Create Hamburger icon */}
-            {currentRoute == 'Indoor' ? <></> :
+            {currentRoute == 'Indoor' ?
+                <View style={{ top: 100, right: 7.5 , position: 'absolute', }}>
+                    <Menu
+                        visible={visible}
+                        anchor={<IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} icon="bars" onPress={() => setVisible(true)} />}
+                        onRequestClose={() => setVisible(false)}
+                    >
+
+                        <MenuItem onPress={() => {
+                            setVisible(false)
+                            navigate("Outdoor")
+                            // Alert.alert("Cameron Library")
+                        }}>Go back outdoors</MenuItem>
+
+                        <MenuItem onPress={() => {
+                            setVisible(false)
+                            Linking.openURL('https://www.ualberta.ca/facilities-operations/portfolio/emergency-management-office/emergency-procedures/alarms-evacuation.html')
+                            // Alert.alert("Cameron Library")
+                        }}>Resources</MenuItem>
+
+                    </Menu>
+                </View>
+                :
                 <View style={{ top: 60, right: 20, position: 'absolute', }}>
                     <Menu
                         visible={visible}
@@ -209,7 +231,6 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
                     </Menu>
 
                     {/* either "bars" or "list"  */}
-                    <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}></ScrollView>
                 </View>
             }
 

src/utils/GlobalUtils.ts

@@ -28,7 +28,12 @@ export const lmTypes: {[key: number]: {image: ImageURISource, label: string}} =
     7: {image: require('../../assets/power.png'), label: "power issue"},
     8: {image: require('../../assets/crosswalk.png'), label: "crosswalk issue"},
     9: {image: require('../../assets/ice.png'), label: "ice"},
-    
+    10: {image: require('../../assets/desk.png'), label: "desk"},
+    11: {image: require('../../assets/elevator.png'), label: "elevator"},
+    12: {image: require('../../assets/kiosk.png'), label: "kiosk"},
+    13: {image: require('../../assets/monitor.png'), label: "monitor"},
+    14: {image: require('../../assets/ramp.png'), label: "ramp"},
+    15: {image: require('../../assets/water.png'), label: "water"},
 } 
 
 export const GlobalStyles = StyleSheet.create({