added labels for route

src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -11,7 +11,7 @@ import { booleanPointInPolygon, circle } from '@turf/turf';
 import * as Notifications from 'expo-notifications';
 import { observer } from "mobx-react";
 import React, { useEffect, useRef, useState } from "react";
-import { AppState, Image, Keyboard, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, Text, View, ActivityIndicator } from "react-native";
+import { AppState, Image, Keyboard, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, Text, View, ActivityIndicator, Alert } from "react-native";
 import MapView, { LatLng, Marker, Polygon, Region, Polyline } from "react-native-maps";
 import { PERMISSIONS } from "react-native-permissions";
 import Spokestack from 'react-native-spokestack';
@@ -73,6 +73,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 
@@ -108,7 +109,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])
 
     /**
@@ -120,6 +120,7 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
         }
     }, [props.newLandmark])
 
+
     /**
      * Gets speech permissions from user, runs every time app is brought to foreground
      */
@@ -305,7 +306,14 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                     showsUserLocation={mapState.locationPermitted}
                     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 },
@@ -387,7 +395,10 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                         ]}
                         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]}
@@ -396,7 +407,13 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
                         strokeColor="#111111"
                         mode="WALKING"
                     /> */}
-                    <Marker coordinate={coordinates[1]} pinColor={colors.red} />
+                    <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/utils/RequestUtils.ts

@@ -25,8 +25,8 @@ import Config from 'react-native-config'
 //export const API_URL = 'http://192.168.3.81:8000'
 // export const API_URL = 'https://staging.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 = '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'
 
 // export const API_URL = Config.API_URL