[MUSIC]

Hello, I'm Andrew and welcome to this workshop where we'll take a look at

the Geolocation API in Java Script.

Geolocation is a convenient way to find the user's location and

then provide some sort of feedback like locating them on a map,

finding directions to a restaurant, or how far away they are from their friends.

The term geolocation can mean a couple of different things.

Firstly, it can mean the method of obtaining coordinates to identify

a particular location on Earth.

You could say I'm going to use geolocation to find out where I am.

Secondly, geolocation can refer to the actual set of coordinates for

something on the Earth.

For example, you could say my geolocation is followed by your coordinates.

A location is made up of a number of things like latitude, longitude, and

altitude, the x, y and z of a position if you like.

There are other properties you can access, but most commonly,

developers only need the latitude and longitude for

close approximations of distances between two locations.

For example, how far someone is from the current location to the nearest ATM.

Let's go over some reasons why you'd want to use geolocation in a web project.

You can use your current location to obtain directions to

a place from the website.

You can figure out the closest location of your favorite restaurant, bank, or

supermarket.

You can share your location on a social network or

with a private group of friends.

Most people don't know their latitude and longitude off the top of their head.

So as a developer, we can leverage geolocation to provide an automatic,

accurate way to locate a person and

find their location to do something with that information.

Also if a user is out and

about, they may not know the name of where they are exactly.

With geolocation, you don't need to worry about that.

The geolocation is more accurate than providing a street name.

Geolocation became popular first on mobile devices since most of them have

GPS built in.

However, geolocation is available on a number of browsers on the desktop.

While desktop computers don't have GPS built in,

they can use a database to cross-reference the wireless networks it can see.

For example, the wireless networks surround the home are different than those

surrounding your work.

That's providing you don't work from home.

So depending on the signal strength of those fixed wireless networks,

the computer can calculate your location by cross-referencing the locations of

these networks with a database of wireless access points, all without GPS.

All this is seamless and under the hud.

To use geolocation to find a position is fairly straightforward.

Since we're getting the position of the device,

we need to access the navigator object.

This is an object that contains information about the web client,

meaning the browser and device.

You can use this to garner information about the browser's version and

other interesting things, including the geolocation.

This geolocation object has two ways to access the current location,

getCurrentPosition and watchPosition.

GetCurrentPosition is just executed once,

whereas watchPosition a callback with the current position.

The callback function takes a parameter, the position, and

that has a object of coords, where the latitude and

longitude and other information can be accessed.

Let's take a look at our project.

If you want to follow along, you can click on the snapshot in the show notes and

then click on the Fault button, and

it will create a new white space with all the files, just like this.

Now, before we get into coding,

let's just take a look at where the project is right now.

So click on the preview, and I'm using Safari for

this project because it has these Remember my decision for

one day, or it will continually prompt you every time.

So because we're going to try this out out in a few different ways,

I like how Safari asks me.

So I'm going to click on Allow, and it shows the location,

or the distance to my favorite burger joints for my current location.

As you can see, Little Big Burger's the closest,

McDonald's is slightly further away, and we've got Original Wow Burger and

Red Robin which is six miles away and far too far away for me right now.

Another reason why I'm using Safari is that if you look in the Developer menu,

there's Disable JavaScript, and it's super easy to disable.

So let's see the state of the application when JavaScript is disabled.

Well, it shows an error.

It says that You need JavaScript enabled for your application to work.

That's because there's no geolocation APIs that are non-JavaScript,

so for the browser at least, so we need JavaScript enabled.

And having this error message here really helps the user

understand the issues involved if they've got JavaScript disabled,

or a system administrator may have disabled it for whatever reason.

So I'm gonna re-enable JavaScript up here

since we'll be using it a lot in this workshop.

So I'm just gonna refresh and then click on Allow, and the distance is calculated.

So let's just take a look at our code to see how it all works.

So in the index for HTML, we have the error message,

which is defaultly shown, so we don't use any CSS to hide that.

We've got this hud here which uses JavaScript to show the,

remember we see Acquiring Location.

Just giving the user some additional feedback

while the geolocation process is happening.

This can take a long time if it's the first time you're finding a location.

So it's good to have some visual clues and indicators.

And we've got a div with the restaurants in.

It's unordered list, and each one has a question mark miles,

so that's the default position of the, of the restaurant, and

I've, I did these data attribute of lat for

latitude and lon for longitude for all the different restaurants.

I look these up on Google Maps as a close approximation of where they are,

and I've added them as data attributes.

So let's take a look at the JavaScript that's involved.

I've separated this into a separate file.

This is a bit of information on calculating the distance between two

points on the planet.

And it calculates the distance as the crow flies,

which means the direct location from the location one to location two so.

It doesn't take into account curves in roads, or

you having to go a long way around to something.

It's if you were a crow and you flew from one location to another,

that is the distance to that particular location.

So lat1 and lon1 are for your particular location.

And lat2 and long2 is for the restaurant.

And if we take a look at this geolocation.js here,

we have JavaScript enabled, so we need to hide that error message at the top

of the page, and because we're asking for the geolocation immediately,

I'm gonna show the hud the, the progress bar saying we're acquiring the location.

Here we use that piece of code that I showed before.

It's using the navigator, the geolocation, and getting the current position, so

this fires once, and the callback is gotLocation.

And the currentPosition is the one parameter that comes into that

gotLocation.

I hide the hud.

So we've acquired the locations, so we need to get ride of it now.

And we use a bit of jQuery to get all the spans,

remember the spans are the ones with the data for

the latitude and the longitude of all the restaurants.

And then we calculate the distance from the currentPosition's coordinates

latitude, currentPositions coordinates longitude and

the restaurant latitude and the restaurant longitude.

And then we fill the span, remember with cycling over using the each cert.

This in the context of this function is the actual span, and we do the distance in

miles, which is calculated here, with the string of miles added to the end.

And at the bottom here, I've got this help function which displays the error, so

it modifies the text of that error, and it slides down there in a slow way.

And we'll use that for

other scenarios because getting this code working is fairly trivial.

As you can see, we've got something working, quote unquote.

But what is more important is the cases where things go wrong.

We've already got the code for when JavaScript is disabled.

But what about if the browser doesn't support geolocation?

Not all browsers support it still, so

we need to handle that situation for the user.

So up on line three, I can add a conditional.

[BLANK_AUDIO]

Where I'm basically testing for the truth in this, i.e., if there's something there.

Under geolocation we can run the geolocation code.

If it's not there, we want to display the error.

[BLANK_AUDIO]

With something like, Your browser

doesn't support geolocation.

And this should display on the page in the error box.

So the way that we can test this is just by doing

not in front of this conditional statement here, and clicking on preview.

And it says Your browser doesn't support geolocation.

And as you can see here, we've got, it's still saying Aquiring Location,

which isn't true any more.

So what I'm gonna do is in this displayError,

I'm actually going to hide the HUD.

[BLANK_AUDIO]

And I'm going to take away that not and

it should acquire the location fine when we allow.

But what happens when we don't allow?

It's still saying Aquiring Location.

This isn't good.

There's no error.

So what we need to do is take a look at the MDN, or

Mozilla Developer Network documentation on geolocation.

If we click on getCurrentPosition,

which is the method that we're using on the Geolocation object,

you can see that there's actually three parameters that you can pass in.

There's the success callback, which is actually required, an error callback which

is optional, and this callback takes one parameter, a PositionError object.

And then there's some options that you can set for other reasons.

So we're just going to take a look at this error callback, and

we're going to deal with this PositionError.

So what we can do is we can create a function called gotError, and

it has one parameter, which is that PositionError.

So I'm just gonna call that an error.

And let's take a look at that PositionError object.

So the PositionError has a code, so it has a value of 1 through 3.

And it's been assigned to some constants, so

we don't need to memorize these numbers.

So we can inspect that error code when it comes in.

We can then compare it to one of these particular constants.

And then we can display an error message to the user.

Which would be probably more user friendly than the error message that's being

generated by the system.

So let's jump into here and we'll create a string called var message.

Actually we won't assign it just yet, so it's not technically a string yet, but

when we create our switch statement,

we're gonna use a switch statement instead of conditionals.

You could use if and else and else if, but it can get a bit verbose whereas,

like, a switch case statement can be a little bit more concise.

Let's switch on the error's code.

And we want to do case.

[BLANK_AUDIO]

So if the error's code is the same value

as the error.PERMISSION_DENIED

constant, we want to set the message to,

You need to give permission to use your

location to calculate distances.

[BLANK_AUDIO]

Then we'll do a break.

So outside of the switch statement,

we can call the displayError function with the message.

So up here on navigator.geolocation.getCurrentPosition,

let's make sure that we're calling the get error callback when an error occurs,

so let's pass in gotError as a call back on getCurrentPosition.

Cool!

So let's try this out and see if it works.

So it's asking us if we allow it, so let's Don't Allow.

And the HUD disappears and this shows, slowly says this.

You need to give permission to use your location to calculate distances.

Cool.

So let's close these tabs down, and finish off this code.

So the next case would be, POSITION_UNAVAILABLE.

The acquisition of the geolocation failed because at least one of the internal

sources of the position returned an internal error.

So that's whether if the GPS had an error or

the lookup on the database on the desktop eh, occurred.

This means that we can't find the current position.

So it's not down to the user denying it.

It's just one of those gremlins in the works that causes problem.

So let's write a message for this case.

There was an issue getting your location from your device.

Please try again.

[BLANK_AUDIO]

And what is try again?

Actually it's a refresh, so Please refresh the page.

[BLANK_AUDIO]

The next case is a TIMEOUT.

So the time allowed to acquire the geolocation

defined by the PositionOptions.timeout.

So remember, there was a third parameter that we could define, and

there was a set of positionOptions.

And one of the properties on those options is the TIMEOUT.

The default value is infinity,

meaning the getCurrentPosition won't return until the position is available.

There may be some times where your, the position needs to be returned

within a particular amount of time before you update a user interface, so

you may want to set this a couple of seconds if you want.

And this time here is in milliseconds, so times everything by 1,000.

If you want it to wait for 2 seconds, it would be 2,000 milliseconds.

Since we, we're, we're not really not that interested in this application,

we're not going to set the options.

But just in case if you do set this in the future,

you'll wanna set the TIMEOUT for the error ha, handling.

So let's set a message and say,

It took too long getting your position.

[BLANK_AUDIO]

And let's break.

And then finally, the good thing about using a switch

statement is that we can set a default value,

if an error happens that isn't on this chart.

So say, for example, maybe the APIs in the future introduce a new error type.

Or you use this gotError for a different case, we can

set a specific message as default if these conditions aren't met above.

So we can do message equals

An unknown error has occurred.

Please refresh the page.

[BLANK_AUDIO]

And break, and save.

And there we have it.

We've got our error codes, and they've all been set up.

Let's just make sure we haven't broke anything.

[BLANK_AUDIO]

And it looks like we have.

It says that there's an unexpected semicolon and

an unexpected colon on the switch clause, so let's have a look down here.

That's on this TIMEOUT.

And let's try again.

Here we have the dialog saying, can we have permission to see the location?

So let's click on Allow, and it works.

Let's refresh again, and let's click on Don't Allow.

It says, you need to give permission for your location to calculate the distances.

Okay, so we caught that little error at the end there, and it's all working.

So, remember when you're creating an application that there's often

other states that your application needs to handle, and

geolocation is an example where if you don't handle

all of these side issues, it could leave the user hanging and frustrated.

And when you have hanging and frustrated users, you lose them.