Drupal - Build a Mobile App to Geo Locate Node Content

In this tutorial we will explore how to build a mobile application for Android (iOS, iPhone, iPad) using PhoneGap and jQueryMobile that can be used to geo locate node content from a Drupal website. The mobile application will lookup the user's current location, then ask Drupal for a list of content closest to that user's location.

Tutorial Components

Drupal 7.x

PhoneGap 2.x

jQueryMobile 1.2

Before getting started, it is highly recommended you are familiar with the 'Hello World' for PhoneGap.

After you've downloaded and enabled all these modules, let's flush Drupal's cache, twice (just to be safe, safety first)!

3. Create a Drupal Content Type with a Location Field

We will need a content type in Drupal that has a Location Field on it. In this example we'll create a content type called 'Building' (with a machine name of: building) then we will add a Location Field to it called Location (with a machine name of: field_building_location).

Add Content Type (admin/structure/types/add)

Use default settings

Add Location Field to New Content Type (admin/structure/types/manage/building/fields)

Now that we have a content type setup with a location field, let's create some nodes with locations. Go to node/add and click on your new content type. Now fill out the node creation form fields:

Node Title

Location (screen shot)

Location name

Street

Additional

City

State/Province

Postal code

Country

Latitude (optional)

Longitude (optional)

I would recommend adding at least 5 different nodes with real locations nearby your actual location. That way when we use geo-location later, we can find content near you.

Note, you can acquire latitude and longitude data for a location with Google Maps. Just right click on the desired location on the map, then click "What's here?" and that will place the lat/lng coordinates in the Map's text field.

5. Create a Drupal View to Retrieve Geo Located Content

Let's now create a new view to handle locating our Building nodes. Go to admin/structure/views/add and create a new view with the following settings:

Next up we need to add a contextual filter to our view. This will allow us to send our coordinates to the view so it can return to us the Buildings that are closest to us. For example, add this contextual filter for All Displays:

For this example, our current location will be at Bandemer Park in Ann Arbor, Michigan. The approximate latitude and longitude is:

42.299691

-83.743207

Now that we have our coordinates, we can pass them in as a contextual filter to our view so we can retrieve the nodes that are closes to us. When passing in our coordinates we also need to give a distance range of how far we would like the result set to span. So, let's say for example we wanted a list of nodes within 10 miles of our current position. We would then pass this as our contextual argument to the view:

42.299691,-83.743207_10

The "_10" specifies the 10 mile range. We can now take this input and place it into the "Preview with contextual filters" text field at the bottom of our view:

Click on 'Settings' next to 'JSON data document' under the view 'Format' section. There you need to un-checked the 'Views API mode' checkbox. If you don't do this, your JSON output will be rendered into a Drupal HTML page instead of being output as only JSON.

5g. Save the View and Test it Out

OK, you can finally click 'Save' on your view and test it out.

After saving your view, open the following example URL in your browser:

If you haven't already done so, you'll need to download and install Eclipse, setup the Android Emulator in Eclipse and have PhoneGap setup to run on your Android Emulator. Please refer to these tutorials for more information:

We will need a custom javascript file to handle mobile application events and for communicating with Drupal. Create a javascript file called drupal_geo_locate.js inside the assets/www directory of your PhoneGap mobile application.

Best looking mobile application ever, right? OK, let's spice it up a bit with some jQueryMobile.

10. Create a jQueryMobile Dashboard Page with One Button

Next up, let's use jQueryMobile to add a page to our mobile application. We will call this page the Dashboard and add one button to it. When that button is clicked, we will handle the click event by retrieving our current geo location using PhoneGap.

From the example code above, we create a jQueryMobile page with an id of "dashboard", included our custom drupal_geo_locate.js file, added a button to initiate the geo location, and an empty paragraph to store result messages. Now when we run our mobile app, it will look something like this:

In our custom javascript file drupal_geo_locate.js, we'll add some code to handle the click on the button. When the click happens, we'll use PhoneGap to determine our current geo location. Add this code to your drupal_geo_locate.js file:

Now when we click our button, the mobile app will try to determine our current location. However, since we are in an emulator, after clicking the button, the mobile app will just wait and wait trying to retrieve our geo location. Instead, we need to take an extra step so our geo location can be determined, see step 12. If you are compiling the application straight to a mobile device, then you can skip the next step because your device does actually have a geo location, as opposed to an emulator which just has a simulated location.

If you are following along with this tutorial and using an Android Emulator, you may be wondering what the Geo Coordinates of your emulator are. Well, that is up to you. You need to simulate them using DDMS in Eclipse:

Window -> Open Perspective -> DDMS

In the 'Quick Access' search bar in DDMS, search for 'Emulator Control' and click on it when it appears

Scroll down to the 'Location Controls' section on the 'Emulator Control' tab

Now that our onSuccess function is getting called when our geo location coordinates are retrieved via PhoneGap, let's make a call to our Drupal view and send along our latitude, langitude, and the range (in miles) we would like to search for nearby buildings.

We can see a small taste of the cool things we can do with these tools. Drupal and PhoneGap with jQuery and jQueryMobile can be used to create all kinds of mobile applications. Good luck in your coding adventures!