Git Product home page Git Product logo

mherrerabarraza / mapbox-viroreact-point-of-interes Goto Github PK

View Code? Open in Web Editor NEW
20.0 3.0 4.0 74.65 MB

An Mapbox and ViroReact integration to navigate to a POI using Augmented Reality

License: GNU General Public License v3.0

JavaScript 0.95% Java 97.35% GLSL 1.39% Objective-C 0.17% Shell 0.06% Starlark 0.07%
augmented-reality augmented-reality-applications virtual-reality react javascript mapbox mapbox-gl-js viro viro-react viromedia

mapbox-viroreact-point-of-interes's Introduction

mapbox-viroreact-point-of-interest

Points of Interest

This project won't be mantained anymore

Thanks all for the support and to be interested in this project, but I don't have time to keep mantaining it.

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

mapbox-viroreact-point-of-interes's People

Contributors

dependabot[bot] avatar mherrerabarraza avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mapbox-viroreact-point-of-interes's Issues

Black screen for AR view

After cloning POI project and following your guide, I managed to get everything work except I get a black screen AR view. I know it could be an issue of API key but I checked that ViroReact does not need an API key anymore. What could be the issue?

I get the Camera and Location permissions when the app starts, but why would the AR View have a black screen when invoking the AR?

Also, if I need to add your implementation of Mapbox AR to an existing or new RN app, is there a specific set of libraries and settings for it?

Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.