Data Driven Maps With Python Folium & Leaflet.js

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so in this video we're gonna experiment a little bit with Python and a package called folium which allows us to generate maps for the browser and the way that it does this is it uses leaflet j/s which is actually a JavaScript library for interactive maps as you can see down here but what folium does is it brings the power of Python and data into leaflet or combines them together so if you have like a database or something where you want to hold all your coordinates and all your data your map data and then you can display them in leaflet in the browser so that's what we're gonna do we're gonna I'm going to show you how to generate a map how to use markers customize markers we're gonna deal a little bit with Vega visualizations in the pop ups for the markers also geo Jason which you know we can actually highlight around a certain area and plot that on the map so we're gonna do a few things here it's gonna be like a crash course so let's jump into vs code and and I would recommend that you take what you learn here and create a project from it like I was saying in my last video where I talked a little bit about expanding on tutorials and how to get more out of them so you want to create something from what you've learned but that's that's just what I would suggest I mean obviously you guys don't have to do that so I have an empty file called map PI nothing at all in it and obviously you need Python installed you can go to Python org and install Python 3 if you're on Windows you can probably just use Python but if you're on Mac you'll see Python 2.7 is probably installed by default so if you install 3 you'll have Python 3 all right so you can see I have 3.7 so I'll have to use pip 3 and you can use Virtual env or pipi and V or something like that if you want but I'm going to keep it simple and just install folium globally so I'm gonna say pip 3 install folium and it went really fast because I actually already have it installed globally but now that that's installed I can go into my map PI and I can import folium and what we want to do here is create a map object to work with so we do that by assigning a variable I'm going to call it m and then we're gonna say folium dot map and this is going to take in a couple things it's going to take in the location which is like the starting point or the center point of the map and my map is going to be in Boston Massachusetts but you can use any any location you'd like if you want to follow along to a T then obviously use the same coordinates I am so it's gonna be 42.3 601 and negative 70 1.0 5 8 9 that's going to be our center point and we want to set the zoom start - I'm gonna say 12 ok and then we just call em dot save and what this is going to do is it's going to generate I'll just put a comment here generate map it's going to actually generate an HTML file that will have all the leaflet dependencies everything like that all the JavaScript that's needed to display the map we just need to put a name of a file in here so let's do map HTML so just these three lines of code should allow us to generate an HTML page with a nice-looking map we just need to run the file first so we'll say Python 3 map PI and over here you'll see that it generated this map HTML file that has all the leaflet CSS and JavaScript font awesome bootstrap obviously you can change this up and insert it into your own project and do what you want with it but we're just going to open this file and I'm using live server so to say open with live server and there we go so we have a map generated okay so obviously I mean we can zoom in and oh we can can drag along here but this isn't very useful to us so let's actually move on to create some markers okay so let's go back to vs code close up the HTML file and let's say create markers so to create a marker we just want to say folium dot marker and this is going to take in a couple things it's going to take in the the position the coordinates so for this marker let's do for 2.36 3 600 and negative 70 1.0 9 9 500 okay so that's gonna be our coordinate second parameter is going to be pop up and pop up is when you click on the marker what do we want to show so you can actually put HTML in here so I'm just going to put a strong tag and in here let's say location 1 all right and I'm just going to put this on a separate line like that and the next parameter we want is actually going to be the tool tip so the tool tip is when you hover over it and I want every tool tip to be the same I just wanted to basically say click for more so I'm going to create a variable called tool tip and we're good we'll go up here and do that so let's say Global tooltip and we'll set this to a string and we'll just say click for more info all right now the final thing we have to do for this market to actually plot on the map is we need to call the add to method add underscore to and then we have to pass in the map object which is just M okay so we'll save this and then we just have to run the file again so python map dot pi and let's check it out and now we have our marker if i hover over it we'll see click for more info if i click it we get location 1 and obviously you can make this a lot nicer you could add you know i don't know if you do restaurants or something you could put the name and a little image and the address all that stuff buttons all types of stuff so again you can come up with ideas too to actually build a cool application with alright so I'm gonna add some other markers where we can actually customize some stuff let me just put a comma here and I want to show you how we can change the color and we can do that by using full icon and icon attributes so I'm gonna copy it so I don't have to keep typing in stuff that's very similar if you want to copy it you can if you want to pause the video or whatever or just go to the github repo but this folium marker has a different set of coordinates that's close by pop-up is location to tooltip is the same now we have an icon attribute that's set to folium dot icon and then we passed in icon equals cloud okay so this will give us a little cloud icon so let's save this and run the file and go to our browser and now you can see we have a little icon of a cloud okay works the same way though it's just just looks different now we can also change colors because it's by default it's a blue so let's say we want it to be purple just paste this in here and same same stuff different coordinates except here I set instead of icon I set color to purple so if we save that run it and go back to chrome now you can see we have a purple marker that has a default icon of the just the info I now if you want to change the color and the icon of course you can do that so let's let's get a green marker with a leaf icon so to do that we do the same thing we just pass in color and then just pass an icon equals leaf okay so if we run that and take a look now we have a green icon with a leaf and if you look in the documentation you'll find all the different icon options you can also use material icons you can use font awesome and pretty much any icon library alright so now what I want to do is show you how to use a custom image and I'm actually going to use my Traverse e-media logo so this is our project right here and I'm just going to bring over the the PNG logo so I want to use this as an actual marker so what I'm gonna do is I'm going to bring I'm gonna go under the tooltip and say create custom marker icon so I'm gonna call this logo icon and let's set this to folium dot features dot custom icon and it's going to take in the file so logo dot PNG and then it's going to take in the size which I'm gonna set to 50 and 50 okay now to use this is very easy we're gonna do it just like we did down here I guess I'll just copy that make sure to comma for a comma right there actually we should have commas after all of these so we're gonna change the the coordinates up here for this custom icon marker and I'm gonna change these to let's see 40 let's do 40 2.37 five one four zero and then let's do negative 70 1.0 three two four five zero and we'll say location five now instead of doing folio folio Micon and all this we don't have to do that we can just simply put in logo icon that we created above so let's save that and run it and we got an error keyword argument unexpect the keyword argument sighs that's because we put sighs here it should actually be icon underscore sighs all right so let's run that and check it out and there we go so now we have a custom image as our marker and it works the same way click on it we can get the pop-up alright now I want to show you how to use a circle marker which allows us to basically have like a circle around a certain area so I'm actually going to put the circle around up here Lin mass where I was actually born so I want to put like a just a blue circle around this area so let's head back into vs code and we'll go under the last marker and let's put a comment here saying this is a circle marker okay so we want to do folium dot circle marker and this is going to take in a bunch of values one is going to be the location so we want to specify location equals and for this we're gonna do for 2.46 6.47 zero okay and the next one is the longitude is going to be negative seventy dot nine four two one one zero okay so that's the location next is the radius which I'm going to say so you can make it as big or as small as you want I'm gonna say 50 next we're going to do the pop-up so I'll just put a string here I'll just say my birthplace and next we're gonna do the color which we could do hexadecimal so I'm going to do hexadecimal blue which is 4 to 8 BCA we can also do a fill but we need to make sure we do fill equals true and then fill underscore color and I'm gonna do the color the same and it's actually going to have an opacity to it so it's not just like a solid circle so 4 to 8 BCA so you've got the number sign alright so that should do it we just need to do add 2 just like we did above add to our map object and we'll save let's run the file and check it out and there we go so now we have this this circle around Lin mass alright so markers customizing markers custom image circle marker now let's look at some other things let's look at a Vega visualization so I'm not too familiar with this but I think it's kind of cool vague visualizations so just stuff like this like graphs and plots and all that we can use that by default with folium so I'm going to give you a pretty simple example using adjacent file that has some data in it for this visualization so if you go to the github repository you'll find let's see you'll find a fight you'll find a folder called data and a file called vis Jason so we're gonna create a folder called data and we're gonna bring over that vis dot Jason file ok so this is just this is a document that was part of the documentation and you'll see it has an X and y axis the X is the time the Y is the dominant wave period I'm not exactly sure what this data is but I just want to show you how we can have this as a pop-up for one of our markers all right so first thing we need to bring this file in so we're actually going to import the OS package which is a default package it's like the path module if you're familiar with nodejs and we're going to go right below where we did the icon and let's say vague data and then let's create a variable called vis and we can grab this with using the OS module path dot join and we want to look in the data folder and we want to look at the file vis Jason okay so we want to bring that in and then we want to create a new marker so let's copy one of these just grab this last one here all right and let's paste that in and the location for this marker is going to be 42.3 one five one four zero and let's do negative 70 1.07 - four five zero all right now let's see the pop-up is going to be the actual visualization let's see tooltip I guess we can keep that we're gonna get rid of this icon I'll get rid of the tooltip but the pop-up we're gonna change this it's not just going to be a string what we want to do here is say folium dot pop-up because you can have custom pop-ups alright and we can set a max width for the pop-up which will set to 450 pixels and then we want to do dot add child okay so basically what do we want to add in this 450 max width pop up and it's the the Vega visualization and we can actually use folium dot Vega okay so folium Vega and then we need to basically look at that Jason file so I'm gonna go up here and just import the Jason package and we're gonna say folium Vega and then Jason dot load and inside this json dot load method we want to run open and we want to pass in vis which is our variable that we created up here that contains the the path to the file okay and that should do it so let's save and let's run the file and go back to chrome and now this is the one that we just created if I click it there we go we get some cool visualizations here and I'm not really sure what this data is of it's just an example that I found we should probably make this longer though because it's like going off the the pop-up so set that to 550 see if that helps no hmm I don't know why that's it's weird what I do oh you know what we need to set I'm gonna set that back to 450 we can actually set the the child width and height so right here add child with which ends right here I'm going to put a comma and we're gonna say width equals 450 and we can also do a height which I'm gonna set to 250 so that should keeping it to keep it contained whoops what'd I do wrong actually it should go to parenthesis after let me just go back so right here and then with 450 height 250 all right let's check that out okay so now the the visualization is actually contained in the pop-up all right so the next thing I want to do is is deal a little bit with Gio Jason if you don't know what Gio Jason is it's basically a format for encoding like geographic data structures so line strings polygons what I want to do is use it to outline the borders of a city and plop that on our map so instead of like doing the hard code what I'm gonna do is go to Gio Jason dot IO and what this site allows us to do is use kind of like a GUI to create these these data structures so I'm gonna go to the location that our map is on just bring it in here all right so we're working in like this area Cambridge so what I want to do is is create a what's called a line string around the city of Cambridge and over here you can see we have a tool for a polyline which is what we're gonna use we also a polygon rectangle draw a marker so I'm gonna hit this line here and if you guys want to use a different area in the world that's fine too but I'm just gonna kind of I'm not going to make this really like accurate but I'm just gonna go around like this and just come to the end here and it says click last point to finish line so if you click the last dot it kind of just outlines you know wherever you clicked and I know that that's not a it's a pretty crappy border but it doesn't really matter for the for this tutorial and you can see each point has a coordinates array okay or it is an item in the coordinates array and this has a type of feature collection and the type is a line string okay so this is type of geo jayson metric I guess so I'm gonna grab all this stuff and just copy it and we're gonna head of backhoe into vs code and inside the data folder let's create a new file and I'm just going to call this overlay dot jason and we're gonna paste that data in here okay so we'll save that I have prettier installed with vs code so it just kind of made this a little more readable now that we've done we've done that let's bring that file in just like we did with the the Vega visualization SE geo jason data and let's say overlay equals OS dot path join and we want to go into the data folder and we want the overlay dot Jason file alright now now to use geo Jason it's it's actually pretty easy because folium has a method you called geo jason so we can just go right down here and let's say gyeo Jason over land will say folium dot geo Jason and we want to put in the variable which is overlay and then the name which I'll just say Cambridge and then we just want to add that to our map so add to our map so let's save this and let's run the file let's head back over to Chrome okay this is geo Jason dot IO this is not our map let's go to our map and there it is okay so we were able to add this outline and it's it's a very very crappy outline but think of what you could do I mean you could highlight certain areas for whatever whatever the app is for this the possibilities are endless so now the last thing I want to do is show you how to create a choropleth map which we're actually going to have a map of the United States and have different states shaded in due to their unemployment rate okay or according to their unemployment rate so we have a couple files of data that we're going to use just we're gonna close up map pi we're done with that file but in the github repository you should have a US states dot JSON file which I'm gonna put in now and you should have a US unemployment CSV file and these are the two files we're gonna use to create our map so let's take a look at the data first so US states we just have an object here the type is feature collection we have an array of features and each one represents a state ok and we have all the coordinates to kind of draw out the states and you can find different files like this online to use so the ID it's important to note the ID because we're going to use this inside of our code and the ID is going to be the abbreviation of the state okay so that's for instance Alabama then we have Alaska and so on okay so it's a pretty long file of just coordinates so that's that that's the state then we have the unemployment rates which is a CSV file so we just have this the actual state that the abbreviation and the unemployment rate okay so pretty simple now to create this map let's let's create a new file and we'll call this map to dot pi all right now we're gonna be using an analysis tool called pandas we just say pandas Python so pandas is a Python data analysis library providing high-performance easy to use data structures and data analysis tools so we're going to use this basically to analyze the CSV files so we do have to install this Guyot scopes let's go back to vs code and let's say pip 3 install pandas and I already have installed so it's gonna go really quick all right now this this file actually isn't going to be that big and it's in it actually does something pretty cool so let's import folium let's import pandas we're gonna say pandas as PD PD and we want to import OS okay so first thing we'll do is create our state's variable this is going to represent the the the US state's data this file here US states dot Jason so let's set that to OS dot path dot join that's in the data folder and the file is us - States dot Jason okay so that's our States let's do our unemployment data okay so unemployment data OS dot path dot join data and that file is us - unemployment Jason right yeah okay so now we need to create our state data and this is where we use pandas so we're going to say state data equals PD remember we're using pandas as PD and it has a method called read CSV okay so we want that and then we want to pass into that the unemployment data which is oops I'm sorry this should be CSV not Jason so CSV okay so now that we have these variables now we're going to use folium to create our map so just like we did in the other file we're gonna set a map object so this is going to be folium dot map and it's going to take in a location an initial location and for this we're going to do forty eight and negative 102 and we're gonna give it a zoom start of three okay so here's where we want to create our choropleth map so we want to take a map object and call dot choropleth and we want to pass in a bunch of stuff here for this to work so we want first of all geo data and geo data is actually going to be our states so it's our US states dot JSON file that's our geo data next we want just a name so we'll call this choropleth next we want our data which is going to be the state data okay which we got from using panda dot read CSV and we passed in the unemployment data so next we want the columns it has to know which columns were using which is going to be a list of just state and unemployment okay next we're gonna do key underscore on because it needs to basically know what it's using as a key and that's going to be if we look in the US states dot Jason we want to use the ID which is the the abbreviation now if you look for this file online this is actually wrong it's gonna the IDS are going to be like zero one zero two zero three and it wasn't working for me so what I had to do is change them to the actual abbreviations all the IDS and then it worked so if you do get this file anywhere else you'll probably have to change that so we want to say that the key is gonna be the feature dot ID okay so key on next thing we want is the fill color and this is actually going to take in a sequence which is gonna be Y LG n so it's gonna be like a sequence of color of greenish yellow colors and then we also want a fill opacity which we're going to set to 0.7 and we also set a line opacity and there's other properties you can use as well to kind of customize it but line opacity and then there's going to be a legend of you know the employment unemployment rates and it gets created automatically by the data but we can give it a name so let's say legend name and let's set that to unemployment rate percent okay so that's pretty much it that's all we need to actually create this this map from this data so well actually one more thing we need to do is called the layer control method and then do and then actually add it to the map so we wanna add two and then our map and then finally we need to save which will create an HTML file so we'll call that HTML file map to HTML okay so that's it not that much code now let's run this by saying Python 3 map to dot pi let's see looks like something us - unemployment oh it's an underscore not uh not a - all right let's try that again ok so now we have a map to dot HTML and has a lot of stuff in it look at that a lot of coordinates so now that we've done that let's run the map to HTML so I'm gonna just stop my live server and I'm gonna open map 2 with my live server and there we go I could have probably zoomed it in a little more well actually if we want to fit Alaska in there we have to zoom out but yeah you can see up here there's a legend and the reason that it's from 3 to 10 is because it automatically set that from the data if we look at the unemployment rates here it's all between 3 and 10 so it created the legend to fulfill that if we had like 15 in there or something like that the legend would automatically stretch to 15 and then you can see the different colors for for each state okay and I mean you could add markers you can do you know the rest the other stuff that we did in the other map you could add and you could make it you know more in-depth or had extra functionality but that's really it guys I think that that that's a good place to stop and hopefully this gives you some idea of how to use folium and in leaflet and create maps and and maybe you can integrate it into an existing application or create a new one but that's it hopefully you enjoyed this video if you did please leave a like and I will see you next time I just want to give a quick shout-out to one of my patrons Carlos masla who also has a YouTube channel where he does a lot of front-end development with Rihanna Acton he has six and teaches you about get and even some DevOps stuff like chef so check his channel out I'll put a link in the description below

Channel: Traversy Media

Views: 79,146

Rating: 4.9617958 out of 5

Keywords: python folium, leaflet.js, folium, leaflet js, python maps, python map

Id: 4RnU5qKTfYY

Length: 32min 55sec (1975 seconds)

Published: Mon Nov 19 2018