1
00:00:02,110 --> 00:00:04,450
How can we make sure that we can pick a place?

2
00:00:04,870 --> 00:00:10,900
Well on map view, in your map screen, you can add an onPress handler and this fires whenever you tap somewhere

3
00:00:10,900 --> 00:00:11,580
on the map

4
00:00:11,680 --> 00:00:16,690
and with that I don't mean taps when you scroll but when you tap there without scrolling, so if you really

5
00:00:16,690 --> 00:00:23,130
want to select something. This will then fire and this therefore can be bound to a function which I define

6
00:00:23,170 --> 00:00:27,010
in here which should kind of store the selected place.

7
00:00:27,010 --> 00:00:33,940
So here I'll have my select location handler function which gets an event object and that's what I bind

8
00:00:33,940 --> 00:00:36,260
to onPress here.

9
00:00:36,260 --> 00:00:42,440
Now we can look into this event to get a feeling for what's inside there, which kind of data we get.

10
00:00:42,440 --> 00:00:44,300
So let me save this and let's test it,

11
00:00:44,330 --> 00:00:52,550
let's go to the map and then once this is loaded, simply tap somewhere on the map, like here.

12
00:00:52,550 --> 00:00:58,450
If we now go back, this is the output I get and in there you see it's quite a big object,

13
00:00:58,700 --> 00:01:02,280
in the end we get a bunch of data in there which we don't really need,

14
00:01:02,510 --> 00:01:04,700
it's this synthetic event here.

15
00:01:04,850 --> 00:01:10,880
What we do have, what's interesting is this native event property which is yet another object, which

16
00:01:10,880 --> 00:01:15,170
has a coordinate property which is yet another object, which has a latitude and longitude.

17
00:01:15,170 --> 00:01:17,090
That's what we're interested in in the end, right,

18
00:01:17,090 --> 00:01:18,520
that's what we want to find out,

19
00:01:18,530 --> 00:01:19,700
that's the coordinate pair

20
00:01:19,700 --> 00:01:21,000
we want to get.

21
00:01:21,020 --> 00:01:24,640
So this is the place, the coordinates the user tapped on,

22
00:01:24,650 --> 00:01:30,850
this is what I want to store here and it would be nice for a start to add a marker in that place

23
00:01:30,860 --> 00:01:34,430
so that we mark that place on the map. For that

24
00:01:34,420 --> 00:01:42,260
of course we can use state to save that selected place and in the component, then initialize this up here

25
00:01:43,100 --> 00:01:48,170
and have our selected location and set the selected

26
00:01:50,500 --> 00:01:58,870
location with the help of use state. Initially it's empty, we have no selected location initially and

27
00:01:58,870 --> 00:02:01,200
then we can create a marker here

28
00:02:01,270 --> 00:02:08,170
if we do have one. For that, we can import the marker component from native maps by adding some named imports

29
00:02:08,170 --> 00:02:14,590
here besides this default import we have and we can import marker from React Native maps, it's as simple as

30
00:02:14,590 --> 00:02:20,530
that and we can render this marker by adding it between the opening and closing tags of map view which

31
00:02:20,530 --> 00:02:21,470
we now need,

32
00:02:21,640 --> 00:02:23,780
so we can add a marker here.

33
00:02:23,870 --> 00:02:27,090
Now this marker needs some configuration,

34
00:02:27,170 --> 00:02:32,840
otherwise React Native maps doesn't know where to show it. We can add a title for example, picked location

35
00:02:33,230 --> 00:02:40,560
but more importantly, you can add a coordinate prop here and that expects to get an object with a latitude

36
00:02:40,590 --> 00:02:53,260
and longitude in there. So here, I'll add a new variable, marker coordinates let's say and if I have a

37
00:02:53,320 --> 00:03:00,190
selected location and that's the state I'm managing up therem if I do have that, then I want to set marker

38
00:03:00,190 --> 00:03:05,050
coordinates equal to an object where you need to have a latitude named latitude,

39
00:03:05,080 --> 00:03:06,070
so it's not lat,

40
00:03:06,070 --> 00:03:10,890
it needs to be latitude because the marker component will look for a property named latitude

41
00:03:12,100 --> 00:03:15,390
and that can be the 

42
00:03:16,710 --> 00:03:17,860
selectedLocation.lat

43
00:03:17,970 --> 00:03:22,970
let's say, it's up to us how we then save this, we're not doing it right now but later I will save it

44
00:03:22,970 --> 00:03:28,100
such that we have a lat prop there and longitude which needs to be named like this which can hold the

45
00:03:28,100 --> 00:03:31,150
value stored in selectedLocation.lng.

46
00:03:31,370 --> 00:03:36,560
Now marker coordinates is conditionally set and here we can now check if marker conditions does exist

47
00:03:36,890 --> 00:03:44,100
and if it does, we use this shortcut to also output a marker here. Now marker coordinates is also what

48
00:03:44,100 --> 00:03:45,900
we can feed into here

49
00:03:45,900 --> 00:03:49,890
and please note this is coordinate, not coordinates, it's just coordinate.

50
00:03:49,890 --> 00:03:56,260
At this point it's our marker coordinates and now we just have to make sure that we eventually set the

51
00:03:56,250 --> 00:03:57,420
selected location

52
00:03:57,620 --> 00:04:01,740
and of course I want to do this here in my select location handler. There

53
00:04:01,820 --> 00:04:08,330
I want to call set selected location to set my state, pass an object in there and set my state to an object

54
00:04:08,330 --> 00:04:16,450
with a lat key because I'm trying to extract lat down there of event.nativeEvent as you saw and

55
00:04:16,490 --> 00:04:22,580
in there, there was this coordinate property which has a latitude property and then lng which I'm also

56
00:04:22,580 --> 00:04:31,520
extracting down there should be set to event.nativeEvent.coordinates.longitude. And with this

57
00:04:31,520 --> 00:04:35,480
code, we should be able to view a marker on the map. So let's give it a try,

58
00:04:35,480 --> 00:04:36,900
let's go to iOS,

59
00:04:36,950 --> 00:04:38,240
load the map there

60
00:04:41,190 --> 00:04:47,640
and pick some place and we see a marker at the place where I click. The same on Android hopefully, let's

61
00:04:47,640 --> 00:04:53,480
give it a try there, open the map and indeed there

62
00:04:53,520 --> 00:04:54,720
if I tap somewhere,

63
00:04:58,440 --> 00:05:01,380
I also do place my marker there.

64
00:05:01,410 --> 00:05:05,290
So this is how we can work with markers and how we can select places,

65
00:05:05,340 --> 00:05:06,820
it's all nice.

66
00:05:06,810 --> 00:05:12,090
Now ultimately I want to be able to kind of click a save button up there which doesn't exist yet, which

67
00:05:12,090 --> 00:05:19,750
then closes this map and passes the selected location back to my new place screen in the end,

68
00:05:19,750 --> 00:05:24,940
right, which I do have here as well. I want to go back to that screen and of course kind of save my selected

69
00:05:24,950 --> 00:05:25,500
location.