Django Mapbox demo

hello everyone hope you're all doing well uh i thought i'd do some late night coding by um doing a django and that box integration um this is going to be like a tutorial quick start video and i'm just going to be coding and talking my way through it and seeing how i do things so feel free to follow along and just enjoy the coding i guess so this is going to be just a demo um and it'll have the most rudimentary implementations of mapbox in a django app so let's get it started i'm in a directory called mapbox demo and i am just going to bring out the code editor here and work from there in the terminal so first thing i want to do is of course create a python virtual environment and i want to um activate the virtual environment and because i'm on windows my command is going to be a source from slash script slash activate and if you're on a mac it'll be bin activate [Music] but since we're on windows it'll be scripts.activate and then we have uh activator right over here as shown in the parentheses and now we're going to be installing django okay so django's been installed and now i can start a new project by typing the command chango admin start project mapbox and this will create a mapbox project and i want to cd or change directory into that mapbox so that i have access to the manage.pi to run more up jingle commands and so in here i want to do python and stop i start app addresses and i want to create that addresses map and in this app is where the address model will live so first let's um go to settings.pi in mapbox and register this app as an installed app so you can do two ways to do that the first one is to write addresses and that'll be fine or you can do addresses dot apps dot address says config and if you have any questions on um why these two are so then you can just check out the jingle documentation for that um but yeah but to just to keep this project simple i'll just leave the addresses and the installed apps and now that the whole project recognizes the address app as one of the fits apps let's go ahead and make a model in here [Music] and now so this model we'll call it address it'll inherit from model stop model it'll have three fields so the first one is obviously the address and it takes models dot text field and so the user is going to be able to input an address and um it will have latitude and long longitude coordinates for them to convert into the mapbox api and have that address be displayed on a map and so of course you need a lat or latitude and it'll be in this it'll be in this model field and it'll be model start it'll be a boolean field because coordinates usually look something like 40 32 points something something something like that so the first one latitude it'll be a boolean field or not a boolean field what am i saying it'll be a float field and we'll have extra um arguments in here saying blank equals true and no equals true and the blank makes it so that the user doesn't have to put in the coordinates themselves they only have to put in the address and then the model will take care of the coordinate conversion for them and the null equals true is so that when the user initially create creates a new model the database stores the lat as value and of course we have to have a longitude for that and so i'll just copy this down and then call this long and this will have the blink and no it goes true as well because they're acting like pretty much the same way okay so now in order for us to do that auto conversion um first we need a converter and and we're going to use um python's geocoder package to do that for us so if i go to python geocoder and go to the read the docs as you can see you would normally use the requests library to make some api calls and then return it in a json file and then you know parse it on everything like that but the geocoder will take care of that for us and so if we look at the example over here they do a simple import and then they make a api call using google here so geocoder.google and then they input an address and when they call out the lat long it gives us back the coordinates and instead of using the google call for it if you drop down over here in providers they have many other different providers that you can use and map box is one of them so if i click on this they import the geocoder and they call the mapbox function which takes in a address an address and a key and this is going to be access key that we're going to need from the mapbox website and then once you go back to the main page after you make the api call if you do g.let long it gives you the coordinates so let's go ahead and use this to convert our addresses into coordinates in our save method in our models so first we need to make sure that we have that geocoder package installed so we'll do pip install geocoder and once that's done all you need to do is a simple simple import so you can import geocoder and and again whenever the object is saved we want this a save method to be converting whatever that address is for us so let's create a save override method and that'll be define save and it'll take the self arguments and keyword arguments [Music] and that's going to be keyword arguments and uh let's make the api call here so it'll be g equals um what did the documentation say let's go back g equals geocoder.mapbox and let's for the reference go down and it takes the address and a key and this is going to be referring to the the public access token key so instead of hard coding the address here um our address will be the instance address so it'll be self. address and this self.address is referring to this field right over here and we also need a key and a token and we will create the token here momentarily just to finish this save method it'll be well going back up here if you make this call and you do cheat all that long it returns the latitude and the longitude so if we um do g equals g dot long remember this returns a lot long in a list like so we can now plug the latin long back into our instances of the latin law so lat er self.let equals um g dot to the zero index or the first one which is this one and we'll do self.long equals g dot one and then return um save arguments keyword arguments or i'm sorry super address address okay so now we need the token for the second um argument here so let's go to that box and if you haven't made an account already um go ahead and do so it's free and once you make it you go to your account and as soon as you go into your account you have your access tokens so i'm just going to copy my default public token over here and i'm going to place it at the top outside of my class and then this key will be um i'll just call this axis token and so my key will be access token and if you want to get really specific with the access token you can just call this mapbox access token but you don't have to if you don't want to okay now let's go ahead and see um if our save method works in terms of converting the address into the coordinates for us to plug back into our map so for in order for us to do that we are going to need to migrate our model so we'll do that by saying python match.pi make migrations and that initial migration has been made and now we just need to push to migration by saying python managed up high migrate and along with that um the the user auth model has been also created so we can create a super user so it'll be python managed apply create super user and the username will be admin email will be blank just type in a password and now we can do uh python manage top high run server and before we do anything we need to add this to our admin so that we can see it in our admin page and so first import the model and register it so it'll be admin admin.site.register uh register address cool and go to our admin go to uh admin or login with admin and in our addresses um let's create a new address and this one will be washington dc kfc we just need one address somewhere so it'll be this food court right over here yeah so we just need this address place this here and we don't want our users to input this we'll be doing the save method for them and if i do a save the address has been created and if i click on it look at that it did the conversion for us because in our save method we make the api call and return the lat and long every time it's saved so uh let's say i want to change this address into something else um so whether you are creating or updating it it'll the save method will always convert it for us with the method by using the api call so instead of kfc we will do i don't know um mcdonald's and type this address or copy paste it and instead of being 38 and 77 if i do a save well they are still 38 and 77 um but if you look at the decimals and you can tell that they've changed so we know that this works um just to give a more exaggerated number um difference we'll do kfc in montana and we'll just uh copy paste this here and if ins 38 and 77 um if i save it it's 45 and 111 so now we know that this whole model system works so now we need to plug it into the map box api and render out a map for us to look at so let's go ahead and create a view for our um for our addresses to be displayed let's go ahead and just create a class view because we're going to be creating an object and the create view in django can take care of that easily for us so i believe that's well for more practical learning let's just go to django class view and specifically we're going to be looking at the create view and so this is a built-in um class view that lets us create new uh model objects and the good thing about this one is there's no need for us to write extra forms they can this class will take care of that for us so if i go to the create view down over here um it says from django.views.generic.edit import create view um so i'll just copy paste that i also believe that you can do django.views import create view but we'll just follow the documentations here and and just work off of this and also imports the model so we'll do from dot models import address and now we can create the view here so it'll be class address view and this will inherit from the create view and the first attribute that we need is the model which will be address and whenever we're creating it we're going to need to specify the fields that we want so there are only three fields for this model object but we only want the address to be put in so the attribute i believe is fields yep so fields equal to a list of um strings that have the that list of the fields so it'll be address and this address again refers to the field right over here which is the text field okay and let's go ahead while we're at it create a or declare template so we'll do a template name equals we'll call this addresses slash home.html because we're only going to have one page and then whenever the object is created we want to redirect the user to another page and it'll just be slash and that'll take them to the homepage again um okay let's put in some urls to route this into our templates and all of that and stuff so first we need to go to the root settings url and in our imports we also need to import the includes and that way we can do a path and we'll leave that blank include uh addresses dot urls and so this will make sure that if we create a urls file in our addresses app um the core settings file can pick that up so we'll create another url stop high in our addresses and we'll do change from django dot urls import path and we also need the views imported so from dot views import address view and then we'll make the url patterns equal a list and it will create that home path or the address view saying path and this will be blank as well and then since our address view is a class view we need to do address view dot as view and just give its name will be home [Music] we don't need to worry about putting an app name for this um just because it's a very simple project but if you want to add a namespace for this you can but we won't for this project okay so that we got the views and the urls configured let's go ahead and create this home.html template that we need to render out everything so there are two ways to create a template directory the first one is to stuff each template um respective to their own apps into the apps directory so if i have the addresses up here um i can put the templates directory in there and then create another one called addresses and within this i can have the home.html so if i have another app called i don't know say frog then in that frog app i would have a directory called templates and in that templates directory i would have another one called frogs so that's one way to do it the other method is to let's see here is to at the base of the project so where the settings slash map box in this case and then manage.pi is you create a directory here called templates and now that's created you can put the apps directory template directories in there so it'll be uh addresses and so in our addresses we can type this it and then in this template directory it can contain other apps's um templates so if i want to do navigation then i can have the navigation stuff in there as well and i believe if you want to keep the templates consolidated into one file or one directory at the root then i believe you would have to have django look for that by configuring a little bit in the settings so if you go to the settings over here and go to the templates um in this directory one i believe you have to say baster and do templates and this basically means that at the base directory look for the temp the templates here so in this addresses if i do home.html and i want to give this a skeleton um real quick so put that switch back to django and if i do i call my pi server and and let's see if um this loads okay now we're we're at the um we're at home.html say uh h1 jingo and if i reload that there you go so now we got the template working um let's go ahead and bring our map in so if i go to uh mapbox docs and go to the documentation if i go down here this is what we're going to be using it's the gljs it's a javascript library that uses interactive maps to render out a lot of cool stuff so click on this and if i go down there's a quick start and this is the map that we're going to be putting into our django app so it says to get started you need an access token and we have already done that or we've got our access token and so go down it says include the javascript and css files in your head so we'll just go ahead and do that real quick i'll just copy it and in my head down here right above the title um i will put the scripts and link and it says uh in your body include a following code so i'm just going to copy this and place it right underneath my h1 tag so we have the div here that shows the map i guess and then we'll be calling a script and we have our access token and we'll create a new variable and this new variable is going to have that map in there so um if i refresh the page there's our little map and it's in urgent go up now now if you want this a little bit bigger um i can change the width to 100 and uh raise the height this is doubling race to height double to 600 pixels and so that looks a little bit better i guess um we'll keep it for now actually if i reset this to ratio this works just fine and now the map um has more configurations that you can use um such as the styling and if you want to change your centering um we can change that too and if you want to change the the initial zoom you can change that as well um so yeah now we have our map now we want to render in our addresses into little markers that can be planted on our map so let's go ahead and see how it can do that first we need uh markers so reading this documentations it says markers and controls so if i click on or over here and if you can't find um this markers and controls in the quick start you can just do um you can search mapbox markers and it'll be the first result so going down here if i go down to the examples here i'm just going to copy paste this and place this right under my map so as you can see the marker takes in the coordinates and then adds them to the map and this map is defined already for us so if i reload the page let's see if we can find our marker here can we find it nope we can't find it right now let's see why oh there it is it's it's all the way in your uh in ukraine okay so now that we have our template um we can use the template to display all of our models and usually how you would do that is through the context in our views so let's just use our views in our class view we can specify our contexts and so the method for this is define get context data and usually this the convention is to return the super so we're just going to go ahead and do that but we are going to return it in a variable called context and so now this context is going to be a dictionary so if you're writing a a function view it's it's the same thing as context equals dictionary and then you can add um objects here like address equals address dot objects all stuff like that so it's essentially the same thing so we'll do context and if you want to add to dictionary it's going to be address and this and i'll keep it plural for the name conventions so context addresses equals and just plug this in here and then once we're done with everything you just return the context with all of the added addresses and i believe that's all we need to do um if you go back to the templates here you can see that the act the access token is publicly or like hard coded in if you want to change this you can also put put this into the context as well if you want um so if you want to do context is map box access token and i'm just keeping the naming convention same as the one in our models and so this will be the same thing um i'll just string it real quick and it'll be copied to this and once we return it our context will have the token and the addresses um query set available for us in our templates so going back to our templates um this can now be access or mapbox texas token and for here um how we can display all of our objects as markers is very simple you just write a for loop so you want to do for address and addresses and remember this addresses is now the query set of objects not all so you're training all of the address objects so for each one you're creating first let's end this for loop first so for each one you are making a new marker and in that marker you are setting the address yeah address dot long and address dot lab 2 and it's going to be long and lat because it says dot set long lat so we're just making sure we're consistent with which one switch oh we didn't put it in the right um we didn't encapsulate it in these curly brackets here there you go let's see if this works now and i believe this should be out of here like that let's see if it works great now our marker is working um and just for the sake of things uh we will keep the the latitude and the longitude centered in that area just so that when we um refresh the page we'll have this as a center okay so let's just add um a little bit more markers just so we have like a more visually appealing thing going on so let's go to addresses and i'm going to create a new one and this one will be uh west college park so college park montana is it empty or m.o maybe it's mo so if i save this i have the coordinates in here so if i refresh it there's another marker um i'll do one more and it'll be let's see south meadow so i'll create another one south meadow montana whoops save it and refresh did it create another one i'm not sure anyway now that we have our markers working and they're um pointing to in the map where all of our addresses are i want to be able to click on these and give a little pop-up of what the addresses are so if i go back to macbox markers i want like a little pop-up so it says get pop-up and in our marker which we already have i want this to pop up so i'll just click i'll just copy paste this part in um right over here yep and instead of hello world i will do a paragraph tag and in that paragraph tag i'll have sell uh address dot address and if i refresh it and if i click on it it displays our our addresses that we input as our models so yeah our stuff works one last thing we want the users to input the addresses now instead of having a super user go to the admin for it so let's quickly do that um we'll just create a form here called metform method equals post because we're inputting information into the database and close that form real quick and of course with django forms you need a csrf token and we will do form and then do a input type equals submit value equals subnet address okay now we have this form um and let's do a la tinga mexican restaurant montana i submit it okay well apparently there's another place in um louisiana called call this thing um and this goes to show that you know we can optimize our our searches better but since this is kind of like a very quick start kind of ordeal we're not going to get into that right now but yeah the form works and um this form is basically provided us for free from the class view because this create view return automatically returns a form with the fields and so let's say we only have the address here which is this input field right over here which is a text field and so if we have a flat and a long and refresh then we also get that as well but since we don't want the users to you know do all the heavy work themselves we'll keep it as address okay so yeah that's pretty much it sorry took a little bit longer than i wanted it to yeah i hope you enjoyed it if you have any questions as always just let me know in the comments or any other way that you want to reach me but that'll do for this video i'll catch you guys in the next one bye

Channel: Ryan Chung

Views: 2,820

Keywords: django, mapbox, python

Id: 65flD9ScEQM

Length: 37min 54sec (2274 seconds)

Published: Sun Mar 07 2021