Geolocation and Beer

&Beer GeoLocation @NeilCrosby

I’m Neil Crosby (everywhere)

I work for the BBC http://www.ﬂickr.com/photos/captaintim/3117409726/

On the homepage

I did the location stuff

But that’s boring

There’s no beer http://www.ﬂickr.com/photos/mehan/3979975563/

And no geolocation http://www.ﬂickr.com/photos/irisheyes/17560846/

What will I talk about? Building beernear.me “A simple weekend project to learn about geolocation”

So? • Location ﬁnding using navigator.geolocation • Translating lat/lon to an address • Static google maps http://www.ﬂickr.com/photos/yersinia/2051806493/

navigator.geolocation support • Firefox 3.5+ • Mobile Safari • Chrome(ish)

Other APIs are available Geode (Firefox 3.1) Loki (Skyhook plugin) Google Gears http://www.ﬂickr.com/photos/st3f4n/4482211416/

geolocation if (navigator.geolocation) { // do geolocation } else { // say sorry to the user } http://www.ﬂickr.com/photos/fweez/278017185/

Find the user’s location nav….geo….getCurrentPosition( foundLocationFunc, noLocationFunc, { enableHighAccuracy: true, maximumAge: 120000 } ); http://www.ﬂickr.com/photos/clevergrrl/218312595/

Keep ﬁnding the user nav….geo….watchPosition( foundLocationFunc, noLocationFunc, { enableHighAccuracy: true, maximumAge: 120000 } ); http://www.ﬂickr.com/photos/pierrickblons/4496055947/

You’ve got a location! http://dev.w3.org/geo/api/spec-source.html#position_interface function foundLocationFunc(position) { // position.coords.latitude // position.coords.longitude // position.coords.accuracy // and more… } http://www.ﬂickr.com/photos/merlijnhoek/2789604490/

• But we only know a lat/lon. • Where is the user really? http://www.ﬂickr.com/photos/ancawonka/116484666/

Getting an address http://ajax.googleapis.com /ajax/services/search/local ?v=1.0 &q=lat,lon &key=yourkey http://www.ﬂickr.com/photos/csessums/4415113131/

Blob of location data {"responseData": {"results":[{ … "title":"Kelly Langley…", "streetAddress":"Cowley Rd, Cavendish House…", "city":"Cambridge", … }]}} http://www.ﬂickr.com/photos/locator/948390609/

Awesome! So we can tell the user where they are. How about a static map? http://www.ﬂickr.com/photos/clintjcl/3657971496/

Why a static map? Reduced load for iPhone users. http://www.ﬂickr.com/photos/petereed/496392956/

Getting a static map http://maps.google.com/maps/ api/staticmap ?sensor=true &size=320x300&zoom=15 &maptype=roadmap &mobile=true &center=lat,lon http://www.ﬂickr.com/photos/manitobamaps/2340939496/

Yay! A Map!

Custom markers markers= icon:http%3A%2F%2Fbeernear.me %2Fimg.png |shadow:false |52.2282962,0.1537945 |52.134152,-0.486364 http://www.ﬂickr.com/photos/denisgiles/4291494985/

Put it all together

First, the iPhone asks for permission because we used getCurrentPosition

We say “thanks for sharing” because getCurrentPosition returned successfully.

Send lat/lon to google. Translate to address.

Then accuracy improves and we do the same again.

Click through. We have beer!

Where’s the beer? There’s the beer!

Further Reading • W3 geolocation documentation • Google Static Maps API • Google Local Search API • My blog - The Code Train http://www.ﬂickr.com/photos/trucolorsﬂy/352573802/

I’ve been @NeilCrosby

http://www.slideshare.net	27
http://static.slidesharecdn.com	7
http://localhost	2
http://start.knox.nsw.edu.au	2
http://guia2.wikispaces.com	1
http://drizzlin.com	1
http://ayudamutuapadresenprocesodeduelo.blogspot.com	1
http://start	1
http://webcache.googleusercontent.com	1

Geolocation and Beer

by Neil Crosby on Apr 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 43

Statistics

Geolocation and Beer — Presentation Transcript