Location Services with HTML5 GeoLocation
AI2 provides a Location Sensor and Location services through the Map component natively, but there is another way, using the HTML5 GeoLocation API through a Webviewer. I aim to show you the basic setup of an aia project to run this, and a few examples of what you might do with it.
The API appears to use a "fused" approach to Google's Location Services, that is, a combination of IP, Data, and GPS, depending on what is available and what is most accurate. I found if I use this on an fixed computer, the locator will return my location as being somewhere near the local exchange, whilst using a smartphone reports an accurate reading of my position. I have found that using the HTML5 Geolocation can return a reliable and accurate method of determining your position, whether you are inside (a building) or outside, or away from wifi/data.
You can return the following values from a location fetch request:
The following will ensure that HMTL5 GeoLocation works during development in companion, and once your app is compiled.
Ensure you have Location Services turned on in your phone / device
In your aia project, request FINE_LOCATION permission, using your preferred method, I have done it like this: using a clock with a 500ms interval, to provide an event turnaround
3. You will then need a Button and a Webviewer, along with a WebViewStringChange event block and a label, to return lat/lon/other values back to your app from the webviewer , and another Button in order to "stop" the location finder (more later....)
4. You may also need some form of "stay-awake" routine, to keep your app alive and prevent it from going into the background, I will cover this later....
5. Finally, you will have observed that you need an html file to open in the webviewer, I will move onto these next.
These files can be uploaded as assets to your project. Use http://localhost/<myfile>.html in your webviewer goToUrl block.
In each example, I am returning the location data as a stringified json. This can be converted using the jsonTextDecode block from the web component to an AI2 list for re-use in the app.
You should always be using enableHighAccuracy:true; as an option
Your basic, get my location html.
On the press of Button1 this will return your latitude and longitude and display this both in the webviewer and in the label in your aia project. You will notice that I use a conditional statement to check whether AppInventor is present, this ensures that the html can run in a normal browser on your computer, as well as within your app.
Get my location html, but this time include a timestamp.
On the press of Button1 this will return your latitude, longitude and timestamp and display this both in the webviewer and in the label in your aia project. The timestamp is in milliseconds, therefore you can use clock blocks to convert this to human readable date/time.
Continually get my location html, using the "watch" facility, which will return a new reading each time your location changes
On the press of Button1 this will return your latitude, longitude and timestamp and display this both in the webviewer and in the label in your aia project, and keep displaying new readings each time location changes. ( in my experience, even with my smartphone on my desk, not moving, location services keeps trying to find the most accurate reading, so you will get many readings when not moving, especially if you also call the timestamp, which will always be different)
Continually get my location html, using the "watch" facility, which will return a new reading each time your location changes, and set a target destination
On the press of Button1 this will return your latitude, longitude and timestamp and display this both in the webviewer and in the label in your aia project, and keep displaying new readings each time location changes. If the target lat/lon is reached, then the "watch" is stopped. ( I have set the target coordinates to the South Pole.....)
For examples HTML3 & HTML4, you may want your device/app to remain turned on and awake to continue receiving updates of position long after you phone/device would normally go to sleep. I have employed a simple stayawake routine, using a clock timer set to 10023ms (just over 10 seconds), and a notifier alert that displays "nothing". On my device, the phone settings significantly dim the screen after a time, but the app remains in the foreground.
Clock Timer Settings
I used the HTML3 file to help me plot a local walk, which was just under 2 miles. Here is the resultant map plotted from the coordinates recorded. I took a reading every 15 seconds (or so):
Showing the four html files in action returning lat/lon/timestamp information. Please note, the lat/lon values are fictitious.