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
Language Objectives: I will be able to
|
3.8.2. Learning Activities¶
Tutorial
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.
Enhancements
Your instructor may ask you to do some or all of the following enhancements for your Map Tour app. Be creative!
- Add more destinations to your map tour. Make sure you have at least 3 destinations.
- 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.
- 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.
- 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:
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.destinations ← [] destinations ← [ "Statue of Liberty", "Chichen Itza" ]
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¶
Vocabulary
Here is a table of the technical terms introduced in this lesson. Hover over the terms to review the definitions.| list
index string concatenation substring |
data type
data abstraction Abstract Data Type (ADT) API GPS |
Check Your Understanding
Complete the following self-check exercises.
- It would give you the last item in the list.
- If it were easy, you wouldn’t be learning anything! Unfortunately the app would probably crash because you did not use a valid index.
- It would give you the first item in the list.
- If it were easy, you wouldn’t be learning anything! Unfortunately the app would probably crash because you did not use a valid index.
- It would crash because there is no item with that index.
- That's right! When you are referring to an item in a list using an index, you must make sure to use a valid index. For this list the valid indexes are 1 through 8. Using any other index is sometimes called an Index out of bounds error.
- It would ignore your request.
- If it were easy, you wouldn’t be learning anything! Since there is no index of 10, MIT App Inventor wouldn't ignore your request. Instead it would unfortunately probably crash the app because you did not use a valid index.
- It would give you a random item from the list.
- If it were easy, you wouldn’t be learning anything! Unfortunately the app would probably crash because you did not use a valid index.
Q-5: What do you suppose would happen if your app asked MIT App Inventor for the item at index 10 in the list shown here?
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.