Retrieving GPS data from Firebase DB

I am trying to have MIT App Inventor connect to my Firebase that has a structure shown in the image below. How to I set up my code in the App Inventor to target the data here and display it? For example, how would I structure my code (both design and block components) so that it targets the latitude and longitude data from a specific date/time and display it in a text box? Would someone be willing to demonstrate some code that can make this happen?

Do you want to use the AI2 native Firebase component, or the REST api with the web component ?

The Firebase component under the experimental section of the design blocks. Hoepfully that makes sense. I apologize for any confusion I am very new to all of this.

Here are the basics. We get a list of date/times from sensor1 tags, the users selects a date/time, we then fetch the data for that date/time (which is return as a json/dictionary), we extract the lat/lon values and display these in labels...





Thank you! Any chance you could demonstrate how to take a map element and populate this data on it using markers? What I would like to do is be able to choose a date/time to pull GPS coordinates from and then display that data on a map with markers instead of the two labels as shown in your example. How could I modify the code you provided to do this?

... simple example

It looks like you are manually punching in the latitude and longitude data to get the marker to display on the map, is there a way for it to read from my database and automatically populate that information?

Actually there are many ways to use the latitude/longitude data to populate a Marker latitude/longitude. What have you tried?

  • the Novice programmer way = substitute your Label1.text Label2.text for the actual numbers
  • use a global variable
  • what you do depends on your existing code.

Here are some resources to help you learn to use the AI2 tools. A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook App Inventor 2 Book: Create Your Own Android Apps ... the links are at the bottom of the Web page. The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here Course In A Box and the aia files for the projects in the book are here: App Inventor 2 Book: Create Your Own Android Apps

How to do a lot of basic things with App Inventor are described here: How do you...? .

Also look here App inventor español. Offline. Tutorial. Ejemplos. Instalación. Códigos. Juegos. Curso gratis de App inventor. and here for more tutorials

Learn about components Component Reference
and visit the Library The MIT App Inventor Library: Documentation & Support Help>Library on the MENU

How could I do this with the code structure given as shown? If I create a button as you suggested and then duplicate and attach the blocks tied to my set label blocks (purple, pink, and orange involving dictionaries) it doesn't do anything. It won't even display the map element I put in.

Replace Label1.Text and Label2.Text with the Marker / PanTo method blocks

Assuming you have added a Map and a Marker component to your Design screen


To automatically post the Map, convert the Blocks to a Procedure and add the Procedure where you want the map to post. :cry:

The map is still not showing up. The two labels will display with the correct data, but the map will disappear once I hit the first button that creates the list of entries of dates/times I can select.


I copied this code exactly and I still don't see my map come up. Here is what I have on the designer side of things. Even if I move the map element out of the vertical arrangement it still doesn't display. What is happening? BTW I noticed in my blocks shot it is missing the set marker visible block, but even after adding that in it still doesn't work.

Set your Firebase GotValue value to a Label. What do you see ?

What do you mean? Like if I have it set up with the labels like in the original version of the code you provided yesterday? That was working fine. I was able to select the date/time and it would display the coordinates in the label elements. Right now when I load the app the map will display before I press the button to pull the data and generate the list of selectable dates/times, but once I hit the button and select a date/time to pull data from the map element disappears.

OK, this sounds more like a map/timing problem...

So I figured out that it works if I don't have the height/width of the map element set to fill parent and instead have it set to automatic, but if I do then the map disappears after pressing the button. Any ideas on how to make it display correctly or why this behavior might be happening? How do you have your map element set up on the designer end of things? I can see from your post that you have the map filling out the screen more and that is what I want it to look like ideally.

Usually, for demo purposes, I set the map to width = fill parent, height = 50%

That seems to have worked. Thank you! Last question: is there any way to configure things so that markers are generated on their own automatically within the code based on how many lat/long pairs are in the database? For example, right now I had to manually add a marker element in the design side to correspond to a single lat/long pair. What if I didn't know ahead of time how many lat/long pairs I might have? What if more pairs are added (or removed) into my database over time and I wanted the marker code to reflect that? Is it possible to have markers generated automatically to reflect changes made in the database? Hopefully this makes sense. Basically, I am trying to track equipment with gps sensors pushing data to my database and would like my app to be able to display the coordinates of each piece of equipment as it is added or removed from the database on its own without me having to go into my app code and manually add markers to the code.