HOW TO: Use the Navigate control

Simple Navigate by SteveJG

NavigateRose2
This tutorial is an example of one way to use the Navigate tool to build a Simple Navigate app. The instructions are intended for intermediate or advanced users of App Inventor 2. There are no detailed instructions. Provide similar code in your app. The Blocks are the documentation.

Navigate Control

The Navigate control provides ‘turn by turn’ directions used to get between two locations. The routing output is similar to directions provided by the Google Maps Directions api. The on line Navigate service is provided by OpenRouteService.

The Navigate tool requires an api key not provided by App Inventor 2. Obtain your own,
free OpenRouteService api key to access the service. . OpenRouteService is an open source on-line service that provides a generous amount of free usage. Is this all free? No. Up to 2,000 requests per day are free.

OpenRouteService is maintained by collaborative volunteered data collection efforts. The quality of the displayed data and the routing results are not guaranteed.

Terms of service require developers to provide the following attributions some where on their app:

Tools

The Navigate Blocks

The Documentation Navigation

==================================================================

Simple Navigate

The Simple Navigate app provides route turn-by-turn directions between an origin and destination location.


The app plots a route on an OpenStreetMap tiles based on Driving, Walking, Cycling and Wheelchair. The following route shows the path and directions from Disneyland to Universal Studios for driving.

Navigate5

The ActivityStarter is used to send an eMail containing the Directions.

The app can either use your present location as the origin or a typed in address. Simple Navigate takes an origin location and a destination location (a street address and/or city or place) and plots a route between the two points using OpenRouteService and OpenStreetMap. Simple Navigate was tested on an Android 4.2.2 tablet, an 8.1 tablet and an 4.2.2 cell phone. The app must be tested on an actual device to test all the features. You need a connection to the Internet using WIFI or network to access the ORS directions and OSM maps.

The default origin/destination locations used plots a driving route between Disneyland and Universal Studios, Hollywood in California and generates driving directions. The example locations are the same locations Google uses to demonstrate the use of the Google Directions API. The output of the Google example is a json script.

To work with the device’s GPS receiver, make sure Location is enabled in the device Settings. The app does not check and the setting must be made manually if not set. Obtain an api key for OSR and place the token they provide either in the Navigate Properties

Navigate4 or use a set Navigation1.ApiKey to Block with a Text box . The control (and the app) will not provide directions unless you provide your own key. A red Marker displays the Destination; a green Marker displays the Origin. If you use the GPS capabilities of the app, an icon will post on the map showing the user’s current location.

The Find Route Button requests the route between Disneyland and Universal Studios (or any other locations you type) or you can check the use current Location box and the app will use your GPS determination instead of the Origin Address. If your GPS hasn’t obtained a satellite fix prior to your request for directions, a list of directions will not generate; wait a few seconds and try again.

The app uses two virtual screens using the
vertArrangements Blocks. It switches ‘screens’ by setting the Visible property to either false or true.

Pressing Find Route takes you to the map and directions ‘screen’. To return to the start screen and select a different set of directions; Select new Destination . To send the directions in an email; type the eMail address in the red TextBox and press EMail .

This is the Designer screen:

These are the Blocks:

Useful to Know when adapting this app

The distance determined from the origin to destination path in the GotDirections Block units are meters. 1 kilometer = 1000 m. Convert total meters to miles 1 Meter = 0.00062137119 Miles.

The duration reported in the GotDirections Block has seconds units. 60 sec. = 1 minute. 3600 seconds = 1 hour.
Both duration and distance are printed as the final item of the generated directions.

Other credits:

Screen background image: Wikipedia: A plat of all the world - Norman B. Leventhal Map Center at the BPL (public domain)

Simple Navigate is an app similar to the small example app provided by MIT for testing prior to release of the component. Try the aia to see a slightly diffferent way of building a directions app.

Other Navigate Solutions

App Inventor 2 developers can provide something similar using the Map component but without the directions display or can use OpenStreetMap without the Map Component.

Another alternative to providing turn by turn map direction advice is the Google Directions api. Use it with a Google Map API key .

Project Requirements

The Navigate tool, the Map, LineString and Marker components, the LocationSensor. and a real device to test all the features of the app.

Yes, there is an aia file attached:

SimpleNavigateDirections.aia (250.0 KB)

Best regards,
Steve

7 Likes

Thank you for this useful tutorial, but unfortunately the navigation component documentation is not public

Annex: Hard refreshing the page didn't help, but I can see it now.

No problems seeing it, even in incognito window

http://ai2.appinventor.mit.edu/reference/components/maps.html#Navigation

Hi All!

I made the navigation map using navigation and other supporting components using https://openrouteservice.org/. All is fine but the directions are coming in one shot.
How to get directions as suitable places or location on the path instead of getting all the directions in one shot?
The directions need to be mapped to the location and the direction in which we are moving.
Can anybody help or give a cue?

Welcome back Someshvar.

Sorry, I do not understand. OSR provides the directions from one location to another (and all the directions in between required to get from the first to the final location). Treat each intermediate location as a final location and query the OSR multiple times to show the directions to the 1st suitable place and then the next suitable place might work for you.

Alternatively, query the Navigate ResponseContent The raw response from the server. This data dump can awkwardly be used to access more details beyond what the GotDirections event provides. You get a json like summary of all the information ORS provides.

A third way, if you are experienced with JSON and willing to get a Google Map API, use the Google Directions API

OSR in my opinion is not very accurate in many instances and the ways to extract detailed information from OSR's raw data are awkward . The Google Directions api, returns coordinates of the start of each 'direction' whereas with OSR, the developer has to derive them and sort through the clutter of extraneous direction posts. :cry:

For a professional app, use the more useful and reliable directions provided by Google instead of OSR. If you are experienced with JSON and willing to get a Google Map API, use the Google Directions API .

Choose OSR or the Google Directions API depending on what your app is for. OSR is free (and you get what you pay for). The Google API provides a certain amount of 'free' usage.

Vertical arrangment 2 içerisine ne eklediniz ?

1 Like

Hallo,
trying to do something like this. I downloaded and uploaded the aia and tested it. But I get an error.
Error 4003: Routing service failed with status 400 Bad Request.
What does it mean? I got API key from https://openrouteservice.org/ . I entered it in Navigation1 , ApiKey

The aia works fine for me. Did you modify the aia other than add the ApiKey?

Are you using the latest Companion 2.66?

You might get Error 4003: Routing service failed with status 400 Bad Request if you don't live in North America and select "use current Location" and click Find Route. I expect ORS possibly cannot provide a route to Hollywood because there is an intervening ocean and no roads :cry: . Change the Destination Address from Universal Studios Hollywood to something else.

Hallo,

thank you very much. I changed the destination and it worked. Good. It means the API key works.
Bad. It means there is a mistake in my code. I got a csv. It needs to read the file, show destinations from the file, the user selects a destination from the file and it shows the way. I will have another look at Read file based on location maybe it helps.
Sorry, another question. I noted in your aias you have Android 5+, Anroid 3..., iOS... How do you get it? If I get iOS can an iPhone connect to the AI Companion or Emulator? Sorry 2 questions.

what is in vertical arrangement 2?

Welcome @Tristan_Holifield

What? The Map component was placed within the VA and all this stuff (look at the aia) . Actually, these components can be placed anywhere you want in your app.

Is that what you wanted to know?

me parece que algo esta mal en este bloque por que no me ubica el lugar de partida aplicandole el check con el GPS por mas que este activado

image

o es necesario obtener mi propio API

por lo demás todo esta bien el único problema es el gps

saludos

yes, the api key is free (see the tutorial).

You must fill in TextBox1 with destination you want using the app.

If the default destination is not on the same continent as your device you will notice error messages.

The Blocks image you posted is blurry. Sorry I can not read it so I do not understand what you are talking about.

What is the problem with the gps? I don't understand your problem. Could you explain in more detail? The gps takes up to a minute to determine where your device is located; it must get a satellite fix.

The actual use of Navigate is easy, the tutorial shows several options that make it appear complicated. :slight_smile:

puse check use currente Location
en el TextBox1 Universal Studios Hollywood

WhatsApp Video 2023-03-15 at 7.11.07 PM

espere el minuto y no salió nada

cambie la dirección de llegada en un lugar mas cercano y sale lo mismo por cierto estoy en el mismo continente

The error message indicates ORS cannot generate a route between your GPS location and the other location. Why I cannot tell; it is possibly because your GPS is not getting a location fix. What

[quote="SteveJG, post:10, topic:5900, full:true"]

The aia works fine for me.

Are you using the latest Companion 2.66?

You say you are in North America. Check the
doitNavigate
value of the StartMarker and the EndMarker using DoIt debugger. What are they?

si estoy utilizando la última Companion 2.66

no modifique nada estoy trabajando con este .aia que enviaste
DirectricesNavegaciónSimple.aia (250.0 KB)

estoy en américa del sur Perú

@elmachi130 The app works as intended without error messages.

You get Error 4003: Routing service failed with status 400 Bad Request since you don't live in North America and select "use current Location" and click Find Route. I expect ORS possibly cannot provide a route to Hollywood because it cannot navigate the Panama Canal and no roads :cry: . Change the Destination Address from Universal Studios Hollywood to something else like Lima Peru. What happens?
navigateLocation . Replace Universal Studios Hollywood with Lima Peru and it should work for you (unless your location is not on an OSM road :cry: and cannot 'connect'.

Although Navigate provides a 'route' the free service is not very smart and does not optimize the route. It works best for short distances. In my opinion, ORS is a toy.

WhatsApp Video 2023-03-16 at 8.57.41 AM
espere hasta 3 minutos y nada la dirección
av el parral comas
si es ubicable cuando busco de un punto a otro punto

el problema es cuando uso
use current Location

y mi ubicación también es ubicable ya que vivo en una zona urbana y nunca e tenido problemas con mi ubicación por GPS

en tu imagen veo 3 Marker rojo verde y amarillo
image

a mi me sale solo rojo y verde Marker1 esta deshabilitado en el .aia

image

será por eso?

av el parral comas Lima Peru perhaps????????? insufficient address

Hi

Anyone has the below error messages?

Error 4003: Routing services failed with status 404 Not Found.

I downloaded your .aia and got this error and my project has same errors.

Please comment me.
Thanks