Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

9.2 Geolocation

Where in the world are you? The Geolocation API can tell you this, even in non-mobile environments like desktop computers. That’s what we’ll focus on in this lesson.

Syntax

  • geolocation
  • getCurrentPosition
  • watchPosition
  • clearWatch

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


9.2 Geolocation

Hi, folks, in this lesson, we're going to take a look at the geolocation API, which can tell us where we are using various different means depending on the situation at hand. While incredibly useful for providing location based services to mobile devices, desktop computers can also make use of them. Unlike anything else that we've looked at so far in this whole course, geolocation is strictly opt-in for our users. So, as soon as we try to utilize their location data, they must except a prompt that specifically allows us to access it. The geolocation API is a globally available property of the navigator object. We can inspect it within the browser by entering it in the console. So these are the different methods that are available through the geolocation API. getCurrentPosition is used to get the users current position and watchPosition can be used to monitor the position as it changes while the user moves around. If we want to stop watching then we use the clearWatch method. So the most fundamental method is getCurrentPosition which we'll want to use to get the users current location data. This method is asynchronous, so we need to pass it a callback function that will be invoked when the location is returned. So, because this is the first time we've tried to access the location, we see this prompt and we need to allow the browser to access our location. That's partly why the method is asynchronous because we don't know how long it's gonna take for the user to approve our request for access and in fact they may never approve that pop-up. It might just sit there at the top of the browser until the user closes the browser and goes off and does something else. In which case we'll never get the location details. When the pop-up is approved however, we can see that we get this position object in the browser's console. So this has two properties, coordinates and timestamp. The timestamp is the current timestamp that's the UNIX epoch time, and we also get this coordinates object. And this is what gives us the latitude and longitude which tells us where the user is in the world. And we can see the accuracy, and there might be altitude and altitude accuracy. And if the user is moving, there might be a speed as well. Obviously, I'm running this example on a desktop computer. And that isn't going anywhere, so I'm not gonna see the speed there. But you can see some of the other properties that we get. As well as passing a success call back to the method, which is what we did in the first example there. We can also pass an error call back to handle situations where the location request failed. We can also pass a configuration object to specify certain configuration options such as high accuracy, or a time out for the request. We can highlight both of these additional arguments with a simple example. So first, let's add an error callback. Error call back will receive an error object which contains information about the failure and we can also provide a configuration object as the third argument. So let's have that as well. So one of the properties that we can set is a timeout which specifies how long the method should wait before it times out. And we have set this to 0 and that will allow us to test the error callback. So we see the PositionError which gets passed to the error callback. And, we can see that it has a code, and a message. And the message says, Timeout expired to indicate that the timeout elapsed. So, another method that we can make use of is the watchPosition method. This is very similar to the getPosition method, except that it invokes the success or error handlers, every time the position changes. This method returns a numerical id. And when we want stop watching the user's location, we pass this ID to the clearWatch method. And we can't show you these methods in action because, as I said, I'm using a desktop computer, and that's not moving. So the watchPosition handlers are never gonna be invoked. But just be aware that they exist. So in this lesson, we looked at the geolocation API and saw how we can use it to get or track a visitor's location. We learned that the getCurrentPosition and watchPosition methods are both asynchronous. And so require that we pass callback functions to them, which will be invoked either when the location requests succeed or fail. We also saw that we can pass a configuration object to these methods and that allows us to control things like the time out for the request. We also had a quick look at the position object which is passed when the request succeeds and the error object which will be passed to the error handler if these request fails. In the next lesson we'll look at web storage. Thanks for watching

Back to the top