 welcome back I'm Dan and I'm Nathan and we're here today to finish up our map a Python mapping series on taking Craigslist iPhone prices and putting them on a map we're gonna use Google Maps to do this and a package called Boca rather than actually drawing the map by hand like the one behind us that's indeed so let's let's get to it so here I'll open up my my Jupiter notebook and I've already written out what the libraries that we're gonna need to import the main ones that I'll mention here are from boca.io you need to import show and in this case we're just gonna output to a an HTML file and then from boca.models we need a few things a few objects namely the G map plot G map options column data source circle data data range 1d pan tool wheel zoom tool and box select tool so we'll go ahead and run that we'll get around to what each of those are as we come across them as well so don't worry about them all in one big giant blob right now yeah so if you recall in a previous video we saved all of the data we collected from Craigslist into a CSV file so I'm just gonna go ahead and load that right now by typing df0 equals pd dot read CSV and this is also the data that we cleaned in our last video so it it took out all the extreme data points like prices that happen to be seven digits like a phone number or happen to be like zero dollars so yeah so one thing we'll do when we import the CSV is specify an index column because when pandas creates a data frame if you don't specify an index it just gives up an index starting from zero up to the number of rows you have and so when we reload it we just need to tell it that that's an index column and not actually real data and then we'll take that df0 object we've created and do a group by on it and so we'll group by the column city and then what we'll do is we'll take a mean on that because all we all we really need for each single city is one actual mean price we don't want to put circles for every single price that we found we just care about the mean so then we'll put df add and you can take a quick peek at what this data frame or that that group by object looks like so you can see it's group by cities and it's taken the prices of that city group and average them and put that in the new price column and then it's got to the lat long listed so now we have something that we can that we can map which is kind of cool perfect yeah so the first thing we need to do is set sets a map options and this is where there are actual aboka stuff starts coming in our map options for this one are gonna start off with mainly latitude and longitude and then what kind of map that we want to do and also how zoomed in it is since we're doing Google maps we actually use those little notches on the zoom bar that you see in some versions of Google maps we're gonna start with zoom 3 with some odd lot of latitude and longitude which happened to be roughly the center after playing around with these numbers a bit of the US and this zoom also includes our two non-continental states Alaska and Hawaii and then of course some map type is roadmap for now other values of this could be things like satellite maps and the terrain map I believe don't know which other exact ones are fantastic we'll set the zoom level to 3 in this case because that that seems like it works pretty pretty well so for Google maps again we did a previous video about this but you're gonna need an API key so we'll just we've set that as an environmental variable and the way to access that is os.inviron and that's the it's just a Python dictionary object and so we'll set that API key you want to keep that secret keep that safe I think for this specific API we we were only allowed to ping it 25,000 times a day so if you do that make that public you'll quickly run out of those numbers but otherwise for a single person you probably aren't gonna quite hit that range yeah so let's instantiate our our bokeh object so we do a plot equals gmap plot this is just telling Boca what time type of plot it actually is Boca actually is has quite a range of different styles of plots but right now we're just using the gmap plot we're gonna start off with an x-range and a y-range for this gmap plot this is where we're actually using the imported data range 1d these give it a nice square shape give it our map options that we set earlier and then give it our API key that we set earlier and that does the whole instant that creates the whole basic plot for gmap right and so last we will do we need to add some tools to the plot the bokeh is is an HTML plotting tool so it'll actually make a full interactive plot as you'll see when we get to the results here but these tools you there's a whole sorting of tools but we're just gonna do the basic three pan wheel zoom and box select tool these three tools let you basically move around the map after it's actually been created that fingers there alright there so that that works so the next is we sort of have to set kind of the ranges for what and how big we want each of these polygons or these these objects these markers I guess what are they called in bokeh we're just putting circles for ours specifically they call them glyphs right so we'll do a baseline we'll set that equal to the basically we'll take the price column of the data frame and we'll just pull out the min the minimum and we'll just subtract we'll subtract one basically what we're doing here is we're setting it so that the smallest price is actually our smallest dot otherwise we with our data range all of them being in the hundreds and two hundreds all the circles would be fairly decent fairly equal in size whereas now our lowest price is gonna be our smallest circle which is gonna be almost a dot whereas our largest circle will be actually our largest price rather than all being roughly the same diameter yeah so well so one of the things that bokeh the the type of data that it likes to work with is a is an object called a column data source and in this case we're gonna be feeding it a dictionary of of our lats our latitudes our longitudes and then the radiuses that we want for each point and so that's what I'm writing out here right now so basically yeah let me let me finish that out so we're eventually gonna add some glyphs and each of these lists are gonna be a single circle and for each of these circles we need to give it a latitude and longitude which are basically it's x and our y coordinates and then a radius for the actual circle and basically we're setting up the data type so that when we get to the point of creating these glyphs you know we can just give it the straight-up dictionary in this column format that will the plot will actually be able to determine what it exactly should look like for I in DF price and this radius right here what we're doing is just some simple scaling so that for each price that we have we're take which is I we're minusing the baseline and then divide by a scale so that the circles aren't all extremely large or extremely small that's what the scale value is those scales for different size numbers you might have to play around with each time 2.5 is just what I felt like fit correctly after playing around with it a bit okay yeah I just had a little attribute air there when I tried to run it for whatever reason this version of pandas I have has a different method for a series versus a data frame so I needed to get rid of an underscore there to get that thing to work so next we'll we'll define our our circle object so so the circle object we're basically going to be taking telling them what each single circle is actually looking for inside the dictionary to actually use when it makes a circle and we're going to be x equals longitude from our dictionary that we just created y is equal to our latitude from our dictionary size which is a radius for a circle is going to be our rate rad from before and then if you wanted to you could even put a color in for all the call in your dictionary but we're just going to have them all be blue and we're going to also make them semi-transparent which is a fill alpha alpha is like your transparency and we're going to make them 50% alpha so 0.5 here yeah and then we'll we'll take that plot object we instantiated earlier and we'll use the add glyph method and we'll specify the source that column data source object that we created above and then this circle object that that we instantiate in this particular routine so there you have a glyph renderer and it gives you some sort of unique ID there and now we're ready to actually show if all went well if we've set this up correctly we should be able to see a see a map here so we'll do output file we'll give that a name and then we'll do a show plot and there you go you got it you have a map with all sorts of thoughts all over yeah with that all over the place so we can should be able to zoom in if I could take the select this wheel zoom you could start to zoom in and take a peek at you know let's say you could see the difference in the price of iPhones in Salt Lake City versus the versus the price of iPhones on the West Coast so if you're looking for an iPhone Salt Lake City is the place to to peek or to take a peek so anyways I hope you guys enjoyed this you guys and gals enjoyed this series we had fun doing it learned a lot right it's next time when we start a new project fantastic thanks guys and gals don't forget to hit subscribe