Django & Folium - Displaying Maps of Database Data in Django Apps

in this video we're going to learn how to show static Maps generated by the python folium library in a Django application now it's very common in a web application to show maps Based on data that you have in your database that's exactly what we're going to show in this video and we're going to do it with folium now we have foliums documentation here I'll leave a link to this below the video this is a python library for very quickly creating maps with leaflet JS and I've done a previous video on how to read data from a data set and create folium Maps based on locations and that data now if you're interested in learning the basics of folium it's worth checking out that previous video but what we're going to do here is we're going to work with a Django application and there's a GitHub repository here that I'm going to link below the video and this contains some starter code that you can clone and I've got this open here in Visual Studio code now the data that we're working with is electric vehicle charging locations in the U.S state of Connecticut we've got a data set here that you can see and this has two columns that we've used in the previous video the stage name and this column on the right containing a longitude and a latitude what we've got in vs code is a management command if we open the management folder there's a command called load stations and I've written some code that's going to load the data from a CSV file into our database now in order to do that we've got a Django model here that's called EV charging location and this has three Fields one for the name of the station and one for the latitude and the longitude and what the management command is doing is it's taking data from this CSV file here and it's reading that data in on lines 14 to 18 here using Python's CSV dictionary reader and then down below that what we're doing is iterating over the data that we've read in we're extracting the longitude in the latitude and we're creating one of these models for each rule in the CSV file so what we're going to start by doing is opening up a terminal and within that terminal what we can do is we can first of all run the python manage.pi migrate command and that's going to create our database file here and then it will also create this table that is representing the charging locations once that's done what we can then do is execute the management command that will load the EV data from this file and that's going to be Python manage.pi and the name of the command is load stations once that command is finished you can then load up the Django extensions shell plus and we can grab the name of this model EV charging location and we can paste that into the terminal and then we can run the dot objects.count function and we now see that there's 385 stations within the database so let's exit the shell here and if you're interested in understanding how this code works just check out the previous video Let's now move on with the lesson what we're going to do is within our virtual environment we're going to install the folium library this is the mapping library in Python we can do that with Pip install volume and once that's successfully installed we're going to go to a reviews.pyfo and then we can import folium at the top of this file now the goal of this is to take the data from the CSV phone which is now in our database and for each of these electric vehicle stations we're going to grab the point data the longitude and the latitude and we're going to plot a marker on the map for each station and then we're going to show the map in our Django app so that the users can see where all the stations are so we're going to need to get all of these models out of the database if we go back to models.pi here we have this model here we're going to copy that and we're going to bring it into a reviewers.pi file so from code.models we can then import this model here and then within the view we can create a variable called stations that's going to be equal to EV charging location.objects.org so we're getting all of the Stations from the database now this data is for the US state of Connecticut so what we're now going to do is create a folium map that's centered on Connecticut so we're going to create a variable here called M and that's going to be equal to a folium DOT map call and to the map we're going to pass two keyword arguments the first one is a location and that's the center point of the up when it's first rendered and that's a latitude longitude pair for the center point I'm going to pass a list here that contains the latitude and longitude of the center point of Connecticut according to Google and the second keyword argument that we're going to pass to the folium map function is one called Zoom start I'm going to set that equal to 9 which will give us a decent overview of the whole state of Connecticut when the map is first loaded so once we've created the map what we're now going to do is add a marker to the map for each station in this data that we've extracted from our database and you can imagine doing this in your own web applications where you have data in a database you get that data out and it contains latitudes and longitudes that you can then plot on a static map we're going to do that now so let's iterate over each station in the stations and what we're going to do here is we're going to get the coordinates of the latitude and the longitude so we're going to create a tuple here and it's going to be equal to the station dot latitude and also the station dot longitude is the second element of that Tuple and last attitude in longitude if we go to models.pi these are just fields on the model so we're getting them from the object once we have the coordinates we can then create a folium DOT marker object and we pass the coordinates to that object and then we can call the markers add to function and pass the map M to that function so what these three lines of code are doing is for each station in the database we get the latitude and longitude and we plot a marker at that point and add it to the map now the final thing that we want to do here in the view is we want to add a key called map to the context and we want to render our map our folio map as HTML and add it to that context but the question is how do we do that now let's go to the folium documentation there's a section here on using folium with flask and as it says here the trick is steroton volumes HTML representation and it's got some code on how to do that let's go down here and you can see this function here the folium map has an underscore wrapper HTML function let's copy that and into a vs code and we're going to add that to our context so we have our map M and we can copy the wrapper HTML function and that will take the fully map object and it will return the rendered HTML for that map so let's now save this and we're going to run Python's development server with the Run server command and you can see if we go to the page we just have the text hello at the moment so what we're going to do is we're going to go to the template that's returned by this view it's called index.html so let's open that index.html file and what we're going to do is we're going to refer to the context that we've just added and it's called map and we use the safe template filter in order to tell Django that the HTML is safe to render once we have that we can save that template and go back to the page when we refresh this page we now have the map shown with each marker for one of the stations in kinetic so this is very similar to what we achieved in the last video when we use the Jupiter notebook and folium in this case though we're using Django and we're using templates in order to run end of the map to the page and this map is fully interactive you can scroll out and you can see the cluster of markers around Connecticut you can also scroll in and what we can also do is click the markers at the moment nothing happens what we can do is go back to the view and we can add a pop-up to each of the markers so I'm going to add a keyword argument here called pop-up and we're going to set that equal to the station's name and the station model has a field called station name which is a car field we're going to refer to that and that's going to then pop up with the station's name when it's clicked let's save that and go back to our page and refresh now when we click one of these markers you can see that it pops up with the name of the station and that will work for any marker that we click and for example this station at the left hand side of the map in the City of Kent if we click that we get the name which is Kent Town Hall so this is now working with the pop-ups now one thing we showed in the previous video was how to take the cluttered markers that you see here and generate clusters based on where these locations are so for example at the bottom left here we have a lot of markers here it looks very cuttled but we can use something called the fast marker cluster in order to Cluster these together and we're going to see what that means now now I have a section of folium's documentation open here we have an object in volume called Fast marker cluster it's part of the folium plugins module what we're going to do is we're going to import that into a review and we're going to create this object and pass it data in the particular format that's expected and that's a list of lists with the shape of latitude and longitude so each inner list has the latitude and the longitude as its two elements and we're going to have a list of each of those for every station in the database so let's go back to our reviews.pi file at the top of this file below the folium import I'm also going to import from folium.plugins the fast marker cluster and let's now remove this for Loop for the markers we're no longer going to generate the markers automatically we're going to use the fast marker cluster to do that and I'm going to paste a comment in here so we're using the fast marker clusters to generate clusters on the map to this we need to pass a list of all the latitude and longitude tuples in the data so let's start by getting all the latitudes out of the database and we're going to use a list comprehension here and we're going to say station dot latitude for station and stations so for each station we are pulling out of the database we're then going to grab the latitude for that data and we're going to do the exact same for the longitudes so station dot longitude for each station and then we can create below that the fast marker cluster object and we're going to pass data to that now we want to take each of these two lists and we want to zip together each latitude and longitude so we're going to use the zip function here and pass the latitudes and longitudes to that now the Z function gives us back an iterator of tuples so have a tuple with a latitude and a longitude we want to convert that to a list of tuples instead of an iterator so we're going to use the list function and that will then generate that entire list of latitude longitude Pairs and then we can call the add to function on the fast marker cluster and we pass the map to that so rather than iterating with a for Loop we are generating this data in advance and we're adding these clusters to the map let's now go back to the page and we can see how this looks on our page so if we go back here and refresh we now have a different view of this data rather than cluttering all the markers on the page we can now see that for example in this region here that is 32 markers and this one has nine markers and we can see that there's three markers in these regions here and when we click one of them we're actually taken to that boundary that area of the map and we can continue zooming into particular areas of kinetica in order to see where the markers are in this case and if we Zoom back out you can see that the markers redistribute throughout the map and this shows quite clearly where the main areas of stations are located you can see that there are a lot of stations in the southwest of Connecticut here and in the center with the city of hartforders whereas on the other hand the northwest of the state has very few stations as you can see here I'm going to guess that that's a more rural region of the state and therefore there are less electric vehicle charging stations so this example shows how you can generate static Maps based on Django database data you can then embed these in your web applications and show them to your users so let's now move on and finish this video with an academic task what we're going to do is we're going to calculate the average latitude and we're only going to show the Clusters whose latitude is greater than the average so let's go back to vs code and this is basically going to show how we can use filtering in our database data to actually filter which markers are shown on the map so we're going to use the orm a little bit here if you're not interested in that you're only here for the mapping stuff feel free to end the video now but at the top what we're going to do is just below these Imports I'm going to import the average function from Django's models module and then right at the top of the view I'm going to create a variable called average latitude and that's going to be equal to EV charging location dot objects.aggregate so we're using the aggregate function here and we're going to get the average latitude by using this average object that we've imported from Django and the field that we're going to be calculating the average over is the latitude field and once we've done that we can then get the key of average which is actual value that's been calculated by the database and let's print that to our terminal in order to see what that is if we go back to our page and refresh here we can see that the terminal has calculated this value as the average latitude now what we want to do with this average is basically filter out the EV charging locations that are not greater than the average so let's use the filter function and we can then look at the latitude column and we're going to make sure that we're filtering and keeping around only those values that are greater than the average latitude if we save that and go back to the page here and refresh you can see that now the Clusters are only generated for the latitudes that are greater than the average and we can get the inverse of this by changing the filter function to the exclude function if we save that and go back to the page let's refresh this map and you now see that we get only the Clusters that are below the average latitude so that's just showing how to do some tricks with the Django orm in order to generate these markers you can do anything you want normally with the orm in order to filter down your data and then you can generate the Maps using the folium.map function and you can either add the markers to that function directly or you can use something like the fast marker cluster in order to generate the Clusters that you see here on the page there's a lot of different options with volume we've only scratched this office here if you're interested in more advanced mapping videos just let me know in the comments for now that's all for this video thank you for watching if you've enjoyed it please like And subscribe to the channel and we'll see you in the next video

Channel: BugBytes

Views: 14,491

Keywords:

Id: KHi58Gf5EJE

Length: 13min 47sec (827 seconds)

Published: Wed Jan 18 2023