Python - Create Maps with Folium and Leaflet

[Music] welcome to my video about creation of maps markers and custom markers with volume volume is very powerful library which combines the strength of Python with with data and the mapping and visualization features of JavaScript concrete here leave latias so volume is the library which we need to install first of all so let's go to the console and do a pip install folium oh come on actually this should go quite quite quick because I have already installed it so as IDE today I will use Jupiter notebooks because it's very strong in showing live coding sessions and visualizations and so on so also Jupiter you need to install it it's a library and you can install it using pip insta soup retur also this is already installed here so it's quite quick if you have any doubts questions problems with installation just write it in through the comments all right let's start let's create a new notebook for Python 3 and let's import folium first of all so the most important thing we can do with folium is the creation of maps and so let's create a map first of all so to do this we need to call the map function or volume and basically the volume map takes two arguments a location enter the zoom so about the locations on today's session I want to show you an example with the North America so let's perhaps take some central location within North America because the location is used as that as a center point of the map so I can really reach to use this page really long net where you can just type in an address and the tool will give you the latitude and longitude so let's take some central pay price within North America which is acting Dickinson and North Dakota code USA and as you can see the tool will give you the latitude and longitude and jets and this we can just paste into our location and that's it let's let's try it out let's display the map and here we are already you can see here we on the map we are quite deeply zoomed in because we choose the zoom start of 15 but of course we can zoom out and we can see we reach Dickinson here as our central point of the map and if we zoom out we get the full picture of North America and we can even zoom more out to see the complete world so unless perhaps decide to take a different zoom factor let's start with a four and this is already giving us a good overview about North America so let's let's stick with four for this so this is how you can create real easy maps with folium but there's more so you can also use different kind of styles map style so to say in volume they're called tiles so you can use different tiles for example as the stamin terrain tire style or tile how to say which looks like this or you can use this thumb and toner which looks like this some kind of black and white map or you can use map box bright oh that was a was an error and think [Music] like this let's let's stick to my box bright I kind of like it for for my use case yeah and that's how you can create Maps isn't it easy right alright so on the next step I will show you how to create markers so actually this is quite easy also and volume so let's we can create a marker using the Mac function and after we created a marker we need to add this marker to the map M object which we just created before a marker also has different attributes so first of all it also has a location so perhaps let's take seattle as a location here and we'll it will give us again the latitude and longitude so let's add it but we can also specify more attributes like pop up at also the pop up will pop up when you click the marker and we can also define a tooltip which is which will kind of pop up if you hover about the marker so let's just say as a tooltip click for more information and that's the standard marker basically let's just run it and see what it does so as you can see it has created a marker here in Seattle and if you hover about it it says click for more information and if you click sorry you get the pop-up Seattle and we can also use HTML coding in here to make it for example bold let's try it and run it again and if you click the pop-up now you can see CLS bold so yeah this is a kind of standard marker but there are more more options for markers which we will have a look at now okay let's and let's create a second marker again here dot marker add to M and as a location prep let's take San Francisco so let's copy the latitude and longitude again let's also define a tooltip click for more and pop-up but as mentioned there are more options so we can also style the icon itself off so off the marker so with attribute icon that's here define it as volume icon and here we can specify further attributes like for example and I can type or pictures for example a cloud let's run it you can see we we added a new icon here in San Francisco which contains a cloud within the icon object but we can do more we can also define colors and other icons like let's just copy this mark from above and perhaps let's go to Chicago create another marker in Chicago like this let's copy latitude and longitude again ah and here perhaps let's as an icon let's take an envelope but let's also change the color here color to red now this should create a marker in Chicago with a red envelope icon that's added to M and display M and see what it does so as you can see here we got a new marker in Chicago the icon is red and it contains an envelope icon so that's some basic stuff you can do with markers but you can also create custom marker objects with with custom pictures so let's have a look at that okay so for the creation of custom markers I'm using a superhero showcase so actually I downloaded three pictures of Hulk spider-man and Wolverine and now I'm showing you how to make markers out of them so let's start with spider-man first of all so was Peter Parker Peter Parker was born in Forest Hill Queens New York so let's look for this forest hills queens your USA let's find the lady too long it worked and let's copy them over and let's do it a little bit different this time so let's call it spider-man or location spider-man and copy long it wouldn't let it to it into it then as the next step perhaps let's define the custom icon object so let's call it icon spider-man and for this we are we don't need a location here but we need to create a folio custom art object which works like this some volume features custom icon and you can define the image here so let's go to the images folder and the spider-man PNG picture and we can also define the size so let's define it give it a size of 100 times 100 and next let's also define the pop-up so um let's call it pop-up spider-man and let's give it some HTML code so let's give it a header spider-man and mention the real name here Peter Parker and also let's mention the city of birth which is Forest Hills Queens in New York USA oh ok and of course we have to wrap it in two quotes and now we can define the macro object already so like we did before volume dot marker and we of course need to add it to the map and as location this time we're just pasting location spider-man as tooltip we are just telling him spider-man as pop-up we choose pop-up spider-man which we just defined and as I can we now define the icon spider-man which we defined here so let's run it let's have a look on how it looks on the map and you can see it here you got your spider-man I think I created a mock-up from that's refreshing map so let's refresh the map at the beginning oh that was not the beginning here come on now let's add seattle san francisco chicago and spider-man like this oh I forgot San Francisco here we have San Francisco that's wrong it and let's move down okay now it's no on how are we here again so this is Spider Man custom Mac we just created and in the pop-up we see a real name Peter Parker city of birth Forest Hills Queens New York so that's it and it gives you really nice features to display markers as custom pictures or custom objects here and I will do it for two more superheroes now to get some practice let's continue with Alec perhaps so perhaps let's just copy the stuff from the top here and rename it a little bit so location Hulk and for Hulk Bruce Banner was born in Dayton Ohio USA so Dayton Ohio USA let's find the latitude and longitude and added here as under icon holic we don't take the spider-man PNG but the Hulk PNG and as a pop-up text we we change the HTML to strong and a real name of Bruce Banner and the city of verse two Dayton Ohio USA and of course when we create the marker we need to change the location to location hullick variable it's a tool tip to Hulk it's a pop-up to pop-up hug and the icon to I can hug let's add it to em let's display em and we can see here we have the Hulk in Ohio let's do it one more time for Wolverine so let's again copy it from above let's take all rename the variables first over green come on in and the Wolverine was born in cold Lake Alberta Canada so let's have a look for the latitude and longitude cold Lake Alberta Canada so the latitude is this and the longitude is this the image we must change to Wolverine and the real name we have to change of course - first of all the headline to Wolverine the real name in this case is James harlot or better known as Logan the city of birth is like mentioned cold Lake Alberta Canada let's also change now the variables in our marker here so location will be changed the tooltip will be changed so pop-up must be changed and at last I can now let's have a look and how it looks on the map and as you can see we have a volver in here in Canada with detailed on the pop-up and basically that's it it simply shows and the powerful features of volume together with leaflet is to create maps to create markers to create custom markers so have fun playing around with it and in case of any questions just drop me a comment one more hint the coding can of course be also executed as a script and I will upload the code to github of course and if you want to learn more on latitude and longitude and all this geo stuff I will post another video in the comments which explains it very good so thank you for watching and see you soon [Music] you [Music]

Channel: Code & Dogs

Views: 35,274

Rating: 4.9185061 out of 5

Keywords: python, python3, javascript, leaflet, leaflet.js, folium, gps, longitude, latitude, programming, webdev, coding, development

Id: QpBmO35pmVE

Length: 18min 49sec (1129 seconds)

Published: Tue Feb 26 2019