1
00:00:01,360 --> 00:00:03,430
Well we got our map moving which is fantastic.

2
00:00:03,460 --> 00:00:08,170
But as we just saw if a user starts a drag around on this they just kind of get snapped back to the

3
00:00:08,170 --> 00:00:09,430
same location.

4
00:00:09,430 --> 00:00:12,430
Maybe that's not the best interaction we could possibly make.

5
00:00:12,450 --> 00:00:16,330
So in this video I want to figure out a different way that we could somehow represent a user's location

6
00:00:16,330 --> 00:00:18,610
in the world all right.

7
00:00:18,640 --> 00:00:20,400
I'm inside of my mapped out G.S. file.

8
00:00:20,560 --> 00:00:25,840
We saw just a moment ago that we could make use of the Poly line import from React Native maps to draw

9
00:00:25,870 --> 00:00:30,550
a line on our map maybe a better way to represent a user's current location would be to draw just a

10
00:00:30,550 --> 00:00:33,070
little circle or something like that.

11
00:00:33,100 --> 00:00:37,750
So it turns out that we can very easily draw a circle on our map in a very similar way in which we drew

12
00:00:37,750 --> 00:00:39,120
our poly line.

13
00:00:39,160 --> 00:00:44,980
So I'm going to import circle from React Native maps in addition to poly line.

14
00:00:45,280 --> 00:00:49,540
This is a react component that we can display inside of our map view.

15
00:00:49,540 --> 00:00:55,480
So I'm going to once again expand my map view element right here so I'll put in a closing tag and then

16
00:00:55,480 --> 00:01:01,280
inside there we can display a circle element when we make a circle we have to pass in a couple of different

17
00:01:01,280 --> 00:01:02,110
props.

18
00:01:02,210 --> 00:01:06,200
The first one we have to put in is something called as you might guess center.

19
00:01:06,200 --> 00:01:11,230
So this is going to be the exact latitude longitude of where we want to draw a circle on our map.

20
00:01:11,240 --> 00:01:15,830
We already have access to a latitude and longitude in the form of current location records.

21
00:01:16,460 --> 00:01:21,810
So for our center we can pass in current location dot courts.

22
00:01:21,970 --> 00:01:26,810
So React Native map is going to take the latitude longitude out of there and use that as the basis for

23
00:01:26,810 --> 00:01:29,800
our circle before we try to test this out.

24
00:01:29,800 --> 00:01:34,150
However we also have to specify some information about the size of the circle and what color is should

25
00:01:34,150 --> 00:01:35,750
be drawn with as well.

26
00:01:35,950 --> 00:01:39,270
So we could put a radius in here of like an arrow maybe 120.

27
00:01:39,280 --> 00:01:45,210
We'll try that out really quickly and then we could put in a stroke color which will be essentially

28
00:01:45,240 --> 00:01:47,040
a border on the circle.

29
00:01:47,100 --> 00:01:54,270
So the stroke color can be a RG be a value we can use an RG be a value to essentially apply some color

30
00:01:54,270 --> 00:01:56,060
with some opacity to it.

31
00:01:56,100 --> 00:02:07,140
So I got to put in here RG be a 158 158 255 and 1.0 like so and then going to also define a filled color

32
00:02:07,200 --> 00:02:13,100
which is going to be the color inside the circle as opposed to its border so this will be an RGA as

33
00:02:13,100 --> 00:02:13,400
well.

34
00:02:13,430 --> 00:02:19,000
We'll do 158 to 158 255 but then this time around we're gonna do a opacity.

35
00:02:19,010 --> 00:02:22,310
So the fourth value in here of zero point three.

36
00:02:22,340 --> 00:02:24,250
Like so.

37
00:02:24,290 --> 00:02:24,590
All right.

38
00:02:24,620 --> 00:02:26,990
Let's now save this and test that out.

39
00:02:26,990 --> 00:02:28,740
So go back go to check create.

40
00:02:29,000 --> 00:02:31,290
And now I've got that kind of nice looking circle right there.

41
00:02:31,850 --> 00:02:38,370
So the radius value right here is the meter diameter of the circle maybe its radius honestly a radius.

42
00:02:38,390 --> 00:02:39,170
I'm crazy.

43
00:02:39,170 --> 00:02:41,320
It says radius right there of course it's the radius.

44
00:02:41,390 --> 00:02:44,080
So chances are a radius of 120 is a little bit too large.

45
00:02:44,090 --> 00:02:49,100
So we might want to dial that down to just like maybe five or 10 meters or something like that.

46
00:02:49,160 --> 00:02:56,670
So if we try that out OK maybe a little bit too small so we'll try going up to 15 and.

47
00:02:56,690 --> 00:03:00,360
All right still a little bit small but I'd say that's kind of reasonable.

48
00:03:00,410 --> 00:03:04,510
Maybe I'll just stick with 30 and call it good ok.

49
00:03:04,520 --> 00:03:06,400
I think that's pretty reasonable right there.

50
00:03:06,420 --> 00:03:12,580
So now if we wanted to we could drop off the region drop off our map view it's now we will not get the

51
00:03:12,580 --> 00:03:16,060
automatic updating map but the circle will be updated.

52
00:03:16,060 --> 00:03:22,530
So if I save this now and go back to track Create Now the map is kind of fixed but we can see the circle

53
00:03:22,530 --> 00:03:25,860
moving around to indicate exactly where our user is.

54
00:03:25,920 --> 00:03:29,820
I'd say that this is probably a better interaction because now the user can kind of move around a little

55
00:03:29,820 --> 00:03:34,190
bit in this map and not have it just kind of mysteriously snap around on them.

56
00:03:34,290 --> 00:03:39,240
On the flip side if a user moves outside of the bounds of this map well the user is not going to really

57
00:03:39,240 --> 00:03:40,800
understand where they are.

58
00:03:40,920 --> 00:03:46,440
We could very easily add in some code to update the maps position if the position the circle kind of

59
00:03:46,440 --> 00:03:51,540
goes outside of a bounding box indicated by our latitude Delta and much to Delta right there.

60
00:03:51,630 --> 00:03:56,120
But I'll leave that kind of as a exercise for you as opposed to showing how to do it myself.

61
00:03:56,360 --> 00:03:58,130
So it's definitely looks like an improvement.

62
00:03:58,140 --> 00:04:03,690
So now we probably need to start making sure that we can record a user's location over time then eventually

63
00:04:03,690 --> 00:04:05,850
draw it out on our map as a line.

64
00:04:05,850 --> 00:04:06,880
So quick pause and I'll start.

65
00:04:06,870 --> 00:04:08,280
Take her that in the next video.