|
|
@@ -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>
|
|
|
+
|
|
|
|
|
|
|
|
|
|
cdmoss
