AI2 Static Maps 102

...the
Magic Map Pins
Tutorial for AI2 The tutorial demonstrates how to use Static Maps with AI2

in conjunction with the AI2 LocationSensor. A network or WIFI connection is required to use Google’s Static Maps. You can code the example app on an emulator but you MUST
test
the example app on an Android device that has a GPS receiver if you enable the GPS
current location
code. Magic Map Pins uses a Static Map and a previously prepared csv file of map pin locations stored in Media (resources) in conjunction with a device’s GPS receiver. Several demonstrations are selected using a Spinner; detailed information about an individual map pin is selected using a ListView. Here is how the app is created. Magic Map Pins Start with the AI2 Static Maps 101 tutorial, then continue to read. There are no detailed instructions, the tutorial assumes the reader completed the 101 tutorial. The
Magic Map Pins
app uses four demonstrations to show how map pins provide a lot of information using
App Inventor 2
. All Four Demos Show how to locate the pins and provided detailed map and or text information.
CSV1
and
CSV2
contain the code required in
your
app to provide map pins. Demo1 How to use fancy map pins. The pin locations are generated using information about the Android device's current location.
Demo1
is a
demonstration
to test the algorithms and show how information is displayed with the map pins.. Coordinate values are generated automatically using your device’s actual location. The default map tile level zoom is 10 for all the pins, 14 for individual pins(using the ListPicker). Demo2 How to use simple map pins and display information about them.. This is
Demo1
using simple pins. See the comments for Demo1. The default map tile level zoom is 10 for all the pins, 14 for individual pins (using the ListPicker). CSV1 How to create fancy annotated map pins from a csv file and the associated maps. A maximum of about 30 map pins is possible using the annotated pins depending on the amount of annotation. The default map tile level zoom is 10 for all the pins and is selectable. The default is 14 for individual pins. The example is coded with the device location GPS block
disabled
.
Enable the block in your finished app. CSV2 How to create fancy annotated map pins from a csv file and the associated maps. A maximum of about 57 pins is possible using the annotated pins before the length of the url generated exceeds the 2048 character maximum Google allows. The default map tile level zoom is 10 for all the pins and is selectable. The default is 14 for individual pins. The example is coded with the device location GPS block
enabled
. You will probably not be able to display all the locations unless you set the zoom to 1. The
Magic Map Pins
app is constructed on a single screen with a
Spinner
(to select the demonstrations), a
WebViewer
(to render the map), the
Location Sensor
(to communicate with the device’s GPS receiver) and a
ListView/Button
to navigate. The objects required for each demonstration are placed in four
Vertical Arrangements
which are shown and hidden using the Visible property. Demo1
layout ‘screen’ Demo2
layout ‘screen’ CSV1
with annotated pins with a zoom of 10 Listpicker Options message CSV1
Location detail for School with a zoom of 14 CSV2
with simple pins with a zoom of 10 The AI2 Spinner behaviour is a source of minor issues when designing an app. Some developers recommend returning the Spinner to Index1 after making a selection. Returning to Index1 defeats the purpose of the Spinner; if the Index returns to 1, it will not display the current selection. The current Spinner Index is used for other functions in the app so do not return it to 1. Designer Screen The
Magic Map Pins
app screen looks like this during development: Some
Magic Maps Pins
tools and controls are shown in the graphic below. Circled in red, the GPS
button displays the Android Location settings screen. The blue
Update
button updates the User's’ GPS location on demand. The other GPS option is the
Auto Update Map checkbox. Checking the box turns
Clock1
on or off to allow or disallow a continuous update of the location GPS coordinates and plotting it to the map. The interval is set to 60 seconds (60000 ms) in the Designer. A Spinner shown on the right most graphic changes the zoom of the all locations map (1 is the entire World, ~23 is the highest detail, if available). The
ListView
choices map to the annotated map pins. The smaller, thick red circle next to the Magic Pins shows how many url characters are used on the display (the maximum characters Google allows is 2048). The maximum characters is approached with 30 or 57 pins depending on whether you annotate the pins. Exceed 2048 characters and the map will not render properly. The Blocks The aia file described below contains all the blocks. Four procedures contain the main code for the examples. Two of these procedures,
makeStaticMapWLS
and makeStaticMapWLS_simple
populate
Demo1
and
Demo2
. Ignore these procedures when building your app. D1 and D2 are only useful to provide a demo using location information from anywhere. The
makeStaticMapfromCSV
produces an annotated pin map from the loaded CSV file;
makeStaticMapfromCSV_Simple
makes a simple pin map. If you did the
AI2 Maps 101
tutorial, much of the code will be familiar. The annotateLocationList

procedure populates the
ListView
control. The collapsed block text is:
1School, 2Favorite Fast Food,3 Ball Park,4Marys House,5Pool,6My House,7Hobby Store,8Drive In
in the aia file. These are arbitrary names. Code what is necessary. Alternatively the map pin information could be placed in a csv File on the devices’ sdCard and manipulated with the File control. Use any text you want to describe your map pins. The number of items should be congruent with the number of locations in your csv map pin location file. The csv is hard coded in this app, use the
File
control to provide more flexibility to your app. The
Screen1.Initialize
block event handler sets basic parameters and loads a map pin location csv file from it reads from Media. The most importantProcedure is
makeStaticMapfromCSV
. The block that displays the device’s location is intentionally
disabled
in the aia provided. Create your own csv local data pins,
enable
the block to allow your GPS to display the device location along with the pin locations. Why is discussed later in the tutorial in
Potential Issues
. ListView1
contains the code to set the zoom for the single location map pins. The zoom is set by code to 10, you may want to change this to perhaps 14 for more map details to display. Potential Issues Map tiles cover a wide area at small zoom levels; at higher zoom levels, the tiles are of higher resolution and cover a small area. The zoom level determines the number of map tiles required to render the map. If the GPS location and the csv locations do not “fit” on the same map tile, t
he entire map does not display unless the zoom level is decreased. Reduce the zoom value until both the GPS location and the pins display. The Google Map API provides map tiles at various zoom levels. See the documentation at https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
for a discussion. Consequently, the block that will display the device location in
CSV1
and
CSV2
is disabled in the aia to avoid such a situation. If your device location is not in the same tile block as the coordinates provided for the pins in the tutorial, set the Zoom to 1 or perhaps a slightly larger value to display the sample data when you compile with your map pin data set.. Temporarily disabling the block allows all users to experiment with the app’s
default
map pin data set. Why do some of the screen displays created for this tutorial using the aia look different from the tutorial graphics? Some displays were made from a previous version of
Magic Map Pins
; the differences in the latest version of the aia and app are slight. CSV Location Store the locations you need to display as map pins in a CSV file. The file aiflatMap.csv contains the location information for the CSV demonstration pins. The green Location button displays ALL the pins on a map. The example csv file in the app looks like this: 49.682602,18.170002 49.682600,18.178000 49.672600,18.177300 49.682300,18.179200 49.672000,18.179200 49.676000,18.178000 The number of map pins can be displayed with a Static Map is limited. The Google Static Map URL can not have more than 2048 characters. The URL length restriction limits the pins to a maximum of about 57 if they are not colored or annotated pins or about 30 or fewer if the pins are annotated. Is an aia File included? Look for Magic_Map_Pins.aia on the main blog page. The aia source file is the
complete tutorial app aia. GPS The GPS receiver in your device must be turned on to use the app. The GPS button directs a user to the Android Settings on the device.
Are you done yet? 1) Make a “real” app. 2) Load the
annotatedPinList
(the list of pin destinations) using the
File
control instead of the hard coded csv used in the app. Pair the list with the csv pin list or use a csv file 3)
4)
5)
6)
7)
with both the IDs and location information. A single file with all the information requires “difficult” coding and care. Provide custom zoom levels precoded in a csv file for each pin. Use TextToSpeech (TTS) and your device to announce locations in your pin list. Place the location information in a csv file on the sdCard and code to add additional pins using input for the device. Allow Users to insert their own location information using
TextBoxes
. Perhaps store pin locations using a TinyDB rather than a csv? You are the developer. Add a function to calculate the distance from the device’s location to a particular pin using the
Haversine algorithm
to calculate a straight line, pointtopoint distance or (more complicated) using the
Google Map Location API
to provide driving instructions. Share your “real” app. Maps AI2 103 Preview The NonGoogle Maps tutorial may show a way construct/code a tracking map that does not require a network or WIFI connection coming eventually. Important Facts This tutorial and the app are copyrighted. Please do not slightly modify this tutorial and claim it as your own or post it on
Google Play
. Have fun with the static maps for personal use, use the algorithms and ideas in you own app and enjoy coding. This tutorial, images and
Magic Map Pins
are Copyright
© 2
015 by SJG. Some images might be Copyright Google Maps.