This example will show you how to set up a content type that will allow you to upload a properly geocoded photo and have it automatically displayed with a Google Map showing its location.
The "properly geocoded photo" part can be tricky - some image editing software will strip out the location exif data from your photo when you modify the photo. I have had this happen on several occassions when attempting to upload photos from my iPhone after I modified the photo in iPhoto. Luckily, there are a couple of quick and free ways to verify that your photos are properly geotagged before uploading them.
To begin, download and install the following (the version I used is in parentheses):
- Drupal core (6.13)
- CCK (6.x-2.5)
- FileField (6.x-3.1)
- GMap Module (6.x-1.0)
- Image API (6.x-1.6)
- ImageCache (6.x-2.0-beta10)
- ImageField (6.x-3.1)
- GMap + Geo (HEAD, from CVS downloaded September 5, 2009)
- Geo (HEAD, from CVS, downloaded September 5, 2009)
- Geocode (HEAD, from CVS, downloaded September 5, 2009)
Then, enable the following modules:
- Content
- FileField
- Geocoded value
- ImageField
- Geo
- Geo + GMap
- Geo Data
- Geo Field
- Geocode
- ImageAPI
- ImageAPI GD2 (or ImageAPI ImageMagick, depending on your system)
- ImageCache
- ImageCache UI
- GMap
Next, some configuration of the modules. Go to the GMap configuration page (admin/settings/gmap) and enter your Google Maps API key (if you don't have one, instructions for getting a free key are available on the same page):
Then, create a new ImageCache preset to resize the photos you upload. I created an "article_image" preset that scaled images to 300 pixels wide:
You then need to create a content type for your photo and location data. For this example, I created a new content type, but you should be able to adapt these instructions to be able to add the two fields to any of your existing content types. Go ahead and create a new content type with the following properties (any properties not listed below can be left at their default values):
- Name: Photo
- Type: photo
- You're going to add two fields to the content type - one to hold the image and one to hold the location data. Go to the "Manage Fields" page for your new content type and add the following field:
- Label: Photo
- Field Name: photo
- Field type: File
- Form Element: Image
On the following configuration page, just check the "Required" box and then "Save field settings". Now you need to create the field that will store the location data that is extracted from the photo. This field won't be visible on the node's add/edit page - it will be populated automatically by the Geocode module.
- Label: Geospatial Data
- Field Name: geospatialdata
- Field Type: Geospatial data
- Form Element: Geocoded value from another field
The "Geocoded value from another field" is the important part - this field will be automatically populated from a geocoded value from the "Photo" field. You'll make that connection in the "Geospatial Data" field's configuration page. Check the "Photo" box in the "Photo settings" fieldset. This tells the "Geospatial Data" field where it is getting its data from. If your content type had multiple imagefields, you'd see multiple checkboxes. In this example, we only have the one. Set the rest of the configuration page with the following values:
- Geocode handler: geocode_imagefield
- Return value: point
- Data type: Point
Next, you need to set up how your two new fields will be displayed to the user. Go to your content type's "Display fields" page and set the "Photo" field display as follows:
- Label: Hidden
- Teaser: article_image image linked to node
- Full node: article_image image linked to image
Then, the Geospatial Data field display is configured as follows:
- Label: Hidden
- Teaser: Hidden
- Full Node: GMap
The "GMap" setting for the "Full node" is what will display a map with the location of the photo marked with a pin. The size of the map and its various attributes are controlled by the "Default map settings" on the main GMap configuration page (admin/settings/gmap). That's it, you should be good to upload a geocoded photo and have it automatically displayed with its location marked on a map!
