1
00:00:00,240 --> 00:00:04,950
Hi again! I hope you followed the previous
video where I presented you the map that

2
00:00:04,950 --> 00:00:09,809
you're going to build in this section.
So that was a web map and as you may

3
00:00:09,809 --> 00:00:15,450
realize to build that web map the default
Python installation is not enough

4
00:00:15,450 --> 00:00:22,439
because logically Python cannot have
every possible functionality by default

5
00:00:22,439 --> 00:00:27,900
because if it had all the
functionalities then Python would become

6
00:00:27,900 --> 00:00:34,410
very heavy, therefore is a smart choice
to have external libraries that you may

7
00:00:34,410 --> 00:00:39,870
choose to install or not and this is the
case of a web mapping, so to build the

8
00:00:39,870 --> 00:00:43,770
web map that I showed you in the
previous lecture you need a library,

9
00:00:43,770 --> 00:00:48,480
a third-party library which is called
Folium, so as you may realize you need to

10
00:00:48,480 --> 00:00:54,719
install that library. Now just note. I had
some previous videos about this section,

11
00:00:54,719 --> 00:00:59,280
some old videos, but I had to change them
so I'm recording new videos now. This is

12
00:00:59,280 --> 00:01:04,379
a new video, updated video and all the
next videos of this section because

13
00:01:04,379 --> 00:01:10,140
Folium had made some changes in the code
compared to the previous versions and

14
00:01:10,140 --> 00:01:16,950
therefor I had to remake the videos.
Now, this one I'm using a Mac computer but

15
00:01:16,950 --> 00:01:21,049
that will not make any difference, so if
you're on a Windows, Linux, or Mac

16
00:01:21,049 --> 00:01:26,700
everything will work exactly the same.
The only difference is the way you open

17
00:01:26,700 --> 00:01:33,930
Atom of course. So on on Windows please
create an empty folder where you'll be

18
00:01:33,930 --> 00:01:39,180
keeping the files for this project and
so my folder here on Mac is mapping and on

19
00:01:39,180 --> 00:01:47,130
Windows you can hold the shift and right
click and then go to open Atom here to

20
00:01:47,130 --> 00:01:56,360
open Atom in this folder. On a Mac you
can press command space, Atom

21
00:02:00,070 --> 00:02:10,680
and I'm going to view, developer opening
dev mode and then locate the folder

22
00:02:10,680 --> 00:02:14,730
and click open.
Yeah, that's it. I'm going to close all

23
00:02:18,670 --> 00:02:31,450
these. Let me open the terminal and now go
ahead and install Folium. To do that you

24
00:02:31,450 --> 00:02:39,070
need to type pip install Folium. Normally
you'd have to do this on Windows. On Mac

25
00:02:39,070 --> 00:02:44,770
if you have two installations of Python
you may need to do pip 3 so that will

26
00:02:44,770 --> 00:02:50,580
explicitly say to install Folium for
Python 3.

27
00:02:51,590 --> 00:02:57,959
So Folium was installed successfully.
If you have a message saying that Jinja2

28
00:02:57,959 --> 00:03:06,650
is required for this package then just
go ahead and do tip 3 install Jinja2.

29
00:03:06,650 --> 00:03:12,450
However I expect that Folium will
install Jinja2 by default as it did

30
00:03:12,450 --> 00:03:16,650
for me so you should be good to go.
Once you've done that I'm going to open

31
00:03:16,650 --> 00:03:23,340
Python, actually Python 3, on a Mac you
need to specify Python 3 explicitly and

32
00:03:23,340 --> 00:03:31,290
what I'm going to do now is I'm going to
create a basic web map and I'm going to

33
00:03:31,290 --> 00:03:36,799
use a Python interactive shell for that
so that I show you things around.

34
00:03:36,799 --> 00:03:42,810
So try to import Folium. If you get no errors
that means Folium has been installed

35
00:03:42,810 --> 00:03:52,440
successfully. Now how does Folium work?
Well, everything spins around a so called

36
00:03:52,440 --> 00:03:59,790
map object so the very first thing you
need to do once you import Folium is you

37
00:03:59,790 --> 00:04:06,269
need to create a map object, so I'm using
a variable to store that a map object,

38
00:04:06,269 --> 00:04:17,220
and then equal to Folium dot map, so this
is the class that create this object.

39
00:04:17,220 --> 00:04:24,830
If you want you can actually check
dir Folium to get a list of available

40
00:04:24,830 --> 00:04:32,010
objects that you can use on Folium so
here is map. Ignore the others for now.

41
00:04:32,010 --> 00:04:39,000
We'll go through them later. You can also
ask for help now. Folium.map to see

42
00:04:39,000 --> 00:04:45,870
what you can pass to this map object.
Create a map with Folium and Leaflet.js.

43
00:04:45,870 --> 00:04:52,889
So what folium does is it actually
produces, you use Python, so you write Python

44
00:04:52,889 --> 00:04:58,740
code and that Python code will convert
automatically to JavaScript, and HTML

45
00:04:58,740 --> 00:05:03,600
code, and CSS code because you need
JavaScript, CSS,

46
00:05:03,600 --> 00:05:09,450
and HTML to create web maps. You cannot
do that with Python code directly

47
00:05:09,450 --> 00:05:15,480
so the browser reads HTML, CSS, and
JavaScript, and then renders those, the code

48
00:05:15,480 --> 00:05:22,740
of these three programming languages to
elements so like text, and lines, and

49
00:05:22,740 --> 00:05:29,160
points, and pictures. So that's what
Folium does and that's a wonderful thing

50
00:05:29,160 --> 00:05:34,560
that you can do that with Python through
Python. Anyway you can look here, down

51
00:05:34,560 --> 00:05:42,120
here any parameters, you can pass
a location parameter in here and you can

52
00:05:42,120 --> 00:05:47,040
specify the width. Anyway if you don't
specify the width, a default width of

53
00:05:47,040 --> 00:05:53,730
100% of the browser area will be used so
you don't have to pass width and height

54
00:05:53,730 --> 00:06:00,030
as well and then you have tiles default
is Open Street map tiles, so tiles is the

55
00:06:00,030 --> 00:06:04,760
background of the map. You're going to
see that in a minute.

56
00:06:04,760 --> 00:06:14,280
You have other parameters as well which
you can look by yourself I believe. Okay,

57
00:06:14,280 --> 00:06:20,180
I press Q to exit the help and let's go
ahead and create the map object finally.

58
00:06:20,180 --> 00:06:31,140
Folium.map, so location you need
to pass a location parameter there so that the

59
00:06:31,140 --> 00:06:39,030
map knows where to open, so it may open
let's say near Alaska, or near Greenland,

60
00:06:39,030 --> 00:06:43,230
or South Africa. We're talking about the
initial view, but then you can zoom in

61
00:06:43,230 --> 00:06:49,700
and out, so let me pass a random location.
Locations by the way are given through

62
00:06:49,700 --> 00:06:55,170
coordinates and by default you need to
pass geographic coordinates which is

63
00:06:55,170 --> 00:07:05,910
latitude and longitude, and so latitude
ranges from minus 90 to 0 to 90, so let

64
00:07:05,910 --> 00:07:15,210
me pass 80 there. By the way this goes inside
the list actually, so 80, a comma and then

65
00:07:15,210 --> 00:07:23,280
the longitude. The longitude ranges
from zero to minus 180 and zero to 180.

66
00:07:23,280 --> 00:07:35,250
Let me pass minus 100 and close the bracket.
So you pass a list of coordinates to

67
00:07:35,250 --> 00:07:40,410
location and actually that's enough.
You can have a map object with that.

68
00:07:40,410 --> 00:07:46,470
Execute. You don't get an error, that
means everything is working fine.

69
00:07:46,470 --> 00:07:52,170
So now you have a map object, but that's
just an object inside Python. You haven't

70
00:07:52,170 --> 00:08:00,870
translated that object into HTML and CSS
and JavaScript code just yet. So what you

71
00:08:00,870 --> 00:08:09,870
need to do next is point to that map
object, and then use the save method and

72
00:08:09,870 --> 00:08:17,420
then pass a name for the map, for the map
file that will be created and of course

73
00:08:17,420 --> 00:08:25,260
the maps will be created in HTML format,
so HTML is what contains all these

74
00:08:25,260 --> 00:08:31,920
elements that render on the browser, so
text and visuals and so on. Close the

75
00:08:31,920 --> 00:08:40,050
bracket, execute, and as you see a file
was added in here. Map1.HTML. Let

76
00:08:40,050 --> 00:08:48,690
me give to folder, double-click that, that
will open in your default browser.

77
00:08:48,690 --> 00:08:53,090
So this is just a random location.
I don't know where it is.

78
00:08:53,090 --> 00:09:05,070
Meighen island and that seems to be in
Canada, very north of Canada. Yeah, this is

79
00:09:05,070 --> 00:09:12,570
it, this is the web map. If you zoom in
you'll see more details on the map like

80
00:09:12,570 --> 00:09:19,320
that, so the more you zoom in the more
elements you see. And yeah, that's what

81
00:09:19,320 --> 00:09:24,210
I wanted to show you, and if you want
another location you'd want to change

82
00:09:24,210 --> 00:09:31,230
the coordinates in here, in location,
but if you don't know

83
00:09:31,230 --> 00:09:36,390
what coordinates your favorite place has
there are, there may be different ways to

84
00:09:36,390 --> 00:09:45,870
discover that, but a quick way is to go
to maps.google.com. Let's say you want to

85
00:09:45,870 --> 00:09:53,910
know the, let me zoom in here, you know
you want to center the map around this

86
00:09:53,910 --> 00:10:01,530
location, so right click there and go to
what's here, copy those coordinates,

87
00:10:01,530 --> 00:10:15,080
or if you cannot copy them,
just to remember them, so 38.58

88
00:10:15,080 --> 00:10:20,820
approximately and minus 99.09.

89

177
00:10:20,820 --> 00:10:26,820
Okay, then you need to save the map
again, map1.HTML. That will

90
00:10:26,820 --> 00:10:35,340
overwrite the previous map, so go here,
reload, and you see now we have

91
00:10:35,340 --> 00:10:38,990
a different center of the map.
And of course you can also play around

92
00:10:43,860 --> 00:10:53,339
with the zoom, so you can add a zoom
parameter in here. This is called zoom

93
00:10:53,339 --> 00:11:01,879
start. Let's put it at 6. Don't forget
to close the bracket in here, okay.

94
00:11:01,879 --> 00:11:08,699
Execute upper arrow key to call a
previously executed statement like map

95
00:11:08,699 --> 00:11:16,949
save. You can also choose to go to the
browser and reload with ctrl R or

96
00:11:16,949 --> 00:11:26,550
command R and that will show you the
new map with another zoom factor.

97
00:11:26,550 --> 00:11:30,329
Yeah, that's about it. Try to play around
with this a little bit, and in the next

98
00:11:30,329 --> 00:11:35,000
lecture I will show you how to add
points to this map. I'll see you there.