SlideShare a Scribd company logo
1 of 33
&Beer
 GeoLocation

 @NeilCrosby
I’m Neil Crosby
          (everywhere)
I work for
         the BBC
http://www.flickr.com/photos/captaintim/3117409726/
On the homepage
I did the location stuff
But that’s boring
There’s
                no beer
http://www.flickr.com/photos/mehan/3979975563/
And no
        geolocation
http://www.flickr.com/photos/irisheyes/17560846/
What will I talk about?


          Building beernear.me
          “A simple weekend project
          to learn about geolocation”
So?

• Location finding using navigator.geolocation
• Translating lat/lon to an address
• Static google maps

                   http://www.flickr.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.flickr.com/photos/st3f4n/4482211416/
geolocation

if (navigator.geolocation) {
   // do geolocation
} else {
   // say sorry to the user
}


              http://www.flickr.com/photos/fweez/278017185/
Find the user’s location
nav….geo….getCurrentPosition(
   foundLocationFunc,
   noLocationFunc,
   {
     enableHighAccuracy: true,
     maximumAge: 120000
   }
);
          http://www.flickr.com/photos/clevergrrl/218312595/
Keep finding the user
nav….geo….watchPosition(
   foundLocationFunc,
   noLocationFunc,
   {
     enableHighAccuracy: true,
     maximumAge: 120000
   }
);
         http://www.flickr.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.flickr.com/photos/merlijnhoek/2789604490/
• But we only know a lat/lon.
• Where is the user really?

                  http://www.flickr.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.flickr.com/photos/csessums/4415113131/
Blob of location data
{"responseData": {"results":[{
  …
  "title":"Kelly Langley…",
  "streetAddress":"Cowley Rd,
    Cavendish House…",
  "city":"Cambridge",
     …
}]}}
           http://www.flickr.com/photos/locator/948390609/
Awesome!
So we can tell the user
where they are.
How about a static
map?                      http://www.flickr.com/photos/clintjcl/3657971496/
Why a static map?




 Reduced load for iPhone users.
              http://www.flickr.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.flickr.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.flickr.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.flickr.com/photos/trucolorsfly/352573802/
I’ve been @NeilCrosby

More Related Content

Viewers also liked

Perceptual map of Head and shoulder
Perceptual map of Head and shoulderPerceptual map of Head and shoulder
Perceptual map of Head and shoulder
Saad Munami
 
Competitive positioning through perceptual mapping
Competitive positioning through perceptual mappingCompetitive positioning through perceptual mapping
Competitive positioning through perceptual mapping
Abhinav Gulati
 
Perceptual mapping techniques
Perceptual mapping techniquesPerceptual mapping techniques
Perceptual mapping techniques
Axay Pithava
 

Viewers also liked (20)

What is obesity
What is obesityWhat is obesity
What is obesity
 
Chapter 7
Chapter 7Chapter 7
Chapter 7
 
330345 634022944265375000
330345 634022944265375000330345 634022944265375000
330345 634022944265375000
 
T.V map positioning
T.V map positioningT.V map positioning
T.V map positioning
 
Perceptual map of Head and shoulder
Perceptual map of Head and shoulderPerceptual map of Head and shoulder
Perceptual map of Head and shoulder
 
RESILIA positioning map
RESILIA positioning mapRESILIA positioning map
RESILIA positioning map
 
2013 Summer School
2013 Summer School2013 Summer School
2013 Summer School
 
150 Basic Business Diagrams for business presentation
150 Basic Business Diagrams for business presentation150 Basic Business Diagrams for business presentation
150 Basic Business Diagrams for business presentation
 
Competitive positioning through perceptual mapping
Competitive positioning through perceptual mappingCompetitive positioning through perceptual mapping
Competitive positioning through perceptual mapping
 
positioning map of beer
positioning map of beer positioning map of beer
positioning map of beer
 
Krispy Kreme SPACE Matrix, BCG Matrix and Product Positioning Map
Krispy Kreme SPACE Matrix, BCG Matrix and Product Positioning MapKrispy Kreme SPACE Matrix, BCG Matrix and Product Positioning Map
Krispy Kreme SPACE Matrix, BCG Matrix and Product Positioning Map
 
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
 
Cebu Pacific Air SPACE Matrix, BCG Matrix, Product Positioning Map
Cebu Pacific Air SPACE Matrix, BCG Matrix, Product Positioning MapCebu Pacific Air SPACE Matrix, BCG Matrix, Product Positioning Map
Cebu Pacific Air SPACE Matrix, BCG Matrix, Product Positioning Map
 
Basics of brand map
Basics of brand mapBasics of brand map
Basics of brand map
 
Enu market segmentation 090912
Enu market segmentation 090912Enu market segmentation 090912
Enu market segmentation 090912
 
Perceptual mapping techniques
Perceptual mapping techniquesPerceptual mapping techniques
Perceptual mapping techniques
 
Mc donald's ppt
Mc donald's   pptMc donald's   ppt
Mc donald's ppt
 
Starbucks Redefining A Cup of Joe - SPACE Matrix, BCG Matrix, Product Positio...
Starbucks Redefining A Cup of Joe - SPACE Matrix, BCG Matrix, Product Positio...Starbucks Redefining A Cup of Joe - SPACE Matrix, BCG Matrix, Product Positio...
Starbucks Redefining A Cup of Joe - SPACE Matrix, BCG Matrix, Product Positio...
 
Ray-Ban Consumer Study
Ray-Ban Consumer StudyRay-Ban Consumer Study
Ray-Ban Consumer Study
 
McDonalds SPACE Matrix, BCG Matrix, Product Positioning Map
McDonalds SPACE Matrix, BCG Matrix, Product Positioning MapMcDonalds SPACE Matrix, BCG Matrix, Product Positioning Map
McDonalds SPACE Matrix, BCG Matrix, Product Positioning Map
 

Similar to Geolocation and Beer

Hacking up location aware apps
Hacking up location aware appsHacking up location aware apps
Hacking up location aware apps
Anshu Prateek
 
Library of Congress - Neogeography and Geospatial data preservation
Library of Congress - Neogeography and Geospatial data preservationLibrary of Congress - Neogeography and Geospatial data preservation
Library of Congress - Neogeography and Geospatial data preservation
Andrew Turner
 
GTALUG Presentation on CouchDB
GTALUG Presentation on CouchDBGTALUG Presentation on CouchDB
GTALUG Presentation on CouchDB
Myles Braithwaite
 
Drupal and the GeoSpatial Web
Drupal and the GeoSpatial WebDrupal and the GeoSpatial Web
Drupal and the GeoSpatial Web
Andrew Turner
 

Similar to Geolocation and Beer (20)

Locate your hacks
Locate your hacksLocate your hacks
Locate your hacks
 
Hacking up location aware apps
Hacking up location aware appsHacking up location aware apps
Hacking up location aware apps
 
Maps 4 Africa
Maps 4 AfricaMaps 4 Africa
Maps 4 Africa
 
Location.Aware
Location.AwareLocation.Aware
Location.Aware
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Introduction to CouchDB
Introduction to CouchDBIntroduction to CouchDB
Introduction to CouchDB
 
Putting Folklore in Its Place
Putting Folklore in Its PlacePutting Folklore in Its Place
Putting Folklore in Its Place
 
Open hack 2011-ppt-geo
Open hack 2011-ppt-geoOpen hack 2011-ppt-geo
Open hack 2011-ppt-geo
 
Library of Congress - Neogeography and Geospatial data preservation
Library of Congress - Neogeography and Geospatial data preservationLibrary of Congress - Neogeography and Geospatial data preservation
Library of Congress - Neogeography and Geospatial data preservation
 
Zoom in on Mapping and Location
Zoom in on Mapping and LocationZoom in on Mapping and Location
Zoom in on Mapping and Location
 
Where20 2008 Ruby Tutorial
Where20 2008 Ruby TutorialWhere20 2008 Ruby Tutorial
Where20 2008 Ruby Tutorial
 
The Shape of Alpha
The Shape of AlphaThe Shape of Alpha
The Shape of Alpha
 
Seti 09
Seti 09Seti 09
Seti 09
 
O'Reilly WebCast - Trends And Technologies In Where2.0
O'Reilly WebCast - Trends And Technologies In Where2.0O'Reilly WebCast - Trends And Technologies In Where2.0
O'Reilly WebCast - Trends And Technologies In Where2.0
 
GTALUG Presentation on CouchDB
GTALUG Presentation on CouchDBGTALUG Presentation on CouchDB
GTALUG Presentation on CouchDB
 
GeoClue - State of the Map 2007
GeoClue - State of the Map 2007GeoClue - State of the Map 2007
GeoClue - State of the Map 2007
 
The Ecology of Information: A Future in a Library Without Walls
The Ecology of Information:  A Future in a Library Without WallsThe Ecology of Information:  A Future in a Library Without Walls
The Ecology of Information: A Future in a Library Without Walls
 
GeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri ProjectGeoTechTalk InkSatogaeri Project
GeoTechTalk InkSatogaeri Project
 
The gate
The gateThe gate
The gate
 
Drupal and the GeoSpatial Web
Drupal and the GeoSpatial WebDrupal and the GeoSpatial Web
Drupal and the GeoSpatial Web
 

More from Neil Crosby (11)

team++; making your team work better together
team++; making your team work better togetherteam++; making your team work better together
team++; making your team work better together
 
team++
team++team++
team++
 
Lagging Pipes
Lagging PipesLagging Pipes
Lagging Pipes
 
Yahoo! Pipes: Munging, Mixing and Mashing
Yahoo! Pipes: Munging, Mixing and MashingYahoo! Pipes: Munging, Mixing and Mashing
Yahoo! Pipes: Munging, Mixing and Mashing
 
Search Monkey - Open Hack London '09
Search Monkey - Open Hack London '09Search Monkey - Open Hack London '09
Search Monkey - Open Hack London '09
 
Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend Testing
 
I'll Show You Mine If You Show Me Yours...
I'll Show You Mine If You Show Me Yours...I'll Show You Mine If You Show Me Yours...
I'll Show You Mine If You Show Me Yours...
 
TV Tubes - Talkin' 'bout my automation...
TV Tubes - Talkin' 'bout my automation...TV Tubes - Talkin' 'bout my automation...
TV Tubes - Talkin' 'bout my automation...
 
Starting to Monkey Around With Yahoo! Search Monkey
Starting to Monkey Around With Yahoo! Search MonkeyStarting to Monkey Around With Yahoo! Search Monkey
Starting to Monkey Around With Yahoo! Search Monkey
 
Multi-level vCards
Multi-level vCardsMulti-level vCards
Multi-level vCards
 
Twitter Bots
Twitter BotsTwitter Bots
Twitter Bots
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 

Geolocation and Beer

Editor's Notes