use a csv file from google drive for a map on openstreetmap

494 views
Skip to first unread message

Christophe Tabard

unread,
Oct 27, 2018, 4:13:02 AM10/27/18
to MIT App Inventor Forum
Hi all,
Is it possible to use à .csv file from Google Drive for a map on Openstreet map or do I have to use a google map?
If yes, how can I do that?
Thx

TimAI2

unread,
Oct 27, 2018, 4:41:38 AM10/27/18
to MIT App Inventor Forum
The first part is easy enough, calling down a csv file from Google Drive:
Web Component
Either download the file and save it or just get the data from it and work with it. You will need to set "export?format=csv" at the end of your google sheet file link


What will be in the csv and how do you intend to use the data with Maps ?

SteveJG

unread,
Oct 27, 2018, 8:19:55 AM10/27/18
to MIT App Inventor Forum
If the csv file has latitude / longitude coordinates once you import the file from Google Drive, the latitude / longitude pairs can be used to plot markers 
on either a Google Map (using Google's Static Map Api and creating an appropriate url script) or using the MIT Map control for an OpenStreetMap tile.

Search for examples in the Forum  for    Google Static Map    or   Map component using the Search for messages box at the top of this page.  There are plenty of examples, none however that do exactly what you want to do.

You can create a List of geocoordinates from the csv and use that as the basis to plot the locations associated with them on either type of map tile.

Regards,
Steve

Christophe Tabard

unread,
Oct 27, 2018, 8:44:23 AM10/27/18
to MIT App Inventor Forum
A big thx again to you both TIM and STEVE!
Thx a lot for your precious advice!!

Christophe Tabard

unread,
Oct 28, 2018, 11:58:57 AM10/28/18
to MIT App Inventor Forum
Hey Steve,
I'm really a noob.
Can't find any simple examples of how to import my csv file for a map (openstreet map)
I've had no problem to do it with the webViewer (and put the URL in the properties) but by this way, I can't find my current location. I cannot use the geoloc tip you gave me to see the user location and don't know why the LocationSensor doesn't indicate my Location. I want the user to see his location, wherever he is...
Any idea or links to help me?
Thx

SteveJG

unread,
Oct 28, 2018, 12:55:42 PM10/28/18
to MIT App Inventor Forum
Ok, what have you tried?  There are some simple examples (but not tutorials ... just keep looking through all the posts in the Forum that contain   Map component    and you should be fine)What does your csv 'look like' (this is important to know how to handle the location data)?

MIT has not yet posted a basic tutorial about how to use the MIT Map components so to no longer be a NOOB a developer has to get educated by his/her self.

If a person is going to use the Map stuff, he/she needs to know this is probably the most complex of any of AI2's controls.  The documentation 
is   
    I recommend anyone working Map read it ALL, even though they may only need parts.

When you read the documentation, you probably will know the Map component can be used two ways.
1.)   Stand alone.  Map has its own location sensor build in
2.)   Using Map in conjunction with the 'traditional' LocationSensor control
Each way requires coding the basic Map to work in slightly different ways.   This example shows how to use the second method to show the user's location and to update using the LocationSensor.LocationChanged event handler.  The example will get you started with using Map.  The example is not annotated so you have to experiment to understand how it works.  It has some advanced techniques you probably don't need to fancy up the display and what Map can do.

Show user location:   have you considered using the  set Map1.ShowUser  to  true?

CSV for a map:   many ways to do this, depending on how you code a csv (which must be converted in the app into a List to extract the latitude and longitude so they can be posted to a 
call Map1.CreateMarker block. so that the geocoordinates can be used to create run time Markers.   They can also be used with design time Markers.  A 'trick' not discussed in the documentation needed to use the run time Markers is to first place a single design time Marker on the Designer and set its Visible property to false.

Here is an example using the following csv text file 35.01, -96.892\n35.09, -96.892\n35.71 ,-96.892\n35.09, -96.6     showing four locations in Oklahoma.  To get this to display I think you will need to set the map center in the Designer    CenterFromString    to  35,-96.89  or something similar.

runtimeMapMarkersfromCSV.PNG


If I were learning, I would create a new Project, slap a Map control on the screen a recreate these blocks and see what happens.  Be aware, there are many other ways to use a csv file to populate MIT Map markers.

You said "don't know why the LocationSensor doesn't indicate my Location.', neither do I.  You did not share your blocks Christophe.  This is a complex tool for Advanced users...keep at it and move from beginner to intermediate to Advanced.  

Regards,
Steve





Christophe Tabard

unread,
Oct 29, 2018, 6:00:53 AM10/29/18
to mitappinv...@googlegroups.com
Hey STEVE,
Thank you for your patience and pedagogy.

I admit I haven't been very clear in my explication so I'm going to explain step by step what I want and what I've done.

What I want?
The purpose seems pretty simple. I want a map with the user location and hundreds of markers. When you click on any marker, you have several information (phone number, Direction, name of the center) in the infobox.

What I've done:

1) Using the Map Component, I've placed my markers one by one. Filling the information for each one of them. For the user location, I've used the method you explained me (thx again). The result was great, exactly what I wanted (see attached 1 and 2). BUT, when the number of markers reached more than 150, the install on my phone blocked and turned it off. Too many markers.
Then I decided to try something else.

2) I had read somewhere about using the coordinates  (long and lat) with a CSV file. Ok, I've searched and notice that Google drive allowed to do this kind of things. Then, in Google drive I've set up my CSV with Long., Lat, Name of the center, Address and Phone number. After, in the AI2, I've used the webviewer and gave the URL of my fusion Table. Great! (See attached 3,4,5) I have all my markers with info in the infobox. BUT, I don't see my location. By searching, it seems that I need an API KEY or something like that. But I have to pay. Before it was free. 

That's why I'm on the 3)

3) Is it posible, with the map component, to use a CSV file to import all the GPS Coordinates and the info for the infobox? Exactly like the web viewer does?

Here's where I am. It seems pretty simple, in theory. I don't want to track someone, use videos, shake my phone, use voice or I don't know what I can read on the forum and even I don't undertand the questions, so complicate.
Just a simple map with the user location and hundreds of markers with info in the infobox.

I'm going to read again all the forum questions, the tutos on youtube and test this step by step.

Thanks again for your patience
All the best
Cris
5_webviewer_Screen.png
4_webviewer_Blocks.png
3_webviewer_Designer.png
2_Geoloc_OSM_Screen.png
1_Geoloc_OSM_Blocks.png

TimAI2

unread,
Oct 29, 2018, 9:27:55 AM10/29/18
to MIT App Inventor Forum
quote:

"when the number of markers reached more than 150, the install on my phone blocked and turned it off"

Is there a limit to the number of markers MIT AppInventor?


What you might consider doing is understand the user's location before loading all the markers, and then only load markers within a defined set of bounds around the user's location, thereby keeping the number of loaded markers to an acceptable level. More coding, but may be a more usable solution?

TimAI2

unread,
Oct 29, 2018, 9:55:32 AM10/29/18
to MIT App Inventor Forum
Hmmm just been doing some further reading, and wonder if using geoJSON in a feature collection might be the answer ? - or is it still broken ?

SteveJG

unread,
Oct 29, 2018, 10:21:02 AM10/29/18
to mitappinv...@googlegroups.com
@Tim  The limit the number of Markers is on the order of 7,000 or so, depending how the developer creates them.Read this discussion

The FeatureCollection is still broken.

What Cris wants to do can be achieved using run time (the one's created using the call Map1.CreateMarker)  instead of design time markers if he uses the Map component. Too many design time markers is creating a memory problem for him.  He needs to use run time markers.   Alternatively to using MIT Map  he can use a FusionTable Map...he has already done that but stumbled because he was not able to post the user's location on that map.   He needs to do is post the geocoordinates to the FusionTable periodically using a Clock.  That is fairly complex so he is attempting alternative methods.

Regards,
Steve

Christophe Tabard

unread,
Oct 29, 2018, 11:01:56 AM10/29/18
to MIT App Inventor Forum
Hello guys,
Thank you for beeing attentive to my problem.
With the Create Marker, can I extract the datas from a csv file?
I've been searching on the forum and everywhere and haven't find someting similar to my case.
Still searching...

SteveJG

unread,
Oct 29, 2018, 11:06:17 AM10/29/18
to MIT App Inventor Forum
You searched Cris?   Did you not read my post of October 28.   The basic blocks were posted showing how to use the Create Marker with a simple csv file to create run time Markers along with some simple 'instructions'.  You did not try this?

Regards,
Steve

Christophe Tabard

unread,
Oct 29, 2018, 11:51:38 AM10/29/18
to MIT App Inventor Forum
Hey Steve,
Yes, Ive read your post and seen the example but...
It means that I have, first, to create a csv file named global coordinateCSV with the 4 coordinates?

Don't you have the .aia?

And concerning the set global coordinateCSV, if I have 500 coordinates, I'll have to enter them one by one?
Sorry to be a noob

SteveJG

unread,
Oct 29, 2018, 12:25:58 PM10/29/18
to MIT App Inventor Forum
Cris,

Yes, you first have to create a csv file to test  the example.  The comments show how. You can copy and past the example csv into the red block.  Alternatively add a file you create from that text to Media and load the file you create into the variable coordinateCSV using the File component.  You will need to do that if you have 500 data points instead of 4.  Try the example information before you try entering your own data.


 Once you understand how to work with four locations, you can build for more.  Build for four and make sure the code works.   If you are interested and want to learn, place a Map component on a fresh Project, place a button and enter the code of the example.  Be sure to set the CenterFromString.  Then you can post an aia or you can wait for someone to do it for you.  The idea is the developer becomes familiar with the required blocks. If you get stuck, someone will help you.

When you have 500 coordinates,  create the csv string following the example format. 

You probably have other things associated with the geocoordinates.  They can be included for future used by adding another item into the csv table in your csv to later use to populate Lists required to do some really neat things with the Map control.  You can do this using a Text editor outside of AI2 .  Before you create 500 items in your csv, make sure your csv model works.  :)    What do I mean?   35.01, -96.892\n35.09, -96.892\n35.71 ,-96.892\n35.09, -96.6     becomes perhaps  35.01, -96.892,Tom,London\n35.09, -96.892,Ann, Chicago\n35.71 ,-96.892, Cris, Madrid\n35.09, -96.6, Lee, Hong_Kong   An advanced developer can use the names and cities to populate the Marker Text and Description 

How to do that?  What needs to be done is very complex and involves using the Marker Any Component tools.  Do you know how to use them?

My advice is get a basic app running with only a few Markers and then show what you did and ask specific questions after posting your aia perhaps?


Christophe Tabard

unread,
Oct 29, 2018, 1:12:20 PM10/29/18
to MIT App Inventor Forum
Hey Steeve,

I've done it but I have a RUNTIME ERROR
Unable to load SVG from Assets

:(
CoordinateCSV_Designer.png
coordinateCSV_Block.png
CSV.png

Christophe Tabard

unread,
Oct 29, 2018, 1:57:07 PM10/29/18
to MIT App Inventor Forum
Hey Steeve,
Got it! yeah!!!!
The initialise global were not good (replace True by Create empty list), héhé
And I've put a marker non visible.

I'm going to play with that and grow up as a noob devloper... thx again for your help.
See you soon I'm sure
Regards

TimAI2

unread,
Oct 29, 2018, 1:58:32 PM10/29/18
to MIT App Inventor Forum
Had a little play as well, to learn about maps and markers
The attached effort uses a google sheet as csv
fills the infobox with info and a url, which is selected on a long click to display a web page
also a notifier to advise the user to be patient, and wait for their location to appear!

BLOCKS

blocksmapmarkers.png


SCREEN


screenmapmarkers.png


Google Sheet is public so it should work for you too



mapmarkercsv.aia

Christophe Tabard

unread,
Oct 29, 2018, 2:44:40 PM10/29/18
to MIT App Inventor Forum
Great job Tim!!!
Can you attach the csv plizzzz
You've done a fantastic work, it's going to help me a lot!!!
Thanks to you and STEEVE for your patience!!

TimAI2

unread,
Oct 29, 2018, 6:32:30 PM10/29/18
to MIT App Inventor Forum
The google sheet url is in the  green web1.Url block

Please leave this as it is, create your own sheet if using different parameters in your csv.

Christophe Tabard

unread,
Oct 31, 2018, 7:17:38 AM10/31/18
to MIT App Inventor Forum
Hey TIM,
Just to thank you again for your time and patience.
I've spent all the day, yesterday to play with the blocks.
I've left your google sheet as it is and created mines.
I'm really happy!
Thanks again and see you soon for other questions (I have several but I prefere test and try and search before)
Regards
Cris
Reply all
Reply to author
Forward
0 new messages