mirror of
https://github.com/mudabbir-ahmad/MAD-Treasure-Hunt.git
synced 2026-10-07 19:00:20 +00:00
bobbert
1e405bb87f
Have FOV config as it's own thing so it's easier to change the size of the FOV triangle without having to change multiple parts of the maths for it. Fov triangle needed because for some reason maps doesn't let us have our own fov ??
53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import MapView, {Circle, Polygon} from 'react-native-maps';
|
|
import {getFovCone} from '../../utils/geoMath';
|
|
|
|
const PlayerMapView = ({ userLocation, visibleCache, heading }) => {
|
|
// Initialisation -------------
|
|
// State ----------------------
|
|
// Handlers -------------------
|
|
// View -----------------------
|
|
|
|
if (!userLocation) return null;
|
|
|
|
const coneCoords = (heading !== null && heading !== undefined)
|
|
? getFovCone(userLocation, heading)
|
|
: null;
|
|
|
|
return (
|
|
<MapView
|
|
style={{flex: 1}}
|
|
region={{
|
|
...userLocation,
|
|
latitudeDelta: 0.01,
|
|
longitudeDelta: 0.01,
|
|
}}
|
|
scrollEnabled={false}
|
|
zoomEnabled={true}
|
|
rotateEnabled={false}
|
|
pitchEnabled={false}
|
|
showsUserLocation
|
|
>
|
|
{visibleCache ? (
|
|
<Circle
|
|
center={visibleCache.coordinates}
|
|
radius={visibleCache.radius}
|
|
fillColor="rgba(250, 204, 21, 0.20)"
|
|
strokeColor="rgba(250, 204, 21, 0.90)"
|
|
/>
|
|
) : null}
|
|
{coneCoords && (
|
|
<Polygon
|
|
coordinates={coneCoords}
|
|
fillColor="rgba(66,133,244,0.28)"
|
|
strokeColor="rgba(66,133,244,0.50)"
|
|
strokeWidth={1}
|
|
/>
|
|
)}
|
|
</MapView>
|
|
);
|
|
};
|
|
|
|
|
|
export default PlayerMapView;
|