Location Awareness via the iPhone Meets Geofinder for ExpressionEngine

I've been planning on adding location awareness handling to Geofinder for some time and recently did just that.

For this post, we will focus on using the iPhone to implement this functionality, but it can certainly be used for other webkit based mobile browsers. I use the Geofinder Music Venue demo as our example.

Getting Started with iPhone Web Development

Building iPhone friendly versions of your website is not as difficult as you might think. Luckily, there is jQTouch to give you a starting point and handle lots of the heavy lifting. You’ll want to use one of jQTouch’s themes files as a starting point for your project. Doing so will save you lots of time. Simply customize the CSS to match your design.

I happen to have the iPhone SDK installed on my laptop and it comes with an iPhone simulator. It can be a bit tricky to track down the simulator. My simulator is installed at /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.

If you don’t have the iPhone SDK you could use Safari to test, but you won’t be able to perform the location awareness bit since it’s not enabled in the current version (4) of Safari.

The Search Form

For our example, we are going to present the user with a form and allow them to use their current location or type in a location to search by. Getting a user’s location is made possible with a small bit of javascript.

navigator.geolocation.getCurrentPosition(handler, showError, {enableHighAccuracy:true, maximumAge:600000});

The javascript calls a handler function, which retrieves the user’s latitude/longitude data. If there is an error or the user’s browser doesn’t support location awareness then showError is called. There are also some options you can pass in enableHighAccuracy, maximumAge, etc.

When you use exp:geofinder:simple_search to generate a Geofinder form it adds two hidden fields to the page. One called user_lat and the other is user_lng. Our javascript needs to populate these two hidden fields with the user’s location so that Geofinder knows we are doing a location awareness search.

Here is the complete form template code:

{exp:geofinder:simple_form id="geofinder" result_page="/m/results"}
        <div class="toolbar">
            <h1>Geofinder Demo</h1>
            <a class="back" href="#home">Back</a>
        </div>
		<div class="content form">
			<h2>Music Venues Near You</h2>
			<p class="form"><input type="text" name="geoquery" value="" placeholder="Address, city, state or zip" /></p>
			<p><span id="get_location">or <a href="#" id="get_location">Use Your Current Location</a></span></p>
			<p><select name="radius">
				<option value="100">100 miles</option>
				<option value="250">250 miles</option>
				<option value="500">500 miles</option>
			</select></p>
        	<p><a href="#" class="submit grayButton loading">Search</a></p>
		</div>
    {/exp:geofinder:simple_form}

Notice that the code above uses a normal link tag with a class of “submit” instead of a normal submit button. This is a requirement since we are using jQTouch. I really couldn’t find any documentation to tell why, but it works and that’s how the demo jQTouch code works.

The Results Page

You’ll notice our form code result_page is using “/m/results” to render our results. Our template code on the results page is:

<div id="results">
            <div class="toolbar">
                <h1>Results</h1>
            	<a class="back" href="#geofinder">Back</a>
            </div>
			<ul class="edgetoedge">{exp:geofinder:location_results weblog="venues" status="open" limit="10" geoquery="{segment_3}" radius="{segment_4}" latitude="{cf_venue_latitude}" longitude="{cf_venue_longitude}" google_maps_api_key="{google_maps_api_key}" distance_mode="miles" disable="member_data|category_fields|trackbacks"}
				<li><a target="_blank" href="http://maps.google.com/maps?q={cf_venue_address},{cf_venue_city},{cf_venue_state},{cf_venue_zip}">{title}<small>{distance} miles</small></a></li>
				{if no_results}<li>No results found.</li>{/if}
			{/exp:geofinder:location_results}</ul>
	</div>

Segment_3 is where our user’s location coordinates or the typed in location will be populated from. We also build our links for each result so they integrate with the maps application that comes with the iPhone. A user gets to the results page, and when they touch one of the results it will open up the maps application.

Recap

As you can see, it’s not difficult to integrate Geofinder into an iPhone enabled website. The value it brings to user’s of your website is well worth the development time. You can view the full demo/example on your iPhone at http://natural-logic.com/m.