Build a Mobile App to Geo Tag a Photo

Category:

In this tutorial we'll explore how to build a mobile application that can take a photograph and save it onto a website with the current latitude and longitude coordinates.

The website will be powered by Drupal 7. The mobile application will be built using DrupalGap, which is powered by PhoneGapjQueryMobile and Drupal Services.

Did I mention all of this can be accomplished by writing zero lines of code? Well then, let's get started!

1. Download and Install Drupal 7

2. Download and Install the DrupalGap Module

3. Download and Install the Geofield Module

4. Create a Content Type with an Image Field

By default, Drupal comes with the "Article" content type, and it already has an Image Field. For simplicity we'll use the "Article" content type throughout the tutorial. Feel free to create a custom content type and image field for your needs.

5. Add a Geofield to the Content Type

In Drupal, go to admin/structure/types/manage/article/fields and add a new field with these values:

  • Label: Position
  • Machine Name: field_position
  • Field Type: Geofield
  • Widget: Latitude / Longitude

Click the "Save" button, then click the "Save field settings" button, and finally click the "Save settings" button at the bottom of the form. We'll just use all the default values provided for this tutorial, but feel free to adjust them.

6. Download and Install the DrupalGap Mobile Application Development Kit

Note, at the time of writing this, the development snapshot needs to be downloaded.

During the installation process, it is recommended to use a mobile device with Option 2 when setting up the PhoneGap environment. This will allow you to compile the app directly to your device. Chances are your mobile device has a camera and GPS features. Alternatively, you may use Ripple or an emulator/simulator to build the app, but they may or may not have camera and GPS features, depending on your system's setup.

7. Add the DrupalGap Geofield Module to the Mobile App

Download the Geofield module for DrupalGap, and add it to your app's settings.js file:

Drupal.modules.contrib['geofield'] = {};

8. Run the Mobile Application

Once the app loads, it should look something like this:

9. Login with the App to the Drupal Website

10. Create an Article with an Image and Geo Tag it

After logging in, click the "Content" button to go to the "node/add" page. Here you'll see a list of Content Types you have permission to create, the app page will look something like this:

Click the "article" button to go to the node creation form (node/add/article). Use this form to fill in the Title of your Article, and then either press the "Take Photo" to snap a new picture, or press the "Browse" button to locate an image on your device.

As you scroll down the form, you'll be presented with the Geofield input as well. Make sure your device's GPS feature is enabled, then press the "Get current position" button to have your coordinates auto filled in the form fields:

11. Save the Article with the Image and Coordinates

Finally, click the "Save" button to have your image automatically uploaded to the server and attached to the Article node with the latitutude and longitude coordinates.

12. Conclusion

This tutorial shows how easy it is to build a mobile app to geo tag an image. We really didn't have to write any of our own custom code to make this happen.

DrupalGap is an open source mobile application development kit, so it can be totally customized to meet your needs. This was just a demonstration of "out-of-the-box" features available for DrupalGap.

A big thank you goes out to all of the tools that made this possible:

  • Drupal 7
  • PhoneGap
  • jQueryMobile
  • Drupal Services Module
  • Drupal Geofield Module

Enjoy!

Comments

This a great! Thanks so much for this and all the screenshots.

One link went missing (in that it became bold text rather than a hyperlink):

development snapshot needs to be downloaded."

Do you refer to the dev snapshot of the "DrupalGap Mobile App Dev Kit"?

 

Thanks, I've updated the text to point to the development snapshot of the mobile app dev kit: https://github.com/signalpoint/DrupalGap/archive/7.x-1.x-alpha.zip

Hi I tried this out but the geolocations are not saving on the node.  . i was wondering how to go about troubleshooting this ?

Just yesterday I created a debug information page:

http://www.drupalgap.org/node/211

Or stop by the support page for other topics, and we'll be able to figure out what is going on:

http://www.drupalgap.org/support

Be sure to use the latest development snapshot of the SDK.