1
00:00:00,000 --> 00:00:01,022
[No audio]

2
00:00:01,023 --> 00:00:02,940
Hi again, and welcome to this new

3
00:00:02,940 --> 00:00:04,890
lecture. In this lecture, you're going

4
00:00:04,890 --> 00:00:07,800
to learn how to add points to the map

5
00:00:07,800 --> 00:00:11,375
that we built previously, which is this

6
00:00:11,400 --> 00:00:15,060
one here. So all we have here is a base

7
00:00:15,060 --> 00:00:18,570
map. So the background map, which is a

8
00:00:18,570 --> 00:00:20,910
layer, actually some layer coming from

9
00:00:20,940 --> 00:00:22,983
OpenStreetMap service.

10
00:00:22,990 --> 00:00:24,997
[No audio]

11
00:00:24,998 --> 00:00:27,780
So OpenStreetMaps, they give you a layer,

12
00:00:27,810 --> 00:00:31,140
actually folium will serve you this

13
00:00:31,140 --> 00:00:33,450
layer on the background through

14
00:00:34,110 --> 00:00:36,810
JavaScript. But you can also add other

15
00:00:36,810 --> 00:00:39,780
layers as well, other base layers, and

16
00:00:39,810 --> 00:00:43,560
also points, which you can add on top of

17
00:00:43,560 --> 00:00:45,810
the base layer. So let me go to back to

18
00:00:45,810 --> 00:00:47,820
the code. This is what we wrote in the

19
00:00:47,820 --> 00:00:49,650
previous lecture. Actually, we wrote it

20
00:00:49,680 --> 00:00:53,220
in here, in the interactive shell. But I

21
00:00:53,220 --> 00:00:56,130
just copied and pasted this in a file so

22
00:00:56,130 --> 00:00:58,590
that we have it, and that we can add more

23
00:00:58,590 --> 00:01:02,670
code now on top of this. So again, as I

24
00:01:02,670 --> 00:01:07,483
told you can do help folium.Map

25
00:01:08,255 --> 00:01:10,145
and you see you can add other things in

26
00:01:10,216 --> 00:01:15,046
here, such as here you have the Parameters.

27
00:01:15,295 --> 00:01:19,545
So again, add the tiles, the default is OpenStreetMaps,

28
00:01:19,570 --> 00:01:23,067
but if you specify another tile, such as

29
00:01:23,069 --> 00:01:25,255
[No audio]

30
00:01:25,257 --> 00:01:29,750
Mapbox Bright and that has to be

31
00:01:29,751 --> 00:01:33,660
in quotes. As you can see in here,

32
00:01:33,662 --> 00:01:40,198
[No audio]

33
00:01:40,223 --> 00:01:43,670
in the tiles parameter, this expects a

34
00:01:43,858 --> 00:01:47,250
string object, location for instance, it

35
00:01:47,250 --> 00:01:49,410
expects a tuple or a list, and that's

36
00:01:49,410 --> 00:01:51,600
what we pass, we pass a list of

37
00:01:51,630 --> 00:01:54,180
coordinates, though it would be an

38
00:01:54,180 --> 00:02:00,270
integer, an integer height. As long you

39
00:02:00,270 --> 00:02:02,507
have other options as well, which you can try

40
00:02:02,508 --> 00:02:05,940
by yourself, just want to try this one for now.

41
00:02:05,941 --> 00:02:08,848
[No audio]

42
00:02:08,850 --> 00:02:11,307
Let me open a new Python Shell

43
00:02:11,308 --> 00:02:13,458
[No audio]

44
00:02:13,460 --> 00:02:17,670
python3 map1, make sure you have

45
00:02:17,670 --> 00:02:21,097
saved your script, execute.

46
00:02:21,098 --> 00:02:24,271
[No audio]

47
00:02:24,273 --> 00:02:26,862
Then you can go back to the folder and open map.

48
00:02:28,370 --> 00:02:33,777
Let me go to Firefox, Ctrl R, or Command R to reload.

49
00:02:34,367 --> 00:02:36,562
And you'll see that the background has changed.

50
00:02:36,563 --> 00:02:39,613
So we have a new base map now.

51
00:02:39,615 --> 00:02:45,748
[No audio]

52
00:02:45,750 --> 00:02:47,880
Okay, let's go back to the script now.

53
00:02:48,180 --> 00:02:51,120
And what I'm going to do is I'm going to

54
00:02:51,120 --> 00:02:54,450
add some point markers on top of the

55
00:02:54,450 --> 00:02:59,002
base map, and so how do you do that? Well,

56
00:03:00,883 --> 00:03:04,241
if you do dir folium.

57
00:03:04,242 --> 00:03:07,609
[No audio]

58
00:03:07,611 --> 00:03:11,151
here you can see that you have some objects.

59
00:03:12,010 --> 00:03:17,083
And the one we want is a marker, or a

60
00:03:17,722 --> 00:03:23,435
CircleMarker. So I'll try them both. But I

61
00:03:23,460 --> 00:03:26,190
want to explain you the logic on how you

62
00:03:26,190 --> 00:03:28,757
add objects to the Map object.

63
00:03:29,655 --> 00:03:32,100
So we import folium, we create the Map object, and

64
00:03:32,100 --> 00:03:34,320
then between the Map object and the Save

65
00:03:34,350 --> 00:03:38,100
methods of the Map object, you can add

66
00:03:38,190 --> 00:03:41,700
elements, so objects to that map, and

67
00:03:41,776 --> 00:03:44,578
what I want to add in this case is a marker. So

68
00:03:45,838 --> 00:03:51,660
I can do map.add_child.

69
00:03:53,550 --> 00:03:56,460
So we use the add_child method

70
00:03:56,490 --> 00:03:58,890
to add children. So these are objects

71
00:03:58,890 --> 00:04:00,420
that I'm talking about are referred to

72
00:04:00,420 --> 00:04:02,610
as children when you add them to the

73
00:04:02,610 --> 00:04:05,850
map. So map.add_child, and then you

74
00:04:05,850 --> 00:04:09,030
want to point to the folium.Marker.

75
00:04:09,750 --> 00:04:13,200
Now this Marker method, this expects some

76
00:04:13,710 --> 00:04:19,245
arguments itself, you can go help folium.Marker.

77
00:04:19,246 --> 00:04:22,032
[No audio]

78
00:04:22,034 --> 00:04:23,880
So create a simple stock

79
00:04:23,880 --> 00:04:26,460
Leaflet marker on the map. Leaflet is a

80
00:04:26,460 --> 00:04:29,190
JavaScript library that helps you to

81
00:04:29,190 --> 00:04:31,740
visualize this, that is the engine that

82
00:04:31,740 --> 00:04:34,104
creates those maps on the browser.

83
00:04:35,921 --> 00:04:39,660
So Python creates the JavaScript code using

84
00:04:39,668 --> 00:04:43,628
the Leaflet library and. So markers

85
00:04:43,650 --> 00:04:46,350
allow you to add popups. So when you

86
00:04:46,350 --> 00:04:48,780
click a marker on the map, it allows you

87
00:04:48,780 --> 00:04:52,380
to show information, and so parameters

88
00:04:52,410 --> 00:04:54,900
you need to pass in location parameter

89
00:04:55,530 --> 00:04:58,020
to the marker in order to visualize it.

90
00:04:58,710 --> 00:05:03,450
So location equals to, so it's a

91
00:05:03,450 --> 00:05:09,912
tuple or list, and let's say 38.2

92
00:05:10,654 --> 00:05:17,181
and -99.1 and you can also pass.

93
00:05:18,399 --> 00:05:22,967
So after the list a popup

94
00:05:22,992 --> 00:05:24,992
[No audio]

95
00:05:25,017 --> 00:05:28,654
parameter, which should be like, Hi

96
00:05:28,655 --> 00:05:31,027
[Author typing]

97
00:05:31,029 --> 00:05:35,100
I am a Marker. I also need to pass

98
00:05:35,520 --> 00:05:39,990
the icon parameter, which actually is

99
00:05:40,020 --> 00:05:44,651
another object that comes from folium.Icon

100
00:05:44,652 --> 00:05:46,683
[No audio]

101
00:05:46,685 --> 00:05:48,232
that which expects for me

102
00:05:48,240 --> 00:05:51,450
to pass a color there, like, let's say

103
00:05:51,450 --> 00:05:54,990
green and then basically, that's it.

104
00:05:56,520 --> 00:06:00,090
Make sure your brackets are correct. So

105
00:06:00,090 --> 00:06:02,130
have three brackets here, three closing

106
00:06:02,130 --> 00:06:07,205
brackets, and one, and two, and three,

107
00:06:07,230 --> 00:06:10,249
opening around brackets. Okay.

108
00:06:10,250 --> 00:06:13,250
[No audio]

109
00:06:13,252 --> 00:06:17,490
So the script, go to the other terminal and

110
00:06:17,520 --> 00:06:23,190
execute, go to Firefox, reload, and here is a

111
00:06:23,190 --> 00:06:27,360
marker. If I click, I get the popup

112
00:06:27,390 --> 00:06:29,796
message in a nice window here.

113
00:06:29,820 --> 00:06:31,936
[No audio]

114
00:06:31,961 --> 00:06:34,740
So that's how you add markers to your map.

115
00:06:35,190 --> 00:06:38,340
However, I would suggest you follow a

116
00:06:38,340 --> 00:06:40,710
slightly different approach to add

117
00:06:40,775 --> 00:06:43,685
a children to your map. Now, what else

118
00:06:43,710 --> 00:06:47,120
suggests is to actually create a feature group

119
00:06:48,780 --> 00:06:51,620
folium.FeatureGroup

120
00:06:51,621 --> 00:06:54,673
[No audio]

121
00:06:54,675 --> 00:06:56,240
and you can give it a name,

122
00:06:56,241 --> 00:06:58,296
[No audio]

123
00:06:58,298 --> 00:07:01,919
like My Map, and then what happens is that

124
00:07:02,626 --> 00:07:06,480
in this feature group, so the marker is a

125
00:07:06,480 --> 00:07:09,060
feature, and with feature groups, you can

126
00:07:09,060 --> 00:07:12,030
add a multiple features to the feature

127
00:07:12,030 --> 00:07:13,752
groups, so you can add the marker, you can add the

128
00:07:13,799 --> 00:07:19,140
like polygons, etc. And so instead of

129
00:07:19,140 --> 00:07:22,410
saying map, you do the feature group

130
00:07:22,440 --> 00:07:25,140
object, so this variable that I created

131
00:07:25,140 --> 00:07:27,990
in here, I'm passing here, and then

132
00:07:28,050 --> 00:07:32,670
after that, you do map.add_child,

133
00:07:33,810 --> 00:07:35,400
and you pass the feature group in

134
00:07:35,400 --> 00:07:39,480
there. So this is more. So this is done

135
00:07:39,480 --> 00:07:41,850
to keep your code more organized, and it

136
00:07:41,850 --> 00:07:43,860
also helps you later when you want to

137
00:07:43,860 --> 00:07:47,940
add a control layer, a layer

138
00:07:47,940 --> 00:07:50,760
control feature in your map to allow you

139
00:07:50,760 --> 00:07:53,483
to switch other layers on and off. So we'll

140
00:07:53,484 --> 00:07:57,697
look at this later, and save this script, and let me try.

141
00:07:57,698 --> 00:08:00,469
[No audio]

142
00:08:00,471 --> 00:08:01,639
Reload the page.

143
00:08:01,640 --> 00:08:04,262
[No audio]

144
00:08:04,264 --> 00:08:05,788
So we don't have any change,

145
00:08:06,578 --> 00:08:08,508
things we got the same,

146
00:08:08,917 --> 00:08:10,020
which means a feature

147
00:08:10,020 --> 00:08:12,450
group is working fine. But as I said,

148
00:08:12,930 --> 00:08:14,640
it's good to keep the code organized.

149
00:08:14,927 --> 00:08:17,100
And it also helps you later when you add

150
00:08:17,640 --> 00:08:20,190
a layer control feature. That's what I

151
00:08:20,190 --> 00:08:22,200
wanted to teach you for now. And I'll

152
00:08:22,200 --> 00:08:23,424
talk to you later.