Implemented GPS based location checkins on my Drupal site #IndieWeb

I am obsessed with location tracking. I started using Foursquare more than 10 years ago on my Blackberry phone. I loved that app. It is still one of my favourite application. It was very popular for couple of years but then after the smart phone revolution (post Blackberry phase) I guess Foursquare lost its shine but they came back with their new service Swarm. I have not really restarted using Foursquare to the fullest yet however since the last few months I have been hooked to the IndieWeb principles.

I am trying very hard to post everything on my website and syndicating it elsewhere - POSSE. It is a good way to own your data and I don't see any reason why people should not follow IndieWeb principles.

Coming to the point of my obsession with GPS tracking. I do track lot of my actual physical location with either Garmin or an app on my Blackberry that continuously uploads a GPX file to my server but I still need to make it more usable. I used to use Google Latitude but we all know what happened to that and these days I am working on storing my GPS location on a regular interval in the background, without me pressing any button and I really want to also retrieve that location. For instance if I want to know "Where was I 3 years ago on this day at 4:00 PM?", On IndieWeb website I did find some great insights shared by Aaron Parecki and I am yet to fully implement and achieve what he is doing. He has open sourced his work and I can set it up as well but still I am not sure about the approach that I will take.

Anyways, so today what I did I implemented Geocoder and Geofield modules in Drupal. Install and enable both the modules and follow the instructions below.

Step 1

Create Geofield Field type called "Location" and add it in the Content Type of your choice. I added it in notes

Step 2

The "Geocode method" should be set to "No geocoding".

Step 3

Go to "Manage for display" of your Content Type and set the Widget of Location field to "Geofield Map".
Google Maps API Key: XXXXXXXXXXXXXXXX (Create your key and set it here)
Google Places Autocomplete Service: enabled
Map Library: Google Maps
Map Type: roadmap
Map Type Selector: enabled
Map Dimensions - Width: 100%; Height: 450px;
Zoom Levels - Start: 12; Focus: 16; Min: 1; Max: 22;
HTML5 Geolocation button: enabled
Click to find marker: enabled
Click to place marker: disabled
Geoaddress Field: - any -

I have enable Google Places Autocomplete Service because when I create a new node apart from choosing the location on the map I would also like to manually enter the venue name. It sometimes makes it simple sometimes. Also HTML5 Geolocation button is enabled so that it can pick the coordinates when I create a node from my Blackberry (Yeah!) browser.

Step 4

Go to "Manage display" of your Content Type and set the Format of Location field to "Geofield Google Map". You can modify various setting for the map as per your liking. I just changed the Start Zoom to 16.

And you are literally done but wait there is more. Yes few more sexy configurations to make this checkin thing little more fancy.

Step 5

Create one Address Field Type called "Address (field_address)" and set the "Geocode method" to "Reverse Geocode from a Geofield type existing field" and then under the "Reverse Geocode from an existing field" drop down select the "Location (field_location) [geofield]"

On the same page under the "Geocoder plugin(s)" select "GoogleMaps".

Using this Address field is optional but I also wanted to store the Venue's Company, Street address, Post town and Postal code because these fields are managed by just one "Address (field_address)" field. These fields are automatically populated based on the coordinates that you are setting in the "Location (field_location) [geofield]". Pretty neat. Though I had some issues sometimes when this Address field was not fully updated but the node was anyways saved with the location and that is what I needed.

Step 6

Create a view to display all the checkins with the map of course. I created a /checkins page view on this site. Since I am using my Notes Content Type so I just used the following "Filter Criteria".

Content: Location (not empty)

In the "Fields" section I added the "Content: Location" with "Formatter" set to "Geofield Google Map". Add more fields if you want.

This post is actually a note but I have written so much here, well that is the idea. I wanted to share this concept because if you want to also use similar technique of owning your checkins then this method can be very useful. To be honest I am not absolutely 100% sure how far I will take this but so far based on my 2 days of work I think I am satisfied. The next step would be to post checkins to my Foursquare whenever I add a node with location, vice versa can also be useful. This is what I did on my known site which I launched just few days back.

Amazing stuff, really happy with my holidays, doing what I love. I am so glad I starting spending more and more time with my first love again ;)