mit app inventor map tour tutorial

• Table of Contents
• Course Home
• Assignments
• Peer Instruction (Instructor)
• Peer Instruction (Student)
• Change Course
• Instructor's Page
• Progress Page
• Edit Profile
• Change Password
• Scratch ActiveCode
• Scratch Activecode
• Instructors Guide
• About Runestone
• Report A Problem
• 3.1 Unit Overview
• 3.2 Paint Pot Tutorial
• 3.3 Representing Images
• 3.4 Paint Pot Projects
• 3.5 Paint Pot Refactoring and Procedural Abstraction
• 3.6 Error Detection
• 3.7 Parity Error Checking (optional)
• 3.8 Map Tour Tutorial
• 3.9 Map Tour With TinyDB
• 3.10 Impacts of CS Electronic Documents
• 3.11 Wrap Up
• 3.8. Map Tour Tutorial" data-toggle="tooltip">
• 3.10. Impacts of CS Electronic Documents' data-toggle="tooltip" >

3.9. Map Tour With TinyDB ¶

Time estimate: 45 minutes, 3.9.1. introduction and goals ¶.

• Adding Destinations to the Tour. We will allow users to click on the map to add new destinations to the map tour.
• Data Persistence. We will incorporate TinyDB , MIT App Inventor's database component, which will enable the app to save new destinations for the user. Locations that are added to the destinations list will be saved to the database and re-loaded into the app when it starts up again.

3.9.2. Learning Activities ¶

• text-version
• short handout
• YouTube video
• TeacherTube video
• YouTube video - Tiny DB
• TeacherTube video - Tiny DB

What is TinyDb?

Up until now, the data in our apps has been stored either in global variables or as the value of the properties of the app’s various components. For example, when you store a piece of text in a Label, that data is stored in the computer’s main memory, in its RAM — random access memory. And as we’ve learned, RAM is volatile , meaning that any data stored there will be destroyed when the app is exited.

By contrast, data stored in the computer’s long-term storage — e.g., on the phone’s flash drive — will persist as long as the app is kept on the device. There are various ways to store data permanently on a computer. For example, you could store it in a file, such as a document or image file. Another way to store persistent data is in a database . MIT App Inventor provides us a very simple, easy-to-use database in its TinyDb component. Any data that we store in the TinyDb, will not disappear when the app is exited. Instead, it will persist between uses of the app -- even if you turn off the device.

Before working on incorporating TinyDb into our app, the following video provides a brief overview of this very important component. ( Teacher Tube version )

Map Tour with TinyDB Tutorial

To get started, you can use the app you created in the previous lesson and follow along with the video tutorial or the Text Tutorial or for an additional challenge, the Short Handout .

Enhancements

• Text To Speech: Add a TextToSpeech component to the UI, and when the user picks an item from the list, call TextToSpeech.speak to say the selected item.
• Add a ListPicker to the UI to Delete destinations.
• In ListPicker.BeforePicking, set the ListPicker.Elements to the destinations list.
• In ListPicker.AfterPicking, use the remove list item block from the Lists drawer to remove the item at the ListPicker.SelectedIndex from both of the lists (destinations and destinationsLatLong). Save both lists in TinyDB. Use Notifier.Alert to tell the user the destination was deleted.
• Refactor your code to add a saveToDB procedure to save both lists in TinyDB and call it from ListPicker.AfterPicking and Notifier.AfterTextInput.
• Add My Location: If you have a device and location where GPS works. when you click on the My Location block, add that location to the destinationsLatLong lists using the Add Item to List block and use the Notifier.ShowTextDialog to get the location name for the destinations list (this will call the already written Notifier.AfterTextInput procedure).

3.9.3. Summary ¶

3.9.4. self-check ¶, check your understanding.

Complete the following self-check exercises.

Q-2: Which of the following statements are true for a TinyDb component. Choose all that apply.

• a. Data stored in a TinyDb can easily be shared with other devices and users.
• This is challenging, but rewarding!
• b. Data stored in a TinyDb will persist between different uses of the app.
• That's right! Data stored in a TinyDb persist between uses of the app, but these data are stored on the device (not in the cloud) and cannot be shared with other devices or users. A TinyDb can store strings or numbers or lists.
• c. Data stored in a TinyDb disappears when you quit the app.
• d. Data stored in a TinyDb is stored in the cloud.
• e. Only strings (text) can be stored in a TinyDb.

Q-3: What value would the global variable userName have after the blocks shown here are executed? Type your answer into the textbox. Spelling counts.

Q-4: What value would the global variable userName have after the blocks shown here are executed? Type your answer into the textbox. Spelling counts.

Q-5: In the block shown here why is it necessary to test whether the highestScore equals the empty string?

• a. Because that would be a bad score.
• OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn.
• b. Because that would be the value returned by TinyDb if nothing had yet been stored under the tag "highest".
• Good. If TinyDb does not find anything in the Db under the tag "highest" it will return the empty string. This is how you check that TinyDb does contain a value for a given tag.
• c. Because TinyDb can only be used to store numbers, not strings.
• d. Because TinyDb returns an empty string whenever the network is not available.

Consider the following depiction of the contents of a TinyDb for an app.

And suppose your app just executed the following block:

Which of these statements best describes the current state of the database?

• There are now two colleges, Trinity and Bowdoin, associated with the tag 'school'.
• No. This is not the correct choice. Associating a value with a tag is not the same as adding new values to the tag.
• This would cause an error because the tag 'school' has already been used.
• No, this is a valid statement.
• The tag 'school' would now be associated with 'Bowdoin College' instead of 'Trinity College'.
• Yes. The value 'Bowdoin College' will now be associated with the tag 'school' in the TinyDb, replacing 'Trinity College' as the value of that tag.
• The tag 'school' is still associated with 'Trinity College'.
• No, we are associating a new value with the tag 'school'.

Q-7: True or False: It is possible to have an empty list – i.e., a list with no elements.

• Yes, a list can be empty. It's important in computer programming to be able to model a list with no elements. For many problems that is the list's initial state -- before items are added to it. A empty list has a length of 0.
• Mistakes are welcome here! Try reviewing this; in computer programming is it a list is often considered to be empty in it's initial state -- before items are added to it.

3.9.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.

Map Tour App Mobile CSP Hour of Code

Open each section of the tutorial below or click on the numbers above and follow along. Click on images and videos to enlarge them.

2. App Inventor User Interface

• Look up your town at https://www.latlong.net/ and grab its latitude and longitude to put in the CenterFromString property of your map.
• Add 3 markers and 3 buttons for the 3 landmarks in your tour.
• Add an Image component and find 3 images of your landmarks and upload them in the Media section.
• Click on the Media section and drag in a TextToSpeech component.

3. Code the Map Tour

• Click on the Blocks button at the top right to switch to the Blocks editor where you add the code to make your buttons and other components work.
• Click on Button1 and drag in a When Button1.Clicked event handler block.
• Click on Map1 and drag in a Map1.PanTo block and click on Marker1 to get Marker1.latitude and Marker1.longitude blocks and a Math 0 block to set the zoom level to 15.
• Drag in a set Marker1.fillColor block and choose a color, and a Marker1.showInfoBox block.
• Drag in an set Image1.Picture block and copy in the exact filename of the image that you uploaded for your first landmark.
• Drag in a TextToSpeech.Speak block and type in a fact about that location in a Text block .
• Right click the Button1.click event handler and choose duplicate. Change the duplicated block to Button2 and Marker2 and put in the fact and image for the second landmark. Right click to duplicate again and change it for Button3 and Marker3.

4. Connect and Run

Click here if you don't have a device and here if you don't have WiFi available.

1. Download Companion App

If you can't use the Play Store click here .

2. Connect to the Companion

If you have problems, make sure your mobile device and your computer are on the same WiFi or other network. If the app seems frozen, try Connect/Reset Connection and then try Connect/AI Companion again. See the Troubleshooting page or try another method of connecting your device such as USB or using the emulator .

Certificate

« Back to index

Table of Contents:

FeatureCollection

The Circle component visualizes a circle of a given Radius , in meters, centered at a Latitude and Longitude . The Circle ’s appearance cnn be customized using properties such as FillColor , StrokeColor , and StrokeWidth .

The Circle component can also be used to implement features such as geofencing, a mechanism where the user’s presence within an area is used to trigger other behaviors. Using the DistanceToPoint method combined with the LocationSensor , you can determine whether a user’s location is inside or outside of the Circle . You can use this feature to trigger additional actions.

A FeatureCollection groups one or more map features together. Any events that occur on a feature in the collection will also trigger the corresponding event in the collection component. FeatureCollection s can be loaded from external resources to populate Map s with content. GeoJSON is the only format supported at this time.

• description becomes Description
• draggable becomes Draggable
• infobox becomes EnableInfobox
• fill becomes FillColor
• fill-opacity becomes FillOpacity
• image becomes ImageAsset
• stroke becomes StrokeColor
• stroke-opacity becomes StrokeOpacity
• stroke-width becomes StrokeWidth
• title becomes Title
• visible becomes Visible

LineString is a component for drawing an open, continuous sequence of lines on a Map . To add new points to a LineString in the designer, drag the midpoint of any segment away from the line to introduce a new vertex. Move a vertex by clicking and dragging the vertex to a new location. Clicking on a vertex will delete the vertex, unless only two remain.

A two-dimensional container that renders map tiles in the background and allows for multiple Marker elements to identify points on the map. Map tiles are supplied by OpenStreetMap contributors and the the United States Geological Survey.

The Map component provides three utilities for manipulating its boundaries with App Inventor. First, a locking mechanism is provided to allow the map to be moved relative to other components on the Screen. Second, when unlocked, the user can pan the Map to any location. At this new location, the "Set Initial Boundary" button can be pressed to save the current Map coordinates to its properties. Lastly, if the Map is moved to a different location, for example to add Marker s off-screen, then the "Reset Map to Initial Bounds" button can be used to re-center the Map at the starting location.

In blocks code, it is recommended for performance reasons to use PanTo with numerical latitude and longitude rather than convert to the string representation for use with this property.

Note: Road layers are provided by OpenStreetMap and aerial and terrain layers are provided by the U.S. Geological Survey.

The Marker component indicates points on a Map , such as buildings or other points of interest. Marker s can be customized in many ways, such as using custom images from the app’s assets or by changing the Marker FillColor . Marker s can also be created dynamically by calling the Map ’s CreateMarker method and configured using the “Any Component” blocks.

The Navigation component generates directions between two locations using a service called OpenRouteService . You must provide a valid API key from that service in order for this component to work.

• foot-walking : Route based on walking paths
• driving-car : Route based on vehicle paths
• cycling-regular : Route based on bicycle paths
• wheelchair : Route based on wheelchair accessible paths
• directions : A list of text directions, such as “Turn left at Massachusetts Avenue”.
• points : A list of (latitude, longitude) points that represent the path to take. This can be passed to LineString ’s Points to draw the line on a Map .
• distance : Estimated distance for the route, in meters.
• duration : Estimated duration for the route, in seconds.

Polygon encloses an arbitrary 2-dimensional area on a Map . Polygon s can be used for drawing a perimeter, such as a campus, city, or country. Polygon s begin as basic triangles. New vertices can be created by dragging the midpoint of a polygon away from the edge. Clicking on a vertex will remove the vertex, but a minimum of 3 vertices must exist at all times.

Rectangle s are polygons with fixed latitudes and longitudes for the north, south, east, and west boundaries. Moving a vertex of the Rectangle updates the appropriate edges accordingly.

MIT App Inventor

• © 2012-2024 Massachusetts Institute of Technology
• This work is licensed under a Creative Commons Attribution-ShareAlike 3.0
• Terms of Service and Privacy Policy

Data Science and Sensors

MIT App Inventor

Ghost streets in Map component (not in Map Component but in some OpenStreetMap tiles)

Has anyone seen this before?

Co-ordinates ?

Thanks for your swift reaction, but in the mean time I found that Openstreetmap shows comparable flaws when opened in a browser on a laptop... So it looks like a problem beyond AI2.

The problem is pretty random, so coordinates are no use. I fround them in Germany, Netherlands and France. If you want to see the problem just open Openstreetmap, go to preferrably a green patch on the map, like a forest, and slowly zoom in. When you zoom in pretty far you may notice one or more straight white road lines, which generally start and end randomly on the map. Zooming in further may make them dissappear, and zooming out again will show them once more. So now and then you may stumble over a cluster of roads like in my screendump, mostly with English and Cyrillic street names. Hopefully they will solve it soon, since once downloaded, AI2's Map will store the crooked tiles on the device. So the only way to get rid of stored crooked tiles may be just removing the app and installing it again... Or is there a way to refresh Map tiles? Wil Pa8w

Ok, further investigation learned that in april or earlier some zoom layers were hacked at Openstreetmap, It seems that the layers were contaminated with ghost streets and obscene language. I think that knowing this we can safely end this thread since it is definately not a AI2 issue.

Some extra info

Ok, so the cause is clear, I am impressed how fast they manage to clean up their polluted map tiles. But that leaves a AI2 Map problem: Since map tiles are being stored on the device, stored polluted tiles remain active in the Map. Is there a way to clear the buffer or force a new tile download? If not, only removing the app and re-installing it seems to be the only way to get rid of the crooked tiles. In that case, an new Map function like a "refresh" or "clear buffer" would be ideal to get rid of the buffered crooked tiles.

You haven't tried clearing the app's cache?