Select Page

With LocationSensor component you can build an app that can provide you with your current location information. Say you are going to some place you are not familiar with. We will create an app where you can save your current location and then go where you need to go, if you think you are lost along the way, the app can show you how far you have come from the point when you saved your last location information. We will name that app – Where Am I. This is how our app would look like-


Let’s build our interface in the Designer/Viewer window. On your browser, go to My Projects and create a new app. Name it whatever you like. I named it WhereAmI.

The design view of our app should look somewhat like this-

UI Screenshot

As you can see I renamed default names of some of the components App Inventor provides. It’s upto you what you want to name the components you use. If you are having hard time designing the UI, download the source file WhereAmI and take a look. What matters is that you have all the essential components as shown in the UI screenshot above.

LocationSensor has an event called LocationChanged that gets triggered every time location changes which can be triggered by a user movement. We use that event to get and display current location information. We also change our canSave variable’s value to true so that the user would be able to save their current location information later on a TinyDB. When the user asks to save the information on current location, we first check if there is any location information by checking the value of canSave variable. If there is, we store the value of current address, latitude, and longitude in tiny db with unique tags. We will need those tags to retrieve the saved values. If we don’t have any location information, we simply notify the user stating so.

Location Changed Event

What we need to do when our app loads on a device is to show the previously saved location information. We can get those values from tiny db using the tags we used to save in SaveButton.Click event. Note that Screen1.Initialize event is the first event that gets triggered when an app boots up on a device. In that event, we also set the Action, ActivityPackage, and ActivityClass properties of our ActivityStarter component so that we can launch Google Map on a web browser.

You can see a list of actions in this page.

On Screen Initialization

Finally, we need to form our map address to launch the browser with. If they stored a location information, we would show the direction using their current location and the location they saved.

Map Button Click Event

We used make text to build the URL. saddr points to user’s current location and daddr points to user’s previous saved location. For both, we need to pass Latitude and Longitude respectively with a comma in between. If no previous location is saved, the map would display with the default latitude and longitude we provided which is 1000. You can put any default values you prefer. Note that our URL is attached to DataUri property of the ActivityStarter. After we are done forming the URL, we simply start our ActivityStarter.

And..we are DONE!

Here’s the project file for download- WhereAmI