1 00:00:01,100 --> 00:00:07,400 Hi again and welcome to this new lecture. In this lecture are you going to learn how to add points to 2 00:00:07,400 --> 00:00:13,000 the map that we built previously which is this one here. 3 00:00:13,140 --> 00:00:15,730 So all we have here is a base map. 4 00:00:15,810 --> 00:00:25,430 So the background map which is a layer actually, it's layer coming from Open Street Map Service, so Open 5 00:00:25,430 --> 00:00:32,480 Street Ma, they give you a layer, actually Folium will serve you this layer on the background 6 00:00:33,050 --> 00:00:42,390 through JavaScript, but you can also add other layers as well, other base layers and also points which 7 00:00:42,390 --> 00:00:44,390 you can add on top of the base layer. 8 00:00:44,400 --> 00:00:46,740 So let me go to back to the code. 9 00:00:46,770 --> 00:00:49,190 This is what we wrote in the previous lecture. 10 00:00:49,200 --> 00:00:56,460 Actually we wrote it in here, in the interactive show, but I just copied and pasted this in in a file so that we 11 00:00:56,460 --> 00:00:59,020 have it, and that we can add more code 12 00:00:59,040 --> 00:01:00,420 now on top of this. 13 00:01:01,470 --> 00:01:10,510 So again as I told you you can do help(folium.Map) and you see you can add other things in here 14 00:01:11,620 --> 00:01:15,460 such as, here you have parameters. 15 00:01:15,460 --> 00:01:19,660 So you can add tiles. The default is Open Street Maps. 16 00:01:19,660 --> 00:01:28,780 But if you specify another tile such as MapBox Bright. 17 00:01:28,960 --> 00:01:31,850 And that has to be in quotes. 18 00:01:32,340 --> 00:01:33,690 As you can see in here 19 00:01:40,290 --> 00:01:48,990 in the tiles parameter this expects a string object location for instance it expects a tuple or a list. 20 00:01:49,170 --> 00:01:50,130 And that's what we passed. 21 00:01:50,180 --> 00:01:59,670 We passed a list of coordinates, the width would be an integer, an integer the height. 22 00:01:59,750 --> 00:02:03,240 So on, we have other options as well which you can try by your self. 23 00:02:03,600 --> 00:02:07,600 I just want to try this one for now. 24 00:02:08,990 --> 00:02:16,980 Let me open a new Python Shell Python 3 map 1. 25 00:02:17,000 --> 00:02:20,390 Make sure you have saved your script. 26 00:02:20,450 --> 00:02:21,140 Execute. 27 00:02:24,400 --> 00:02:27,860 Then you can go back to the folder and open map. 28 00:02:28,440 --> 00:02:36,710 Let me to Firefox control R, or command R to reload and you'll see that the background has changed. 29 00:02:36,720 --> 00:02:39,540 So we we have a new base map now. 30 00:02:45,590 --> 00:02:46,060 Okay. 31 00:02:46,080 --> 00:02:53,580 Let's go back to the script now and what I'm going to do is I'm going to add some point marker 32 00:02:53,670 --> 00:02:55,700 on top of the base map. 33 00:02:55,830 --> 00:02:58,550 And so how do you do that? 34 00:02:58,560 --> 00:03:04,230 Well, if you do dir(folium) 35 00:03:07,810 --> 00:03:11,960 you can see that you have some objects. 36 00:03:12,130 --> 00:03:20,560 And the one we want is a marker or a circle marker. 37 00:03:20,840 --> 00:03:29,710 So I'll try them both, but I want to explain you the logic of how you add objects to the map object. 38 00:03:29,720 --> 00:03:36,250 So we import Folium, we create a map object and then between the Map object and the safe methods of 39 00:03:36,250 --> 00:03:38,990 the map object you can add elements. 40 00:03:39,080 --> 00:03:51,680 So objects to that map and what I want to add in this case is a marker so I can do map.add_child 41 00:03:53,760 --> 00:03:57,740 so we use use the add child method to add children. 42 00:03:57,810 --> 00:04:01,770 So these objects that I'm talking about are referred to as children 43 00:04:01,770 --> 00:04:09,870 when you add them to the map, so map.add_child and then you want to point to the folium.Marker. 44 00:04:09,870 --> 00:04:15,850 Now this marker method, this expects some arguments itself. 45 00:04:15,920 --> 00:04:22,140 You can do help(folium.Marker). 46 00:04:22,140 --> 00:04:29,280 So create a simple stock leaflet marker on the map. Leaflet is the JavaScript library that helps you to 47 00:04:29,280 --> 00:04:30,730 visualize this. 48 00:04:30,780 --> 00:04:39,730 This engine that creates those maps on the browser, so Python creates the JavaScript code using 49 00:04:39,730 --> 00:04:45,650 the Leaflet library and so markers allow you to add pop ups. 50 00:04:46,030 --> 00:04:52,900 So when you click a marker on the map it allows you to show information and two parameters, you need 51 00:04:52,900 --> 00:04:58,150 to pass a location parameter to the marker in order to visualize it. 52 00:04:58,810 --> 00:05:03,100 So location equals to... 53 00:05:03,160 --> 00:05:13,650 So it's a tuple or a list, let's say 38.2 and -99.1. 54 00:05:13,690 --> 00:05:14,860 And 55 00:05:14,930 --> 00:05:18,240 you can also pass, 56 00:05:18,470 --> 00:05:37,620 so after the list, pop up parameter which could be like "Hi I'm a Marker", and you also needs to pass the icon parameter 57 00:05:39,000 --> 00:05:48,270 which actually is another object that comes from folium.Icon which expects from you 58 00:05:48,270 --> 00:05:52,580 to pass a color there I like let's say green. 59 00:05:53,780 --> 00:05:56,670 And yeah, basically that's it. 60 00:05:56,670 --> 00:05:59,910 Make sure your brackets are correct. 61 00:05:59,940 --> 00:06:01,430 So have three brackets here. 62 00:06:01,530 --> 00:06:09,980 Three closing brackets, and 1 and 2 and 3 opening round brackets. 63 00:06:10,010 --> 00:06:10,250 OK. 64 00:06:13,360 --> 00:06:22,810 Save the script, go to the other terminal and execute, go to Firefox, reload. 65 00:06:22,810 --> 00:06:23,890 Here is the marker. 66 00:06:24,730 --> 00:06:31,740 If I click, I get the popup message in a nice window here. 67 00:06:32,020 --> 00:06:34,750 So that's how you add markers to your map. 68 00:06:35,350 --> 00:06:43,030 However I would suggest you follow a slightly different approach to add children to your map. 69 00:06:43,030 --> 00:06:51,670 What I'd suggest is to actually create a feature group folium.FeatureGroup 70 00:06:54,810 --> 00:07:00,780 and you can give it a name like my map. 71 00:07:00,780 --> 00:07:04,830 And then what happens is that in this feature group, 72 00:07:05,010 --> 00:07:12,090 so marker is a feature and with feature groups you can add multiple features to the feature 73 00:07:12,090 --> 00:07:20,100 group so you can add a marker, you can add like polygons etc. So instead of saying map you 74 00:07:20,100 --> 00:07:23,300 do the feature group object. 75 00:07:23,430 --> 00:07:26,280 So the variable that I created in here, I'm passing in here. 76 00:07:27,300 --> 00:07:36,390 And then after that you do map.add_child and you pass the feature group in there. 77 00:07:36,420 --> 00:07:37,980 So this is more. 78 00:07:38,850 --> 00:07:41,510 So this is done to keep your code more organized. 79 00:07:41,640 --> 00:07:49,740 And it also helps you later when you want to add a control layer, a layer control feature in your 80 00:07:49,740 --> 00:07:53,150 map to allow you to switch the layers on and off. 81 00:07:53,190 --> 00:07:57,610 So we'll look at this later, and save this script and let me try. 82 00:08:00,410 --> 00:08:10,050 Reload the page and so we don't have any change, things will work the same which means feature 83 00:08:10,050 --> 00:08:11,010 group is working fine. 84 00:08:11,760 --> 00:08:15,060 But as I said it's good to keep the code organized. 85 00:08:15,060 --> 00:08:19,770 And it also helps you later when you add a layer control feature. 86 00:08:19,770 --> 00:08:22,890 That's what I wanted to teach you for now and I'll talk to you later.