1
00:00:02,130 --> 00:00:05,050
Now how do we get the user location?

2
00:00:05,070 --> 00:00:12,090
You learned that for that you can use navigator geolocation, geolocation is a browser API that is provided

3
00:00:12,090 --> 00:00:18,780
in Javascript that allows us to get the user's location. If we search for MDN geolocation, we find

4
00:00:18,780 --> 00:00:21,970
the official MDN documentation on this API

5
00:00:22,470 --> 00:00:30,630
and what you'll see here if you scroll down is that this has quite decent browser support.

6
00:00:30,990 --> 00:00:34,470
The geolocation API here has really good support,

7
00:00:34,470 --> 00:00:38,410
Internet Explorer 9 and higher supports it, Safari supports it,

8
00:00:38,460 --> 00:00:42,470
so this should really work in all the browsers we're targeting.

9
00:00:42,510 --> 00:00:48,450
Nonetheless if you want to be super safe, you can add an if check here and check if navigator.geolocation

10
00:00:48,450 --> 00:00:54,710
is a thing or to be precise, if it's not a thing by adding an exclamation mark in front of that

11
00:00:54,900 --> 00:01:00,570
and if we make it into this if block, we know that we don't have access to the geolocation API and in

12
00:01:00,570 --> 00:01:06,450
that case, we might want to return and not continue here with this function and simply throw an alert

13
00:01:06,600 --> 00:01:14,490
or show an alert to the user where we say location feature is not available in your browser,

14
00:01:14,490 --> 00:01:21,560
please use a more modern browser or manually enter an address.

15
00:01:21,580 --> 00:01:29,390
So here, my fallback code is that I tell the user who might be using my web page here that we can't auto

16
00:01:29,520 --> 00:01:34,850
locate him because it's just not supported by the browser and that therefore the fix for the user

17
00:01:34,850 --> 00:01:41,050
is to either use a more modern browser or use that alternative of entering an address here

18
00:01:41,320 --> 00:01:46,600
and with that, I think we're really doing our best here to make sure that we support this feature and

19
00:01:46,600 --> 00:01:48,160
give a helpful feedback

20
00:01:48,160 --> 00:01:51,460
if it's not available. Now after this if check,

21
00:01:51,460 --> 00:01:54,820
so if we don't make it in there and if we would make it in here we would return,

22
00:01:54,850 --> 00:01:59,650
so if we make it past this if check, we know that geolocation is available,

23
00:01:59,680 --> 00:02:04,460
well then I indeed want to get the current location of the user.

24
00:02:04,660 --> 00:02:10,450
So for that, we can use navigator.geolocation here and then call get current position,

25
00:02:10,450 --> 00:02:17,020
this will get the current position of the user and it takes two callback arguments here which we can

26
00:02:17,020 --> 00:02:22,990
pass in which will be the two functions in the end which will be triggered when we either succeed getting

27
00:02:22,990 --> 00:02:25,840
the position or when we fail.

28
00:02:25,840 --> 00:02:31,840
So here we either get a success result in the first callback function and I'm just passing in an anonymous

29
00:02:31,900 --> 00:02:33,250
arrow function here,

30
00:02:33,250 --> 00:02:39,880
this will be the argument automatically given to us by this browser API if we succeed or we make it into

31
00:02:39,880 --> 00:02:41,230
this second callback,

32
00:02:41,230 --> 00:02:46,540
the second argument here which I pass in, this would be my anonymous function that gets triggered if

33
00:02:46,540 --> 00:02:55,250
we fail to get the user location. Now let's start with the failed case, if we do fail to get the location

34
00:02:55,250 --> 00:02:55,920
here,

35
00:02:55,940 --> 00:03:02,290
well then I want to show an alert where I just say could not locate you unfortunately,

36
00:03:02,810 --> 00:03:06,320
please enter an address manually.

37
00:03:06,320 --> 00:03:13,370
So again even if we fail to automatically get the location here, we do offer an alternative to our users

38
00:03:13,550 --> 00:03:17,210
that tell them what they can do to still use our application

39
00:03:17,270 --> 00:03:22,970
and of course that is something you want to do in your applications so that you provide a good

40
00:03:23,090 --> 00:03:29,060
user experience. In the success result on the other hand, we know or we will get the user location

41
00:03:29,060 --> 00:03:30,890
data and we know that it succeeded,

42
00:03:30,920 --> 00:03:35,510
so that is where we will later then display the map in the end.

43
00:03:35,510 --> 00:03:42,830
So here for the moment, I just want to get my coordinates and I can get them out of my success result

44
00:03:43,010 --> 00:03:50,540
argument here and my coordinates should be a new object here where I have a latitude, so a lat key

45
00:03:51,050 --> 00:03:53,570
and where I have a lng, a long key

46
00:03:53,570 --> 00:03:58,340
and by the way of course you could create a new class for this which you then just create with the new

47
00:03:58,340 --> 00:04:02,480
keyword to make sure that you always have the correctly named properties in there,

48
00:04:02,480 --> 00:04:07,160
here I'll do it on the fly with this object literal notation.

49
00:04:07,340 --> 00:04:13,740
So my latitude can be received from success result.coords.latitude,

50
00:04:13,850 --> 00:04:18,620
I also get autocompletion here, if you want to see what else is in success result, you can of course

51
00:04:18,680 --> 00:04:22,780
always console log success result, that would be possible

52
00:04:22,910 --> 00:04:30,050
but here I know that my latitude will be stored here and here for successful result I got my longitude.

53
00:04:30,050 --> 00:04:34,850
Now one thing I will do here which you of course don't need for the application in general but which I

54
00:04:34,850 --> 00:04:42,290
want to have here is I'll add math random * 50 and I'll add this to both and I'm just doing this

55
00:04:42,350 --> 00:04:47,060
so that I can show you the result without you being able to locate me here,

56
00:04:47,060 --> 00:04:50,040
sorry about that but I don't want to expose my address here

57
00:04:50,090 --> 00:04:51,230
so that's what I'm doing here,

58
00:04:51,230 --> 00:04:56,330
of course you would omit this, this is not needed for the app, this will actually ensure that we're not

59
00:04:56,330 --> 00:04:57,950
getting the correct position,

60
00:04:57,950 --> 00:04:59,690
you of course want to get the correct position,

61
00:04:59,690 --> 00:05:04,600
I'm just doing this here to kind of not show my exact location here.

62
00:05:04,610 --> 00:05:10,280
So with that, we got the coordinates and for the moment, we can just console log them to see that it worked

63
00:05:10,280 --> 00:05:15,050
and of course later, we'll change this and make sure that we don't just log them but that we use them to

64
00:05:15,050 --> 00:05:16,790
show this on a map.

65
00:05:16,790 --> 00:05:22,250
Now with that, we need to make sure that we of course trigger our constructor here for the place finder

66
00:05:22,250 --> 00:05:24,680
and we do that by instantiating place finder.

67
00:05:24,770 --> 00:05:30,500
So here below my class, I will call new place finder and actually that's all I got to do here,

68
00:05:30,500 --> 00:05:35,360
we don't even need to store the instance in any constant because I'm not doing anything with the instance,

69
00:05:35,540 --> 00:05:37,290
I just want it to exist,

70
00:05:37,310 --> 00:05:44,270
of course you could nonetheless store it in a constant if you wanted to. With that if you save that and

71
00:05:44,270 --> 00:05:48,650
you then click on get current location, you should be asked by your browser whether you want to allow this

72
00:05:48,710 --> 00:05:52,700
and yes I do want to allow this and thereafter, we'll need to wait,

73
00:05:52,760 --> 00:05:57,980
we probably should add some kind of feedback here and then we get back a location here.

74
00:05:58,220 --> 00:06:01,940
So I get back a location here and therefore this works.

75
00:06:01,940 --> 00:06:08,330
Now before we start displaying this on any map, let's make sure that we provide some feedback to the

76
00:06:08,330 --> 00:06:13,640
user that tells the user that something is happening, so that whilst we're waiting for the location to

77
00:06:13,640 --> 00:06:18,920
be fetched, now in the second and third time this is super fast but whilst we're waiting for this to happen,

78
00:06:19,280 --> 00:06:24,440
we actually get some spinner or some feedback that shows hey something is happening,

79
00:06:24,440 --> 00:06:25,100
don't worry.