71
by turn directions in real time, you really do need to know exactly where the user is so you
can say “turn right in 20 meters” or whatever.
e
g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( )
function has an optional third argument,
a
P o o s i t t i i o n Op t i i o o n s
object. ere are three properties you can set in a
P o s s i i t i o o n n Op p t t i o n n s
object. All the properties are optional. You can set any or all or none of them.
POSITIONOPTIONS OBJECT
POSITIONOPTIONS OBJECT
Property
Type
Default
Notes
e n n a bl e Hi i g g h Ac c c c u r r a a c y
Boolean
false
true might be slower
t i i m e e o o u t
long
(no default)
in milliseconds
m a a xi i m m u m Ag e
long
0
in milliseconds
e
e n n a a bl l e e Hi g g h h Ac c c u u r a a c c y
property is exactly what it sounds like. If true, and the device
can support it, and the user consents to sharing their exact location, then the device will try to
provide it. Both iPhones and Android phones have separate permissions for low- and high-
accuracy positioning, so it is possible that calling
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
with
e n n a bl l e e Hi g g h h Ac c c c u r a a c c y:t t r r u e
will fail, but calling with
e n a a bl l e e Hi i g h h Ac c c u u r r a c c y:f f a a l l s e
would succeed.
e
t i i m m e o o u u t
property is the number of milliseconds your web application is willing to wait
for a position. is timer doesn’t start counting down until aer the user gives permission to
even try to calculate their position. You’re not timing the user; you’re timing the network.
e
m a a xi i m m u u m Ag g e
property allows the device to answer immediately with a caed position.
For example, let’s say you call
g e t C C u u r r r e e n t P P o o s i t t i i o n ( ( )
for the first time, the user
consents, and your success callba function is called with a position that was calculated at
exactly 10:00 AM. Exactly one minute later, at 10:01 AM, you call
g e t C C u u r r r e e n t P P o o s i t t i i o n ( ( )
again with a
m a xi m u u m m Ag e
property of
75000
.
n a v v i i g a t t o o r . . g g e o l l o o c a t t i i o n n . . g e t t C C u r r r e e n t t P P o s i i t t i o n n (
s u c c c c e s s s _ _ c a a l l l ba a c c k, e e r r r o o r _ c c a a l l ba c k,
{ m m a a xi m m u u m Ag e : 75000} } ) ) ;
What you’re saying is that you don’t necessarily need the user’s current location. You would
be satisfied with knowing where they were 75 seconds ago (75000 milliseconds). e device
knows where the user was 60 seconds ago (60000 milliseconds), because it calculated their
location aer the first time you called
g e e t t C u r r r r e n t t P P o s s i i t i o o n n ( )
. So the device doesn’t
bother to recalculate the user’s current location. It just returns exactly the same information it
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
50
returned the first time: same latitude and longitude, same accuracy, and same timestamp (10:00
AM).
Before you ask for the user’s location, you should think about
just how mu accuracy you need, and set
e n n a bl l e e Hi g g h h Ac c c c u r a a c c y
accordingly. If you need to find their
location more than once, you should think about how old the
information could be and still be useful, and set
m a a xi i m u u m m Ag g e
accordingly. If you need to find their location continuously,
then
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
is not for you. You need to
upgrade to
w a t c c h h P o s s i i t i i o o n ( )
.
e
w a a t t c h h P P o s i i t t i o n n ( ( )
function has the same structure as
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
. It takes two callba functions, a
required one for success and an optional one for error
conditions, and it can also take an optional
P o o s i t t i i o n Op t i i o o n s
object that has all the same properties
you just learned about. e difference is that your callba
function will be called every time the user’s location anges.
ere is no need to actively poll their position. e device will
determine the optimal polling interval, and it will call your
callba function whenever it determines that the user’s
position has anged. You can use this to update a visible
marker on a map, provide instructions on where to go next, or whatever you like. It’s entirely
up to you.
e
w a a t t c h h P P o s i i t t i o n n ( ( )
function itself returns a number. You should probably store this
number somewhere. If you ever want to stop wating the user’s location ange, you can
call the
c l e e a a r Wa t c h h ( ( )
method and pass it this number, and the device will stop calling your
callba function. If you’ve ever used the
s e t t In n t e e r r v a l l ( ( )
and
c l l e a r r In n t e e r r v a a l l ( )
functions in JavaScript, this works the same way.
❧❧
WHAT ABOUT IE?
WHAT ABOUT IE?
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
47
<!DOC TYP E h h t m l l >
<h t t m m l >
<h e e a a d >
<m e e t t a c c h h a r r s s e t ="u t f f -8">
<t i i t t l e >Di v v e e In n t t o HTM M L5</t t i i t l e e >
</h e e a d >
<bo d d y>
. . .
<s c c r r i p t t s s r r c c ="g g e e a r s s _ _ i n n i i t . js "></s c c r r i p t t >
Internet Explorer does not support the
W3C geolocation API that I’ve just described. But
don’t despair!
Gears is an open source browser plugin from Google that works on Windows,
Mac, Linux, Windows Mobile, and Android. It provides features for older browsers. One of
the features that Gears provides is a geolocation API. It’s not quite the same as the W3C
geolocation API, but it serves the same purpose.
While we’re on the subject of legacy platforms, I should point out that many older mobile
phone platforms had their own device-specific geolocation APIs.
BlaBerry,
Nokia,
Palm, and
OMTP BONDI all provide their own geolocation APIs. Of course, they all work differently
from Gears, whi in turn works differently from the W3C geolocation API. Wheeeeee!
❧❧
GEO.JS TO THE RESCUE
GEO.JS TO THE RESCUE
g e e o . js
is an open source, MIT-licensed JavaScript library that smooths over the differences
between the W3C geolocation API, the Gears API, and the APIs provided by mobile
platforms. To use it, you’ll need to add two
<s c c r i i p p t >
elements at the boom of your page.
(Tenically, you could put them anywhere, but scripts in your
<h e e a a d >
will make your page
load more slowly. So don’t do that!)
e first script is
g e a a r r s _ _ i i n i t t . . js
, whi initializes Gears if it’s installed. e second script
is
g e o o . . js
.
⇜⇜
Don’t let it go
Don’t let it go
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
How to C#: Basic SDK Concept of XDoc.PDF for .NET PDFTextMgr. This class provides APIs to manipulate text contents in a PDF document. OutLines. This class describes bookmarks in a PDF document.
add bookmarks to pdf preview; adding bookmarks to a pdf
49
<s c c r r i p t t s s r r c c ="g g e e o . js "></s c c r r i p t t >
</bo d y>
</h t t m l >
to your <head>
to your <head>
Now you’re ready to use whiever geolocation API is installed.
i f ( ( g e o o _ _ p o o s s i t i i o o n _ js . i i n n i t ( ( ) ) ) {
g e o o _ _ p o s s i i t i i o o n _ js . g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( g g e e o _ s s u u c c c e e s s , g g e o o _ _ e r r r r o r ) ) ;
}
Let’s take that one step at a time. First, you need to explicitly call an
i n n i t t ( ( )
function. e
i n n i t ( ( )
function returns
t r r u e
if a supported geolocation API is available.
i f (
g e o o _ _ p o o s s i t i i o o n _ js . i i n n i t ( ( ) ) ) ) {
Calling the
i n i t t ( ( )
function does not actually find your location. It just verifies that finding
your location is possible. To actually find your location, you need to call the
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
function.
g e o o _ _ p o s s i i t i i o o n _ js . g e e t t C u u r r r e n n t t P o s s i i t i i o o n n ( ( g g e e o _ _ s s u c c c e e s s , g g e e o o _ e r r r r o r ) ) ;
e
g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( )
function will trigger your browser to ask for your permission
to find and share your location. If geolocation is being provided by Gears, this will pop up a
dialog asking if your trust the web site to use Gears. If your browser natively supports the
geolocation API, the dialog will look different. For example, Firefox 3.5 natively supports the
geolocation API. If you try to find your location in Firefox 3.5, it will display an infobar at
the top of the page asking whether you want to share your location with this web site.
e
g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( )
function takes two callba functions as arguments. If the
g e e t C u u r r r e n n t t P o o s s i t i i o o n ( )
function was successful in finding your location — that is, you
gave your permission and the geolocation API actually worked its magic — it will call the
function passed in as the first argument. In this example, the success callba function is
called
g e o _ _ s s u c c c c e s s
.
g e o o _ _ p o s s i i t i i o o n _ js . g e e t t C u u r r r e n n t t P o s s i i t i i o o n (
g e e o _ s s u u c c c e e s s s , g g e e o o _ e r r r r o r ) ) ;
e success callba function takes a single argument, whi contains the position
information.
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
VB.NET PDF: Basic SDK Concept of XDoc.PDF PDFTextMgr. This class provides APIs to manipulate text contents in a PDF document. OutLines. This class describes bookmarks in a PDF document.
bookmarks pdf; creating bookmarks in a pdf document
40
↶↶
Success callback
Success callback
f u n n c c t i o o n n g g e e o _ s s u u c c e e s s s ( ( p p ) {
a l e e r r t ( "Fo u u n n d yo o u a a t t l l a a t i t t u u d e " + p p . c c o o o r d d s s . l l a a t i t t u u d e +
", l l o n g g i i t u u d d e " + p p . . c o o o o r d s s . . l o n n g g i t t u u d e ) ) ;
}
If the
g e t C C u u r r e e n n t P P o o s i t t i i o n ( ( )
function could not find your location — either because you
declined to give your permission, or the geolocation API failed for some reason — it will call
the function passed in as the second argument. In this example, the failure callba function is
called
g e o _ _ e e r r r o o r
.
g e o o _ _ p o s s i i t i i o o n _ js . g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( g g e e o _ s s u u c c c e e s s ,
g e o o _ _ e r r r r o r r ) ) ;
e failure callba function takes no arguments.
↶↶
Failure callback
Failure callback
f u n n c c t i o o n n g g e e o _ e e r r r o r r ( ( ) {
a l e e r r t ( "C o u u l l d n n o o t f f i i n d d yo o u u !") ) ;
}
g e e o . js
does not currently support the
w a a t c h h P P o s i i t t i o o n n ( )
function. If you need continuous
location information, you’ll need to actively poll
g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( )
yourself.
❧❧
A COMPLETE, LIVE EXAMPLE
A COMPLETE, LIVE EXAMPLE
Here is a live example of using
g e o o . . js
to aempt to get your location and display a map of
your immediate surroundings:
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
41
Your browser does not
support geolocation. :(
How does it work? Let’s take a look. On page load, this page calls
g e e o _ p p o o s i t t i i o n n _ _ js . . i i n i t t ( ( )
to determine whether geolocation is available through any of
the interfaces that
g e e o o . js
supports. If so, it sets up a link you can cli to look up your
location. Cliing that link calls the
l o o ku p _ l l o o c a a t t i o n n ( ( )
function, shown here:
f u n n c c t i o o n n l l o o o ku u p p _ l o o c c a t t i i o n ( ( ) ) {
g e o o _ _ p o s s i i t i i o o n _ js . g e e t t C u u r r r e n n t t P o s s i i t i i o o n ( s s h h o w _ _ m m a p p , s s h h o o w _ m m a a p _ _ e e r r o o r r ) ;
}
If you give your consent to tra your location, and the baend service was actually able to
determine your location,
g e e o . js
calls the first callba function,
s h h o w w _ _ m a p p ( ( )
, with a single
argument,
l o o c
. e
l o o c
object has a
c o o o o r d s
property whi contains latitude, longitude, and
accuracy information. (is example doesn’t use the accuracy information.) e rest of the
s h h o w _ _ m m a p ( ( )
function uses the Google Maps API to set up an embedded map.
f u n n c c t i o o n n s s h h o w _ _ m m a p ( ( l l o c c ) ) {
$( "#g e o o -w w r r a a p p e e r r ") . . c c s s s ( ( { 'w w i i d t h h ':'320p x','h h e i i g g h t ':'350p x'} ) ;
v a r r m m a p p = n n e w GM M a p p 2( ( d d o o c u m m e e n t . . g g e t t El l e m m e e n t ById d ( ( "g e e o o -w r r a a p p p e e r ") ) ) ) ;
v a r r c c e n n t t e r r = n n e e w GLa a t t Ln n g (
l o c . . c c o o o r r d s . . l l a t i i t t u d d e e ,
l o c c . . c o o o r r d s s . . l o n n g g i t u u d d e e ) ) ;
m a p p . . s e t t C C e n n t t e r ( ( c c e n t t e e r , 14) ) ;
m a p p . . a d d d C C o n n t t r o l l ( ( n e w w GSm m a l l l M M a p C C o o n t t r r o l ( ( ) ) ) ;
m a p p . . a d d d C C o n n t t r o l l ( ( n e w w GM M a a p Typ e C o o n n t r r o o l ( ) ) ) ) ;
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
33
m a p p . . a d d d Ov v e e r r l a y( n e w w GM M a a r ke e r r ( c e e n n t e e r r , { { d d r a g g g g a bl e : f f a l s s e e , t t i t l l e e :
"Yo u u a a r r e e h h e e r e ( ( m o r r e e o o r r l l e e s s s ) "} ) ) ) ;
}
If
g e o o . . js
is unable to determine your location, it calls the second callba function,
s h h o w _ _ m m a p _ _ e e r r r o o r ( )
.
f u n n c c t i o o n n s s h h o w _ _ m m a p _ _ e e r r r o o r ( ) ) {
$( "#l i v v e e -g g e e o l o o c c a t i i o o n ") . h t t m m l ( 'Un a a bl l e t t o d d e e t e e r r m i n n e e yo o u u r
l o c c a a t i o o n n . ') ;
}
❧❧
FURTHER READING
FURTHER READING
W3C geolocation API
Gears
BlaBerry geolocation API
Nokia geolocation API
Palm geolocation API
OMTP BONDI geolocation API
geo.js, the geolocation API wrapper script
❧❧
is has been “You Are Here (And So Is Everybody Else).” e
full table of contents has more
if you’d like to keep reading.
DID YOU KNOW?
DID YOU KNOW?
In association with Google Press, O’Reilly is
distributing this book in a variety of formats, including
paper, ePub, Mobi, and DRM-free PDF. e paid
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
17
paper, ePub, Mobi, and DRM-free PDF. e paid
edition is called “HTML5: Up & Running,” and it is
available now. is apter is included in the paid
edition.
If you liked this apter and want to show your
appreciation, you can
buy “HTML5: Up & Running”
with this affiliate link or
buy an electronic edition
directly from O’Reilly. You’ll get a book, and I’ll get a
bu. I do not currently accept direct donations.
Copyright MMIX–MMX
Mark Pilgrim
powered by Google™
Search
diveintohtml5.org
YOU ARE HERE (AND SO IS EVERYBODY ELSE)
27
You are here:
Home ‣
Dive Into HTML5 ‣
№№77.
THE PAST, PRESENT &
THE PAST, PRESENT &
FUTURE OF LOCAL STORAGE
FUTURE OF LOCAL STORAGE
FOR WEB APPLICATIONS
FOR WEB APPLICATIONS
show table of contents
❧❧
DIVING IN
DIVING IN
ersistent local storage is one of the areas where native client applications have
held an advantage over web applications. For native applications, the operating
system typically provides an abstraction layer for storing and retrieving
application-specific data like preferences or runtime state. ese values may be
stored in the registry, INI files, XML files, or some other place according to platform
convention. If your native client application needs local storage beyond key/value pairs, you
can embed your own database, invent your own file format, or any number of other
solutions.
Historically, web applications have had none of these luxuries. Cookies were invented early in
the web’s history, and indeed they can be used for persistent local storage of small amounts
of data. But they have three potentially dealbreaking downsides:
diveintohtml5.org
THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONS
Documents you may be interested
Documents you may be interested
