diff --git a/app/component/itinerary/navigator/NaviContainer.js b/app/component/itinerary/navigator/NaviContainer.js index 7df5b07332..aeb09d426e 100644 --- a/app/component/itinerary/navigator/NaviContainer.js +++ b/app/component/itinerary/navigator/NaviContainer.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { useEffect, useState } from 'react'; import polyUtil from 'polyline-encoded'; import { legTime } from '../../../util/legUtils'; +import { checkPositioningPermission } from '../../../action/PositionActions'; import { GeodeticToEcef, GeodeticToEnu } from '../../../util/geo-utils'; import { itineraryShape, relayShape } from '../../../util/shapes'; import NaviBottom from './NaviBottom'; @@ -21,6 +22,7 @@ function NaviContainer( ) { const [planarLegs, setPlanarLegs] = useState([]); const [origin, setOrigin] = useState(); + const [isPositioningAllowed, setPositioningAllowed] = useState(false); const position = getStore('PositionStore').getLocationState(); @@ -38,7 +40,21 @@ function NaviContainer( setOrigin(orig); }, [itinerary]); - const { realTimeLegs, time, isPositioningAllowed } = useRealtimeLegs( + useEffect(() => { + if (position.hasLocation) { + mapRef?.enableMapTracking(); + setPositioningAllowed(true); + } else { + checkPositioningPermission().then(permission => { + if (permission.state === 'granted') { + mapRef?.enableMapTracking(); + setPositioningAllowed(true); + } + }); + } + }, [mapRef]); + + const { realTimeLegs, time } = useRealtimeLegs( planarLegs, mapRef, relayEnvironment, diff --git a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js index 9e023d4690..92efd821ca 100644 --- a/app/component/itinerary/navigator/hooks/useRealtimeLegs.js +++ b/app/component/itinerary/navigator/hooks/useRealtimeLegs.js @@ -1,6 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; import { fetchQuery } from 'react-relay'; -import { checkPositioningPermission } from '../../../../action/PositionActions'; import { legQuery } from '../../queries/LegQuery'; import { legTime } from '../../../../util/legUtils'; import { epochToIso } from '../../../../util/timeUtils'; @@ -87,19 +86,9 @@ function matchLegEnds(legs) { } const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => { - const [isPositioningAllowed, setPositioningAllowed] = useState(false); const [realTimeLegs, setRealTimeLegs] = useState(initialLegs); const [time, setTime] = useState(Date.now()); - const enableMapTracking = useCallback(async () => { - const permission = await checkPositioningPermission(); - const isPermissionGranted = permission.state === 'granted' || true; - if (isPermissionGranted) { - mapRef?.enableMapTracking(); - } - setPositioningAllowed(isPermissionGranted); - }, [mapRef]); - const queryAndMapRealtimeLegs = useCallback( async legs => { if (!legs.length) { @@ -151,7 +140,6 @@ const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => { }, [initialLegs, queryAndMapRealtimeLegs]); useEffect(() => { - enableMapTracking(); fetchAndSetRealtimeLegs(); const interval = setInterval(() => { fetchAndSetRealtimeLegs(); @@ -159,9 +147,9 @@ const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => { }, 10000); return () => clearInterval(interval); - }, [enableMapTracking, fetchAndSetRealtimeLegs]); + }, [fetchAndSetRealtimeLegs]); - return { realTimeLegs, time, isPositioningAllowed }; + return { realTimeLegs, time }; }; export { useRealtimeLegs }; diff --git a/app/component/map/ItineraryPageMap.js b/app/component/map/ItineraryPageMap.js index af77df4404..b17455e2af 100644 --- a/app/component/map/ItineraryPageMap.js +++ b/app/component/map/ItineraryPageMap.js @@ -16,7 +16,7 @@ import LocationMarker from './LocationMarker'; import MapWithTracking from './MapWithTracking'; import VehicleMarkerContainer from './VehicleMarkerContainer'; -const POINT_FOCUS_ZOOM = 16; // default +const POINT_FOCUS_ZOOM = 17; // default function ItineraryPageMap( {