mapbox-viroreact-point-of-interest

Points of Interest

A ReactViro + Mapbox integration for Navigate to one geoposition to another using Augmented Reality

Instalation

1.- Clone the repository :
2.- Install modules : yarn install or mpn install; depending in how you manage your modules
3.- Get a Viro and Mapbox Token: ViroKey and Mapbox
4.- Use your Viro Key and Mapbox Token in App.js where says "USE_YOUR_KEY_HERE"
3.- Feel free to Use and Re-Use this code.

Important folders

api/ -> contais the pois and search method
screens/ -> contains the menu views or "screens" using 'react-navigation'

Important files

App.js -> Main File.
screens/HomeScreen.js -> Main screen contains search POI function
screens/MapScreen.js -> contains a renderable map using Mapbox API. Renders the POI and the current location.
screens/ArScreen.js -> Render the ViroPolyline that handles the AR pathway experience
api/pois.js -> contains the points of interest with latitude and longitude
api/index.js -> contains the method to search points

How it Works?

Using the search function inside 'api/index.js' you can search an specific POI (Point of Interes)
Once the point is located in the searchbar select the point and the app prompt an alert to "show this point in the map", next the point is showed in the map using a pointer. So, there you have two buttons one to back to the searchbar and one to go to AR navigation.
Because im using geoposition the async function to search for the point, this is gone to take a moment to activate the button to go to AR Navigation.

This use the Proj4 module to transform GPS points (latitude,longitude) to Cartesian Points (x,y,z) then use this (x,y,z) point to render the ViroPolyline.

Thanks

Especial Thanks to Isaac Besora