GPS and Maps

Content:

1. Getting GPS position

Using the location sensor in AppInventor: http://www.cs.usfca.edu/~wolber/appinventor/locationsensor.html

Using GPS in JavaScript, including PhoneGap: http://docs.phonegap.com/phonegap_geolocation_geolocation.md.html#Geolocation
Note the "quirk" at the bottom, i.e. to get mock GPS on the emulator you must set the option "enableHighAccuracy" to "true".

It appears that there is a problem with mock locations on the Android 2.3.3 emulator (it seems to crash/reboot the emulator). Please avoid using this version of the emulator; try Android 2.2 instead.

2. Showing a Separate Map

From an AppInventor application you can pop open the built-in map application or the browser using an ActivityStarter component, e.g. see http://appinventor.googlelabs.com/learn/tutorials/maptour/maptour.html

From PhoneGap you should be able to use the (optional) WebIntent plugin to start other activities in the same way: see Maps_and_Barcodes_on_PhoneGap.html

The main thing you need to work out is the DataURL to open; for example:

Note that the first three are "slippy" maps, i.e. scrollable, while the last two are not (they are just single images). 

Also note that all maps except for images copied onto the device will require a live network connection in order to work.

Some more URL examples are included here: http://appinventor.googlelabs.com/learn/tutorials/maptour/maptour2.html

3. Integrating a "Slippy" Map

In AppInventor there is currently no way to include a "slippy" map (e.g. a google map view) within the application itself.

In HTML/JS (including PhoneGap) there are several libraries which allow maps to be included in the page, including:

4. Integrating a Static Map

In AppInventor a static map can be displayed within the application as an image or as the background of a canvas.

In HTML/JS (including PhoneGap) a static map can be displayed within the page as an <img> element or on a HTML5 <canvas>.

In each case, using a canvas allows the application to draw on top of the basic map image, e.g. to show points of interest.

5. Calculating Distances

This page explains how to calculate approximate distance between two Lat/Longs (AppInventor and code): http://www.appinventor.org/distance-based-on-lat-long

The same algorithm will work in JavaScript, although other more accurate library functions are also available, e.g. in the Google Maps API, http://code.google.com/apis/maps/documentation/javascript/, in Open Layers, http://openlayers.org/, or http://www.movable-type.co.uk/scripts/latlong.html

6. Point-in-Region Tests

The simplest point (e.g. current position) in region test is to calculate and check the distance to a reference point, giving a circular region. This can be done in AppInventor or HTML/JS (including PhoneGap) as described above.

A region can also be defined as a polygon, i.e. a list of lat/longs which are the corners of the polygon. There is a fairly simple algorithm for determining whether a point is inside a polygon or not, e.g. http://jsfromhell.com/math/is-point-in-poly. This approach works for Lat/longs provided that (a) the region is not too large (b) the region does not span the 180th longitude. It is probably impractical to code this in AppInventor, but is straight-forward in JavaScript. 

As mentioned elsewhere the following tools may be useful:

7. More Complex Location-related Operations

Most people are familiar with other more complex map operations, e.g.

These operations usually need extra data, and are typically done by a server somewhere rather than on the mobile device itself. Therefore they need a live network to work.

These network services are not directly accessible from AppInventor (although an experienced programmer can create a gateway service to allow the TinyWebDB component to access them).

A number of JavaScript libraries support various map-related services, for example the Google maps API includes various operations for geocoding and generating routes/directions, http://code.google.com/apis/maps/documentation/javascript/.