Prezi

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in the manual

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML5 Geolocation API: Location, Location, Location

An indepth look a the HTML5 Geolocation API
by Andy Gup on 4 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5 Geolocation API: Location, Location, Location

Agenda
HTML5 Geolocation from A to Z
Use cases
Coding patterns
Tips and tricks

Goal: Save you 2 - 4 weeks of ramp up time!
Who am I?
Andy Gup
Developer Evangelist
Email:
agup@esri.com
Blog:
http://blog.andygup.net
Twitter:
@agup
Who are you?
What is HTML5 Geolocation?
W3C API
Built into the browser
Opt-in required!
Approximate location
Why do I care? Use Cases?
Find info around user
Direction assistance
Stats/analysis
Auto-select country/state/city
Auto-display language
Location targeted sales
Depends on multiple factors...

Type of browser
(Geolocation Service)
Type of device
Wi-fi enabled
Internet connectivity
GPS enabled
VPN
Work flow for HTML5 Geolocation
Get Location
Shut off
location
Not Supported
Process results
Verify HTML5 feature support
(cc) image by Microsoft Office Clip art
(cc) image by Microsoft Office Clipart
Feature Detection
HTML5 Geolocation Accuracy
(cc) image by Microsoft Office Clipart
What's a lat/lon Geocoder?
Converts lat/lon to address
Service-based or COTS

44.49, 72.24
Berlin, DE
Score: 80%
What's a spatial database?
File or relational database - e.g. PostgreSQL
Spatial index system
Optimized for working with points, lines, polygons
Shift focus from data management to building functionality
Storing location data
(Server-side)
UID
location
timeStamp
accuracy
altitude*
altitudeAccuracy*
heading*
speed*
browserType
geometry!
Browser Support
Use feature detection pattern
Use your .js library
http://yepnopejs.com

http://caniuse.com
http://mobilehtml5.org/
Privacy
Get legal advice
Follow W3C geolocation guidelines (Section 4)
Allow for opt-out
Be clear about your privacy policy
Resources
@agup or agup@esri.com
http://blog.andygup.net
http://esriurl.com/javascript
http://caniuse.com
http://mobilehtml5.org/
http://dev.w3.org/geo/api/spec-source.html
Storing location data
(Client-side)
Consider mobile & desktop
Web SQL
[not recommended]
IndexedDB
[not recommended]
HTML5 Web Storage
[ =< 5MB ]



UID
[optional]
location
timeStamp
accuracy
browserType
[optional]
*Mobile only - not available
on most platforms
Let user know
Fallback to
IP Geolocation
What's a IP Geocoder?
Converts IP to location
Service-based or COTS

74.125.224.160
Country: United States
State: CA
City: Mountain View
Latitude: 37.4192
Longitude: -122.0574
What to do with location data?
Continuous updates vs. one-time snapshot
Return value =
latitude
&
longitude
(e.g. 37, -104)
Analyze and normalize
continuous location updates
Define accuracy
Reject bad results
Too many updates
Time
Distance
Speed
Heading
Define rules
Mark as bad or delete
Define rules
Consider local storage limits
Remote database sync
Advantages of spatially-enabled data
View trends on a map
Analyze trends over specific time periods
Built-in functions including distance queries
Determine if point inside/outside polygon
HTML5 Geolocation API
Location, Location, Location
What's geospatial mean?
Tips for storing location data
What's a geocoder?
Demo
Location, Location, Location
What, why, how, huh??
Wrap-up!
Another demo
World (cc) image by Microsoft Office Clipart
You may need a
Geocoder
You may need a
spatially-enabled
database
Options:
Analyze and normalize
Place location on map
Write to database
Images by Microsoft Clipart
Copyright © 2013 Esri. All rights reserved. Esri and the Esri globe logo are trademarks, service marks, or registered marks of Esri in the United States, the European Community, or certain other jurisdictions. Other companies and products or services mentioned herein may be trademarks, service marks, or registered marks of their respective mark owners
What is a Geolocation Service?
Built into browser
Provided by Google, Microsoft and Apple
Automatic request made via HTTPS
Sends info to remote service, including:
wifi macid, ssid, signal strenth
Returns Geolocation Object
GET /maps/api/browserlocation/json?browser=firefox&sensor=true&wifi=mac:01-24-7c-bc-51-46%7Cssid:3x2x%7Css:-37&wifi=mac:09-86-3b-31-97-b2%7Cssid:belkin.7b2%7Css:-47 HTTP/1.
Geolocation Object
https://github.com/andygup/html5-geolocation-demo
Snapshot
maximumAge (ms)

max age of
cached
position in
milliseconds
throw error when value is reached
"0"
- do not use cache
"Infinity"
default - return any cached position
timeout (ms)

max
millis
to
any
return a position
throw error if no value when timeout reached
"Infinity"
(default) don't return until position available
enableHighAccuracy (boolean)

try to obtain
best possible
result
If GPS available use it
If network triangulation available use it
Continuous
See the full transcript