3.8. Map Tour Tutorial

Time Estimate: 45 minutes

3.8.1. Introduction and Goals

The Map Tour App tutorial showcases some features of the Map component in MIT App Inventor to create a map tour of different destinations. You will learn about an important data abstraction called Lists to keep track of the destinations.
(TeacherTube Version)
Learning Objectives: I will learn to
  • use the Map, ListPicker, and WebViewer UI components in MIT App Inventor
  • use lists to store and access destinations on the map
  • use an API (Application Programming Interface) to display Wikipedia pages of destinations
Language Objectives: I will be able to
  • use target vocabulary, such as list, index, string, concatenation, and API while describing app features and UI components, with the support of concept definitions and vocabulary notes from this lesson

3.8.2. Learning Activities


To get started, open MIT App Inventor and start a new project and name it Map Tour. Follow along with the following video or the text tutorial or the short handout for more of a challenge.

(TeacherTube Version)


Your instructor may ask you to do some or all  of the following enhancements for your Map Tour app. Be creative!

  1. Add more destinations to your map tour. Make sure you have at least 3 destinations.
  2. MapType ListPicker: Add a ListPicker to choose the Map Type with the Elements Roads, Aerial, and Terrain. These elements can be set in the UI or in the code in the BeforePicking event handler. After picking, use the user’s Selection to set the Map.MapType to 1 for Roads, 2 for Aerial, and 3 for Terrain. You could do this with an if block using the blue mutator button to add if/elseif/else parts to make a 3 way choice.
  3. Zoom Slider: Add a slider to your UI to control the zoom level in the map. You may want a horizontal arrangement to arrange these new controls. In the slider’s properties, set the MaxValue to 20, MinValue to 1, and ThumbPosition to 13. The slider has a When Slider Position Changed event handler that is called when the user slides the slider. Inside this event, you can change the Map1’s Zoom property to value in the Slider’s ThumbPosition.
  4. My Location button and GPS: OpenStreetMap keeps track of the user’s location using GPS (the Global Positioning System which uses satellites orbiting the earth to allow us to pinpoint our locations on earth). The Map’s properties UserLatitude and UserLongitude will give the latitude and longitude of the device currently running your app if the device has GPS capabilities. Add a button called My Location. When it is clicked, use the Map.PanTo procedure to go the the Map’s UserLatitude, UserLongitude, Map.ZoomLevel. Note: This enhancement is very dependent on the type of device you have and where you are -- being indoors in a classroom is not optimal. So to get this part of the app working you may want to package the app and take the device outdoors. Also, make sure that the device’s location sensing setting is turned on.

Data Abstraction: Lists

The simplest data abstraction in programming is a variable, but there are more complex data structures available in all programming languages. Like most other programming languages, MIT App Inventor has an abstract data type (ADT) called list that allows the storage of an ordered sequence of elements under one name in memory. Lists are sometimes called arrays in other programming languages. Data abstractions manage complexity in the program by giving a collection of data a name that can be used without knowing the specific details of its representation. The elements in a list are indexed which means they are numbered from 1 to the length of the list. To define a list, we can create a global variable that can be initialized to an empty list (a list with no items in it):

Or we can assign the variable a specific list of items using make a list:

The Lists drawer contains lots of blocks (see the documentation here) such as insert item into list and select random item from list that let you manipulate the items in the list.

Notice that a variable in MIT App Inventor can hold a single data item like a number or a whole list containing many items. Actually, variables in MIT App Inventor can hold a variety of data types including:

  • Numbers: integers or decimal numbers,
  • Strings: text, any sequence of characters you can type on a keyboard, represented inside quotes like "Hello World! 123".
  • Booleans: like true or false
  • Lists: a collection of related elements given a name. The elements can be any data type but they are usually all the same data type, for example all strings or all numbers, and they are numbered with an index.

We also used string concatenation in this app to join together two strings to make a new string. We joined together the wikipedia web site url with the destination name to make a new url. Another term used with strings is substring which is part of a string; for example, "cat" is a substring of "catalog".

AP Pseudocode

In the AP CSP pseudocode, listsare represented using square brackets [ ] as shown below. The assignment operator ← (the left-pointing arrow) can be used to assign a value to a variable. This value can be any data type including a number, a string, a boolean, or a list. So the initialization of the global variable for the empty list or a list of destinations would look like this in the AP pseudocode:

  destinations ← []
  destinations ← [ "Statue of Liberty", "Chichen Itza" ]
Lists can also be copied into one another, newlist ← destinations. In a program, if the index is less than 1 or greater than the length of the list, the program will have an error and stop running.

APIs: Extend Your Powers as a Programmer

In this app, you will make use of an Application Programming Interface (API) to communicate with and use Wikipedia from inside your app. An API for a program or web service defines how other programs can communicate with it and use it. There are lots of APIs available to programmers. The APIs specify exactly how programs and apps can interact with each other to perform certain tasks, like sending email or retrieving some data or displaying a particular web page.

APIs enable programmers to see the Internet and Web and their mobile devices in a very different way than other users. Rather than seeing it merely as something to use, APIs allow programmers to control how they interact with their mobile devices and with applications provided by Google, Wikipedia, and other software companies.

3.8.3. Summary

In this lesson, you learned how to:

3.8.4. Self-Check


Here is a table of the technical terms introduced in this lesson. Hover over the terms to review the definitions.
data type
data abstraction
Abstract Data Type (ADT)

Check Your Understanding

Complete the following self-check exercises.

3.8.5. Reflection: For Your Portfolio

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File/Make a Copy to make your own editable copy.

You have attempted of activities on this page