docâAI2 Static Maps 102â...the âMagic
download 
Report Transcription
âAI2 Static Maps 102â...the âMagic
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.
