Tutorial #5 – Advanced GeoLocation

---

Step 1

To get started, create a new project from scratch. Give your default view a nice background color (we’ve chosen green in this example), and drop on 3 new labels.

1. “Where the bloody hell am I” – call this title label in the name attribute
2. “Location name” – call this location name placeholder
3. “coordinates” – call this coordinates placeholder

 

---

Step 2

Next up, we want to give our application the ability to know where we are. Do this by dragging a GeoLocation control onto the stage.

You should see a geolocation control appear off the stage in the non-visible components area.

 

---

Step 3

The geolocation control needs to be told when to fetch your co-ordinates. This is handy because you might want to update where your user is repeatedly, rather than just once when you first launch the application. However, in our case, we want to find our current location when the view is first loaded. To do this,

1. Select your default view in the project explorer
2. Go to the ‘Actions’ tab of the inspector
3. Drag ‘loaded’ onto ‘geolocation’ and select ‘Fetch location’

 

---

Step 4

When the GeoLocation control runs, it will do one of 2 things:

1. Trigger a ‘Location Did update’ event if it successfully gets your details
2. Trigger a ‘Location fetch error’ if the user disallows the application from retrieving their GPS location, or if they don’t have a GPS

For simplicity in this tutorial, we’re going to assume that the act of fetching a location does work, and when it does, we want to update the ‘coorinates placeholder’ label with the GPS co-ordinates we just acquired. To do this, simply select the geolocation control, select ‘actions’ in the inspector, and drag from ‘Location Did Update’ onto the ‘coordinates’ placeholder label in the project explorer.

Select “Set Text”.
Now, we want to update this label’s text, with the location we just got, so to finish off the action, drag from the geolocation’s ‘Current location’ attribute onto the ‘value’ field for this update.

This should be enough to tell you where your geographic co-ordinates are.

 

---

Step 5

It’s now time to hit ‘publish’ and test this on your device to see that it’s wired up properly:

 

---

Step 6

It’s all well-and-good showing the user their co-ordinates on a label, but what if we wanted to tell them where they are as a placename? This can be achieved through passing our current location through our geocoding data accessor.To use the geo datasource, drag a data accessor onto the stage.

This will appear below your geolocation control in the view’s non-visible components area

 

---

Step 7

We need to setup this data accessor such that it uses our ‘geolocation’ data source.

The geolocation data source behaves somewhat differently to the data sources you may have become accustomed to in MobileNation via uploading csv, kml or rss feeds, in the sense that it will only display useful data when a filter is applied to it.

We can use the geolocation datasource to perform the following operations:

• Get a place name by setting a filter on the location to a set of co-ordinates
• Get a set of co-ordinates by setting a filter on the place_name column

In our situation we want to get a place name, so we’ll reveal the ‘Filters’ panel in our Inspector, and click ‘Add Filter’

We want to filter on the ‘location’ column, and we want to set an exact location of where we are as follows

You should see that the addition of this filter has added some extra nodes to our project explorer as seen below

 

---

Step 8

Next up, we want to wire up this filter with our current location which we get from the geolocation control’s ‘view did update’ event. To do this, reselect the geolocation control, and go to the actions panel.

Drag from the ‘location did update’ event onto the ‘value’ attribute of our newly created filter

Select ‘Set Value‘

We then want to set the value of this filter to our current location:

And then tell the data source to update because we’ve set a filter:

Recapping at this point, our view loads up, we’ve told the geolocation wiget to find out where we are, when it figures this out, it then feeds that into our geolocation data source to figure out the placename of where we are.

 

---

Step 9

Next we want to set our ‘location name’ placeholder to the filtered value we received from the data source.

The data accessor fires a ‘Value changed’ event every time it receives new data. We want to wire up our application to show the location name by dragging from ‘value changed’ on the accessor, to our location placeholder and then selecting ‘set text’.

The data accessor field has 2 columns, which can be seen by expanding out the ‘columns’ node on the data accessor:

We obviously want to connect the ‘place_name’ column to be rendered directly onto the location placeholder label:

 

---

And that’s it! An advanced application with reverse geocoding capabilities. We’ve put this tutorial online as a template, which you can use as the basis for other applications. We’ve tried to illustrate the power of the geo control, and how it can be used to geo-filter datasources. In our next tutorial, we’ll show you a little bit more on geofiltering.