HOW TO: Use the Navigate control

Simple Navigate by SteveJG

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:


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.


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,

Plot Multiple marker in map using List
Estimated time from one point to another
Is Location Sensor working in South Korea?
Como traçar rotas no Appi inventor, como no waze ou google maps
How to make a map app to return only (driving) distance in miles?
How do you use openrouteservice API?
Issue with connecting mit app inventer with navigator
Error while connecting with android device through apk
I want to make navigation app by app inventor
Post position data and get proceced info
Add a button to get Google Maps directions to an specific place
GPS application
Navigasyonda do ıt boşluğuna ne yazmamız gerek?
Navigasyon Hata (Navigation Error)
Location Tracker
Calculer la distance entre son domicile et un point donnée dans une textbox
App crashing as screen changes
Error while getting route (using the json file and the Web component)
Map app creation assistance required please!
Help with “map”
Im starter. I want to know if its possible to make an app to find house in a neighbour
Navigation Application
Navigate control. Examples. DecoJson extension
Android Controlled Arduino Robot
Planning phase question (building an app to display routes)
Error 4003/403 in map app
What code enables the map to automatically take our current location?
Converting from Degrees to Radians on iOS
How do I build a program like Google Maps?
Map Navigation Show Path, Direction, Distance and Duration
From application to application or web (find bus routes)
Map component doubt (calculate distance between Android and a location)
Création d'une application pour la suivie d'un bus en temps réel et calculer le trajet avec votre position
My Application shows an error when call for Direction request

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

Hi All!

I made the navigation map using navigation and other supporting components using 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 ?