|
@@ -11,9 +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, 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 { Button, ActivityIndicator, Alert, Image, ImageBackground, Keyboard, Modal, Text, TouchableOpacity, TouchableWithoutFeedback, View, StyleProp, TextStyle } from "react-native";
|
|
|
+import MapView, { LatLng, MapEvent, Marker, Polygon, Polyline } from "react-native-maps";
|
|
|
import { openSettings } from "react-native-permissions";
|
|
|
import Spokestack, { activate } from 'react-native-spokestack';
|
|
|
import { useAuth } from "../../../data/Auth/AuthContext";
|
|
@@ -55,7 +54,7 @@ interface OutdoorMapProps {
|
|
|
authNavigation: MainTabsNavigationProp,
|
|
|
authNavIndex: number,
|
|
|
route: AuthTabsMapRouteProp,
|
|
|
- focusLandmark: (landmark: Landmark) => void,
|
|
|
+ focusLandmark: (landmark: Landmark, e: MapEvent<{action: "marker-press"; id: string;}>) => void,
|
|
|
setSelectedLandmarkId: (id: string) => void,
|
|
|
selectedLandmarkId: string,
|
|
|
newLandmark: Landmark
|
|
@@ -65,6 +64,7 @@ interface OutdoorMapProps {
|
|
|
landmarks: Landmark[]
|
|
|
applyFilters: (landmarks: Landmark[]) => Landmark[]
|
|
|
promptAddLandmark: (longitude: number, latitude: number) => void
|
|
|
+ setMarkerWindowPosition: (point: {x: number, y: number}) => void
|
|
|
}
|
|
|
|
|
|
const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
|
|
@@ -85,7 +85,6 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
|
|
|
* (See the AuthorizedNavigator page for the useEffect that will trigger this)
|
|
|
*/
|
|
|
useEffect(() => {
|
|
|
- console.log(props.route?.params?.selectedLandmark)
|
|
|
if (props.route?.params?.selectedLandmark) {
|
|
|
props.setSelectedLandmarkId(props.route?.params?.selectedLandmark)
|
|
|
}
|
|
@@ -244,9 +243,12 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
|
|
|
followsUserLocation={mapState.followUser}
|
|
|
showsMyLocationButton={false}
|
|
|
|
|
|
- onRegionChangeComplete={(Region) => {
|
|
|
- console.log("size is " + size)
|
|
|
- console.log(Region.latitudeDelta)
|
|
|
+ onRegionChangeComplete={async (Region) => {
|
|
|
+ if (props.selectedLandmarkId) {
|
|
|
+
|
|
|
+ const {x, y} = await mapState.mapRef.current.pointForCoordinate({latitude: Region.latitude, longitude: Region.longitude})
|
|
|
+ props.setMarkerWindowPosition({x: x, y: y})
|
|
|
+ }
|
|
|
setSize(Region.latitudeDelta)
|
|
|
}}
|
|
|
>
|
|
@@ -272,15 +274,15 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
|
|
|
return (
|
|
|
<Marker
|
|
|
tracksViewChanges={trackChanges}
|
|
|
- onPress={() => props.focusLandmark(landmark)}
|
|
|
+ onPress={e => props.focusLandmark(landmark, e)}
|
|
|
key={landmark.id}
|
|
|
coordinate={{ latitude: landmark.latitude as number, longitude: landmark.longitude as number }} >
|
|
|
- {landmark.landmark_type ? <Image style={{ height: 35, width: 25 }} source={lmTypes[landmark.landmark_type]?.image} /> : null}
|
|
|
+ {landmark.landmark_type ? <Image style={{ height: 35, width: 25, zIndex: 10 }} source={lmTypes[landmark.landmark_type]?.image} /> : null}
|
|
|
</Marker>)
|
|
|
}
|
|
|
}
|
|
|
)}
|
|
|
-
|
|
|
+
|
|
|
<Polyline
|
|
|
coordinates={[
|
|
|
{
|
|
@@ -348,11 +350,6 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
|
|
|
{/* <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 ?
|