2016년 12월 20일 화요일

Maps Pins and Pop-Up pin information simplified for AI2 Users


Google's Fusion Table maps can be used to provide an immense amount of information about locations you provide for the map.  This Tip is a mini-tutorial about how an AI2 app can be created to provide lots of Map information and how you can make the map available to all users of your app.

There is very little AI2 coding.  You do have to create a fusion table map accessible to all users using Google's Fusion Table API   https://support.google.com/fusiontables/answer/2527132?hl=en

The Steps:
1)  Create a map using Google's Fusion Tables Maps:  https://support.google.com/fusiontables/answer/2527132   Create the table outside the Android and AI2 environment using your PC.  Yes, you can do it with Blocks, but building the table using the Fusion table page is so much easier.

2) The second piece.  You get to do this with AI2.  Place a button and a WebViewer on your Designer screen.  Add the following code Blocks:

Develop this App on your device.   You can do it on the emulator but then you have to sign in as a Google user.  Doing this on your device should avoid that for most if not all AI2 developers.

The url in the code block shown  in the WebViewer block does NOT link to a Fusion Table Map. You will link to your fusion table map later.   For a moment, use the url  as coded (   http://codeforsanfrancisco.org/Mobile-Fusion-Tables/demo-USHealthCenters.html  ).  The url points to  to a demonstration of a fusion table that shows some US Health Centers. The demonstration allows you to see what you will be able to do with a well designed fusion table map.

The demonstration works on your Android just like a well designed fusion table (described in #1). What you see is a demonstration .  The url does not link to an actual Fusion Table Map url.

3)  The third piece.  Assuming you already created a fusion table map ( create a table, as described in #1 above, including the html annotation) using your PC.View your fusion table map in your Window's browser,  note and copy the map's url from you browser's URL address box.  Copy the url into the block that now contains the demonstration url.   Yes, substitute your map url for the demo link).  What you paste is the url is a link to your fusion table map.

4) Lastly, run the app using the address of your table.

Using one of my table maps, here are the counties in the United States (instead of pins):

So are you ready to pin up?

Do you require more help with tables?   Visit https://github.com/sfbrigade/Mobile-Fusion-Tables .

Is this the entire thing?   Yes, except you probably will want to make your app pretty, add code to prevent your device's back button so it does not close the app etc.

Do you like this?   Consider donating a small amount to your favorite charity or  say something nice to someone you do not really like today?

--


댓글 없음:

댓글 쓰기