Mapping with App Inventor dedicated components
Durée estimée: 45 minutes

Presentation :

App Inventor has introduced powerful and interactive mapping tools that handle map items as objects. The map now becomes a smart map that can hold multiple layers with a raster background and vector objects (or features) overlaid on it. Each map object has its own properties and can be handled for itself : clicked for queries, moved or dragged to an other location, etc.
They bring us close to the GIS technology (Geographic Informations Systems) which is the professional approach to geospatial data management. Through the GeoJSON format, they open our apps to data exchange with thousands of geospatial databases and tens of thousands of open data sets (~1000 geodatasets for the Paris area, ... check for open geographic data around where you live!)
As a cherry on the cake, these components use Open Street Maps which is a worlwide open data initiative that might be the only alternative to Google servers. You might well become an OSM contributor yourself, sometime!
As a temporary drawback all functions are not fully working yet, and - as we write these lines - we recommend to stick with markers or point features (and keep line and area features for some time later). But that's quite enough to become familiar with this object oriented technology that handles raster map layers as well as vector objects.
Where do these components stand with regards to other mapping techniques?
We have seen different mapping solutions in other lessons of this course : with a webviewer, with start activity, with fusion tables and with static maps
- mapping with a webviewer is the easiest and enables interactive display, but your app does not see map events (clicks, ...) and there is no data feedback (or very little): this is a good "map output only" solution.
- mapping with start activity is similar : your app loses control to an other app (that runs on your phone). It brings more complexity, may be with a few more functions (I don't like it, it's too difficult to explain).
- mapping with static maps (usually Google API) displays maps as the backround image of a canvas. This keeps full app control on events, including clicks, sprite collisions, ... It's one of my favorites. The problem is that you need to write all the code, including coordinate conversions from pixels to meters and degrees of latitude and longitude.
- mapping with fusion tables uses a webviewer (as for the first case) but with a powerful server that cnnects mapping functions and data management (SQL like). That means you can click on objects to display their properties, but cannot drag objects nor catch click events from your app. Map interactions stay on the server side.
So where are we with the App Inventor mapping components ? somewhere between mapping with static maps in a canvas and mapping with fusions tables.
- We keep a high level of interactions within the app (clic, long clic, drag, ... objects) as is the case with static maps :
- what we loose are the sprites and balls, real time move and their collisions,
- what we gain is huge : sructured data management in the geographic space.
- We get a new level data management
- user handles data in the geographic space (not in screen pixel space), with embedded functions to zoom and pan,
- data are handled as geographic objects (features) with geometric properties (point, lines, areas, ...) and semantic or descriptive properties. This enables high level exchanges (feature, or feature collection level) with geographic databases, using the GeoJSON format
- there is at least one level of abstration above the sanvas/staticmaps approach,
- processing is done "locally" i.e. on the smartphone, which means less dependency on internet and servers,
- However, there is no database management functions, as is the case with fusion tables. Apps will need to use a local or network database.
Last but not least, if you intend to become a high level user of geographic data this will teach you basics that are shared by geoData/GIS professionals.
What you will do :
Use App Inventor mapping components to- display a map, pan and zoom
- Create, display, update, delete geolocated markers,
- query marker properties.
version | ressource link | Description |
---|---|---|
V1 | with version 1 you will create a map, then several markers with a name and adress. Name will be used as the marker's title and adress as the marker's description. Adress will also be used to compute initial marker's location | |
V2 | ||
V3 | ||
What you will learn :
Build and handle maps and map features as objects.
Input Ressources :
see ressource link in above table

Lesson content :
Design and selection of components : App V1



Component | Category | Name | Role |
Sreen1 | main screen / top component.
|
||
Vertical Arrangement |
Layout | ArgtVertSaisieMarker | Embeds horizontal arrangements for pseudo (name)an address.
|
Horizontal Arrangement |
Layout | ArgtHorPseudo | Embeds textbox and button for voic recognition of marker's pseudo(or name)
|
Text box | Interface utilisateur | ZoneTextePseudo | Zone de texte dans laquelle on va afficher le pseudo (name) du marker.
|
Bouton | Interface utilisateur | BoutonRecoPseudo | Bouton de lancement d’écoute et reconnaissance du pseudo (name)
|
Horizontal Arrangement |
Layout | ArgtHorAdresse | Embeds textbox and button for voice recognition of marker's address
|
Text box | Interface utilisateur | ZoneTexteAdresse | Zone de texte dans laquelle on va afficher et permettre d’éditer l’adresse dictée.
|
Bouton | Interface utilisateur | BoutonRecoAdresse | Bouton de lancement d’écoute et reconnaissance de l'adresse
|
map | Maps | ArgtHorPseudo | Embeds textbox and button for voic recognition of marker's pseudo(or name)
|
Zone de texte | Interface utilisateur | ZoneTexteAdresse | Zone de texte dans laquelle on va afficher et permettre d’éditer l’adresse dictée.
|
Bouton | Interface utilisateur | BoutonRecoAdresse | Bouton de lancement d’écoute et reconnaissance de l’adresse dictée par l’utilisateur
|
Cadre | Interface utilisateur | CadreCarte | Cadre dans lequel la carte (dans un format image) sera affichée
|
Notificateur | Interface utilisateur | Notificateur1 | Composant permettant d’afficher des messages. (Il ne sera pas utilisé dans l’application elle–même, mais c’est un composant dont on a presque toujours besoin, en particulier dans la phase de débogage de l’application. |
Reconnaissance vocale | Media | RecoVocale | Composant utilisé pour traduire en texte, l’adresse dictée par l’utilisateur. |
Capteur Position |
Capteurs | CapteurPosition | Composant de géolocalisation dont la configuration doit être vérifiée sur votre téléphone (cf. Paramètres/Localisation).
Pour les essais l’intérieur, passez en mode "économie de batterie" qui correspond au mode "network" Intervalle de distance : 10 (m) Intervalle de temps : 60000 (ms) |
Web | Connectivité | Web1 | Composant (non visible) utilisé ici pour encoder l’adresse en URL avec la fonction : encoder URI
Ce composant n’est PAS utilisé pour récupérer la carte par son URL, car c et URL est utilisé directement comme un nom de fichier. |





Quiz / auto control:
à compléter ou supprimer
Extensions and portfolio
à compléter ou supprimer