src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -11,8 +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, Image, Keyboard, Modal, Text, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
-import MapView, { LatLng, Marker, Polygon } from "react-native-maps";
+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 { openSettings } from "react-native-permissions";
 import Spokestack, { activate } from 'react-native-spokestack';
@@ -78,6 +78,7 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
         { latitude: 53.527086340019856, longitude: -113.52358410971608, }, // Cameron library
         { latitude: 53.52516024715472, longitude: -113.52154139033108, }, // University station
     ]);
+    const [size, setSize] = useState(0.052344);
 
     /**
      * If the ReactNavigation route prop changes, check if it contains incoming selected landmarks, display them if there are. This will be triggered by incoming notifcations 
@@ -114,7 +115,6 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
             mapState.mapRef.current.animateToRegion({ latitude: landmark.latitude, longitude: landmark.longitude, latitudeDelta: 0.01, longitudeDelta: 0.01 })
             props.toggleLmDetails(true)
         }
-
     }, [props.selectedLandmarkId])
 
     /**
@@ -242,14 +242,20 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     showsUserLocation={locationPermissionsGranted}
                     onUserLocationChange={e => updateLocation(e.nativeEvent.coordinate)}
                     followsUserLocation={mapState.followUser}
-                    showsMyLocationButton={false}>
+                    showsMyLocationButton={false}
+                    
+                    onRegionChangeComplete={(Region) => {
+                        console.log("size is " + size)
+                        console.log(Region.latitudeDelta)
+                        setSize(Region.latitudeDelta) 
+                      }}
+                    >
                     <Polygon // polygon for cameron library
                         coordinates={[
                             { latitude: 53.527190, longitude: -113.524205 },
                             { latitude: 53.526510, longitude: -113.524205 },
                             { latitude: 53.526510, longitude: -113.523452 },
                             { latitude: 53.527190, longitude: -113.523452 },
-                            // { name: "5", latitude: 60, longitude: -105 },
                         ]}
                         fillColor={`rgba(100,100,200,0.3)`}
                         strokeWidth={2.5}
@@ -275,15 +281,74 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     }
                     )}
 
-
+                    <Polyline
+                        coordinates={[
+                            {
+                                latitude: 53.527192,
+                                longitude: -113.523583, //Cameron
+                            },
+                            {
+                                latitude: 53.527189,
+                                longitude: -113.5233285,
+                            },
+                            {
+                                latitude: 53.526942,
+                                longitude: -113.523338,
+                            },
+                            {
+                                latitude: 53.526934,
+                                longitude: -113.523263,
+                            },
+                            {
+                                latitude: 53.5264874,
+                                longitude: -113.5232654,
+                            },
+                            {
+                                latitude: 53.526492,
+                                longitude: -113.522827,
+                            },
+                            {
+                                latitude: 53.52620959999999,
+                                longitude: -113.5228282,
+                            },
+                            {
+                                latitude: 53.5259882,
+                                longitude: -113.5222835,
+                            },
+                            {
+                                latitude: 53.5254566,
+                                longitude: -113.5222824,
+                            },
+                            {
+                                latitude: 53.525456,
+                                longitude: -113.522155,
+                            },
+                            {
+                                latitude: 53.5251288,
+                                longitude: -113.5216083, // University station
+                            },
+                        ]}
+                        strokeColor="black"
+                        strokeWidth={3}
+                        onPress={() => Alert.alert("This is a route from University Station to Cameron Library")}
+                        tappable={true}
+                    >
+                    </Polyline>
                     {/* <MapViewDirections
                         origin={coordinates[0]}
                         destination={coordinates[1]}
-                        apikey={"AIzaSyBpckHhiuieLglacinLqewC_HfWkLehwWI"} // insert your API Key here
+                        apikey={"xxxxxxxxxxxxxxx"} // insert your API Key here
                         strokeWidth={4}
                         strokeColor="#111111"
-                    />
-                    <Marker coordinate={coordinates[1]} pinColor={colors.red} /> */}
+                        mode="WALKING"
+                    /> */}
+                    <Marker coordinate={coordinates[1]} pinColor={colors.red}/>
+
+                    <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>
+
 
 
 

src/navigation/MapNavigator.tsx

@@ -215,6 +215,7 @@ const MapNavigator: React.FC = ({ }) => {
                 <View style={{ top: 60, right: 20, position: 'absolute', }}>
                     <Menu
                         visible={visible}
+                                                                                                        // either "bars" or "list"  
                         anchor={<IconButton size={20} color={colors.red} style={[mapStyles.filterButtonOutdoor]} icon="bars" onPress={() => setVisible(true)} />}
                         onRequestClose={() => setVisible(false)}
                     >
@@ -233,7 +234,6 @@ const MapNavigator: React.FC = ({ }) => {
 
                     </Menu>
 
-                    {/* either "bars" or "list"  */}
                 </View>
             }
 

src/utils/RequestUtils.ts

@@ -11,8 +11,14 @@
 //export const API_URL = 'http://192.168.3.81:8000'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
+<<<<<<< HEAD
 //export const API_URL = 'http://192.168.1.68:8000'   // Chase
 //export const API_URL = 'http://192.168.0.22:8000'       // Eric
 export const API_URL = 'https://app.clicknpush.ca'
+=======
+// export const API_URL = 'http://192.168.3.102:8000'   // Chase
+export const API_URL = 'http://192.168.0.22:8000'       // Eric
+//export const API_URL = 'https://app.clicknpush.ca'
+>>>>>>> global-alerts
 
 // export const API_URL = Config.API_URL