Introduction to mapping with App Inventor

This course unit or chapter will consider several ways to display and handle geographic maps on your smartphone. This is a subject you need to deal with, to make operational web apps that handle geolocation. Two other subjects are geolocation (including GPS) and data management (see other tutorial units).
App Inventor offers many ways to do mapping with different capabilities.
We will consider 4 of them in this tutorial:

  1. Mapping with a browser or web viewer component,
  2. Starting a secondary app to handle Mapping with “Start Activity” component,
  3. Mapping with a Canvas component that keeps App conctoel on the Mapwindow (static maps and streetview APIs),
  4. Mapping with a web service (fusion tables) that handles data management adn mapping.





You will see pros and cons, for each one. Your choice will depend on what you need to do.
Methods 1 and 2 are fairly simple This Tutorial (V2) shows 4 ways to map with App Inventor : Web viewer, Start activity, fusion tables and Canvas static maps and streetview APIs This Version 2 goes into more details regarding coordinate conversions, distance measurement, ... and provides functions (procedures) which you may reuse, even if you do not fully master the contents.

What you will learn :

  • What is a Web API (Application Programming Interface)
  • What is a URL (Uniform Resource Locator) and how to build it
  • Mapping resources on the web or in the cloud :
    • Mapping APIs
      . Interactive Web maps (open street map, Google maps, …)
      . Staticmaps and streetview APIs,
    • Web Databases with mapping capabilities
      . fusion tables
  • Display interactive maps with the Webviewer and a map URL,
  • Display map with the Start Activity Component, using a secondary mapping App,
  • Display map in a WebViewer, and fusion tables with Web data management,
  • Display static maps with the Canvas component, and build interactions from you App,
  • Display streetview and visit buildings,

What you will do :

  • Introduction : Review mapping solutions with App Inventor
  • Review concepts that will be used (URL, URL encoding)
  • Coding exercises
    • Sol. 1 : display a dynamic map with a Webviewer component and URL,
    • Sol. 2 : display map with the StartActivity component and a second mapping App,
    • Sol. 3 : display map with Webviewer and fusion tables with web data sharing,
    • Sol. 4 : display static maps with a Canvas component and interact from your App,
    • Sharable utilities : Key service functions when mapping
    • Sol. 4a : display a list of markers on the map
    • Sol. 4b : extend interaction levels with the canvas component
    • Sol. 4d : extend to streetview display and visit buildings

Resources :



Please check for updates (documents or files) The main resources are the Tutorial is pdf format.
For mapping with fusion tables, a custmer table with name, address, atitude and longitude is provided as well as a table of orders and a joined or merged table of the two. Table_ids are in the text version of the tutorial. For the Canvas codig exercise, templates from version A are being updtaed and simplified. For the time being, templates of tutorial version 1 can be used. and the template App to get started with.
http://www.letustry.org/appinventor/apps/mapping/mappingTutorialV1/SanFran_startPart1.aia
http://www.letustry.org/appinventor/apps/mapping/mappingTutorialV1/SanFran_startPart1.apk

Please check for updates (documents or files)

Then you can do each step from the result of the previous step, or with the template App (.aia and .apk) for this step which you can load at the following addresses :