Cartography & mapping

Introduction to mapping with App Inventor

This course unit or chapter will consider several ways to display and handle geographic maps.
It can help you select the adequate tools to build geolocated Web apps.
(You may also need to have a look geo-location and data management tutorials in other chapters).

App Inventor offers many ways to do mapping with VERY different capabilities.
We will consider 5 of them here :

  1. Mapping with a browser or web viewer component,
  2. Mapping with a secondary app to handle Mapping with the “Start Activity” component,
  3. Mapping with a Canvas component where the App keeps full control on Mapwindow events,
  4. Mapping with the "new" App Inventor Map components with intermediate App control,
  5. Mapping with a web service (fusion tables) that handles data management and mapping.


You will see that each method has its pros and cons.

When starting a mapping project, you will have to make a choice that is fit to what you need. This step is sometimes called "application analysis and design". Making a good choice is a key point. Take time for analysis, don't rush into the code. You do not need to work on all methods, but you need to check that the method you choose matches your requirement.

Methods 1, 2 and 4 are fairly simple, as well as the beginning of method 3.
Then it gets a little harder if you want to build interactive games (solution 3) or network Apps (3 or 5). You will then need to :
  • bring coordinate systems into correspondence : screen coordinates (pixels), geographic coordinates (degrees of latitude and longitude) or cartographic coordinates (meters),
  • compute distances on a plane or on the spherical earth, etc. (this can be a nice math exercise, but you can avoid it with ready to use routines that are provided),
  • learn how to organize or structure data, for access and update.
This rise in complexity implies a good organisation and increased use of procedural abstraction. You can split tasks, if you are working in a group, everyone does not need to do it all, nor understand all details.
This tutorial may be used as a general resource. Get an overall view, then pick up what you need. What's important is to select the adequate part.

What you will learn :

  • What is a Web API (Application Programming Interface),
  • What is a URL (Uniform Resource Locator) and how to build it,
  • What is an Android Activity,
  • How you can use a few Mapping resources that are available on the web.
    • Mapping APIs
      . Interactive Web maps (open street map, Google maps, …)
      . App Inventor Map components (internal API)
      . Staticmaps and streetview APIs,
    • Web Databases with mapping capabilities (fusion tables).
  • Display maps with various methods :
    • Display interactive maps with the Webviewer with open street map, Google maps, …
    • Display map with the Start Activity Component, using a secondary mapping App,
    • Display static maps with the Canvas component, and build interactions from you App,
    • Display maps with App Inventor internal mapping components,
    • Display map in a WebViewer, and fusion tables with Web data management,
    • Display streetview and visit buildings with 360° images.

What you will do :

  • Review principles and tools :
    • Lesson 1 : Introduction : Review mapping solutions with App Inventor
    • Lesson 2 : Review concepts that will be used (URL, URL encoding)
    • Lesson 9 : Sharable utilities : Key service functions when mapping
  • Coding exercises :
    • Lesson 3 : display a dynamic map with a Webviewer component and URL,
    • Lesson 4 : display map with the StartActivity component and a second mapping App,
    • Lesson 5 : display static maps with a Canvas component (part 1),
    • Lesson 6 : display map with the new App Inventor MAP components,
    • Lesson 7 : display map with Webviewer and fusion tables with web data sharing,
    • Lesson 8 : display map with a Canvas component (part 2) with map/App interactions,
    • Lesson 10 : display a list of markers on the map
    • Lesson 11 : extend interaction levels with the canvas component
    • Lesson 12: extend to streetview display and visit buildings
    You can start with lessons 1,2,3 and 5 (lesson 6 is not ready yet) then 8. Other ones may be harder.

Ressources :

  • An App Inventor repository contains projects to start with each step. It is shown in each lesson or exercise. For each serie or exercises the endpoint of each step is generally the starting point for the next.
  • (draft) Tutorial under pdf format.
  • Fusion tables are provided for exercises that need them :
    • "customer" table with "name, address, latitude, longitude"
    • "orders" table pour les commandes
    • and a merged or joined table between these two.
    These tables are shared, you can update their content. USe them for your exercises, but try not to "pollute" their shared content.
    Creating fusion tables is seen in the chapter/unit about databases. You can create fusion tables by yourself, using their own documentation (fusion tables can be used with App Inventor, but they are not part of it).