1
00:00:01,260 --> 00:00:04,980
‫Next up, let's display one marker and pop up

2
00:00:04,980 --> 00:00:07,083
‫for each of our cities.

3
00:00:08,520 --> 00:00:11,610
‫So, that means that we now need to get access

4
00:00:11,610 --> 00:00:16,200
‫to the cities, here in this map component, right?

5
00:00:16,200 --> 00:00:20,820
‫Well, for that, we thankfully have now our global state.

6
00:00:20,820 --> 00:00:24,210
‫So, the state that is living inside our context

7
00:00:24,210 --> 00:00:26,130
‫which is easily made available

8
00:00:26,130 --> 00:00:28,980
‫to every single component that we wanted.

9
00:00:28,980 --> 00:00:31,173
‫And so, now we want it here.

10
00:00:32,490 --> 00:00:36,600
‫So, we want to read cities out of the city's context

11
00:00:36,600 --> 00:00:41,337
‫And so, we use our custom hook called useCities.

12
00:00:43,500 --> 00:00:47,910
‫Alright, and so this is the power of having global state.

13
00:00:47,910 --> 00:00:51,660
‫Whenever you need a piece of state, you just grab it,

14
00:00:51,660 --> 00:00:52,770
‫and there it is.

15
00:00:52,770 --> 00:00:54,930
‫You don't have to pass any props.

16
00:00:54,930 --> 00:00:59,520
‫And yeah, it's really easy like this and really helpful.

17
00:00:59,520 --> 00:01:03,660
‫And so, now, of course, we don't want a marker here,

18
00:01:03,660 --> 00:01:05,580
‫just in this fixed position,

19
00:01:05,580 --> 00:01:10,020
‫but, instead, we want one marker for each city object.

20
00:01:10,020 --> 00:01:13,110
‫So, we're, basically, just going to loop over

21
00:01:13,110 --> 00:01:17,370
‫that cities array and display one of these for each.

22
00:01:17,370 --> 00:01:18,840
‫Now, before we can do that,

23
00:01:18,840 --> 00:01:23,670
‫we should go, first, to our data and clean it up a bit,

24
00:01:23,670 --> 00:01:26,850
‫'cause remember how we copied two of them,

25
00:01:26,850 --> 00:01:28,440
‫so, these last two here,

26
00:01:28,440 --> 00:01:31,103
‫and so, they have exactly the same coordinates

27
00:01:31,103 --> 00:01:34,743
‫as the other ones, so that we don't want.

28
00:01:36,750 --> 00:01:38,820
‫So, only these three.

29
00:01:38,820 --> 00:01:39,780
‫Now, notice, again,

30
00:01:39,780 --> 00:01:42,840
‫that each of them has the position property,

31
00:01:42,840 --> 00:01:46,110
‫and then, in there, we have lat and lng.

32
00:01:46,110 --> 00:01:49,320
‫And so, now, we are going to use this position, here,

33
00:01:49,320 --> 00:01:52,203
‫to display one marker for each of them.

34
00:01:54,240 --> 00:01:56,790
‫So, let's, actually, leave this code here,

35
00:01:56,790 --> 00:01:58,800
‫so we don't have to write it again.

36
00:01:58,800 --> 00:02:01,740
‫But, of course, we now need to enter JavaScript mode

37
00:02:01,740 --> 00:02:05,673
‫so that we can loop over this array.

38
00:02:07,137 --> 00:02:11,460
‫And then we want exactly to render a marker

39
00:02:11,460 --> 00:02:12,903
‫for the city object.

40
00:02:13,890 --> 00:02:15,780
‫So, where does this end?

41
00:02:15,780 --> 00:02:16,623
‫Right here?

42
00:02:19,260 --> 00:02:22,500
‫But, of course, now, we need to change the position, here.

43
00:02:22,500 --> 00:02:26,430
‫So, right now, it seems like we got multiple at this point,

44
00:02:26,430 --> 00:02:28,350
‫so we have all that shadow,

45
00:02:28,350 --> 00:02:31,230
‫but, of course, now, we need to change this.

46
00:02:31,230 --> 00:02:33,810
‫And so, just like the center prop,

47
00:02:33,810 --> 00:02:35,460
‫here, in the map container,

48
00:02:35,460 --> 00:02:38,760
‫this position prop expects an array.

49
00:02:38,760 --> 00:02:42,510
‫So, an array of the latitude first and then the longitude.

50
00:02:42,510 --> 00:02:47,510
‫And so, that is at city position.

51
00:02:47,940 --> 00:02:50,887
‫So, just as we saw, earlier, .let,

52
00:02:50,887 --> 00:02:55,320
‫and then the longitude is similar at position .lng.

53
00:02:58,560 --> 00:03:01,743
‫Now, here, we will also need a key.

54
00:03:05,085 --> 00:03:08,343
‫A key, and so, let's just use city.id.

55
00:03:09,840 --> 00:03:13,140
‫Now, okay, now that marker is gone from there

56
00:03:13,140 --> 00:03:18,140
‫but hopefully it is close by, in Madrid.

57
00:03:18,450 --> 00:03:22,110
‫So, and yes, nice.

58
00:03:22,110 --> 00:03:23,370
‫There it is.

59
00:03:23,370 --> 00:03:26,820
‫So, it corresponds to this city, right here.

60
00:03:26,820 --> 00:03:29,883
‫Let's just reload to get rid of those other cities.

61
00:03:31,140 --> 00:03:32,240
‫And...

62
00:03:33,780 --> 00:03:37,560
‫yeah, so we have one marker, here, in Madrid

63
00:03:37,560 --> 00:03:40,110
‫another one in Lisbon for this.

64
00:03:40,110 --> 00:03:43,413
‫And then, finally, of course, there will be one in Berlin.

65
00:03:44,790 --> 00:03:47,760
‫Nice, so that worked.

66
00:03:47,760 --> 00:03:50,850
‫Now, if we zoom in and then click,

67
00:03:50,850 --> 00:03:53,040
‫we, of course, get this pop-up

68
00:03:53,040 --> 00:03:55,680
‫but it still has this generic text.

69
00:03:55,680 --> 00:03:57,360
‫And so, now, we're going to do something

70
00:03:57,360 --> 00:03:59,073
‫a bit more customizable.

71
00:04:00,150 --> 00:04:02,070
‫Now, notice how this pop-up, here,

72
00:04:02,070 --> 00:04:04,140
‫has some styles applied to it.

73
00:04:04,140 --> 00:04:07,320
‫And so, that's because, when we inspect here,

74
00:04:07,320 --> 00:04:11,850
‫we can see that this pop-up, actually, gets a few classes

75
00:04:11,850 --> 00:04:13,710
‫that leaflet puts there.

76
00:04:13,710 --> 00:04:18,630
‫And so, I'm using those classes, here, in the CSS module,

77
00:04:18,630 --> 00:04:21,033
‫to style some things about the pop-up.

78
00:04:21,900 --> 00:04:23,730
‫So, all of this, right here.

79
00:04:23,730 --> 00:04:26,490
‫And so, if you build your own application with a map,

80
00:04:26,490 --> 00:04:29,820
‫you can just grab these styles if you want.

81
00:04:29,820 --> 00:04:31,950
‫So, we're styling the wrapper here,

82
00:04:31,950 --> 00:04:35,430
‫then the content itself, and then, also, the tip.

83
00:04:35,430 --> 00:04:37,641
‫So, that triangle, there.

84
00:04:37,641 --> 00:04:41,580
‫And so, there's a lot of different things to style.

85
00:04:41,580 --> 00:04:45,120
‫And notice how, here, again, we need to use this trick

86
00:04:45,120 --> 00:04:48,720
‫of making this global so that CSS modules

87
00:04:48,720 --> 00:04:52,020
‫then doesn't attach any of these random strings

88
00:04:52,020 --> 00:04:55,260
‫to our classes because then they would not map

89
00:04:55,260 --> 00:04:58,113
‫to the classes that leaflet exports.

90
00:04:59,280 --> 00:05:00,480
‫Now, right?

91
00:05:00,480 --> 00:05:04,143
‫But anyway, let's now customize, or text, in here.

92
00:05:05,190 --> 00:05:08,520
‫And here, really, we can have any content that we want.

93
00:05:08,520 --> 00:05:10,710
‫So, let's place the emoji in a span

94
00:05:10,710 --> 00:05:12,663
‫and then the city in a span.

95
00:05:13,620 --> 00:05:16,240
‫So, city.emoji

96
00:05:17,940 --> 00:05:22,293
‫and then another span element with city.cityName.

97
00:05:25,380 --> 00:05:27,663
‫And yeah, nice.

98
00:05:29,250 --> 00:05:31,773
‫So, we're making great progress here.

99
00:05:32,610 --> 00:05:35,790
‫And yeah, the next thing that we want to do

100
00:05:35,790 --> 00:05:38,730
‫is that when we click, here, on one of these cities,

101
00:05:38,730 --> 00:05:42,030
‫then it should not only open the city component, here,

102
00:05:42,030 --> 00:05:45,990
‫but it should also move to that position on the map.

103
00:05:45,990 --> 00:05:47,820
‫So, basically, we will want

104
00:05:47,820 --> 00:05:51,540
‫to update our map position state, here.

105
00:05:51,540 --> 00:05:55,413
‫And so, again, let's leave that for the next lecture.