How to Display a Map with Leaflet on a Django Website

in this video we're going to create a Django website that displays an interactive map for each country in the world using leaflet which is an open source JavaScript library for mobile friendly interactive maps we're going to pick up where we left off in the last video and that is in the admin site which we're displaying all 209 Sovereign countries the one thing I don't like about this though right off the bat is that these countries are not in alphabetical order so let's take care of that first so I'm going to control C out of our development server and inside of our world app directory we're going to open up models.pi and at the very bottom still within the country class model definition we're going to add a sub class in here a meta class that defines the ordering of our models anytime that we query the model from the database so it's the default ordering so we'll do class meta and under there we're going to have one attribute ordering equals name and basically that's just saying if we go back up here to the top we're going to take the name well it's not up there oh there it is yeah name we're going to take the name of the country and use that for our ordering so let's save that run our server see if that works and go to our admin dashboard refresh the page and now we have our countries in alphabetical order let's keep things simple initially and I'm going to show you how to just display a simple hello world page in Django so we'll minimize this get out of our development server and go into our app directory which is called world and in here we're going to make a directory called templates which is where Django looks for HTML templates and in there we're going to make a template called index.html and this is going to be a super simple HTML file that has an HTML open close tag a body open close tag and it's just going to say hello world as a header one element now inside of our also in here we have a views.pi file so let's open that and this is where we can Define what our view does when a user goes to a certain page so here we're going to make a function called index which takes a request as an argument and all we're simply going to do is return and return that page that we just created that HTML page so we can render that out by passing in the same request that we got into this function right here and then specify the name of the template that we wanted to display and in our case it's index.html Django is smart enough to know that there's a template subdirectory in our app directory so we just have to specify index.html here one last thing we got to do here we'll go up a level and inside of our GIS subdirectory we have a file in here called urls.pi so let's tell Django that we have a new URL in our website we can do that with by adding another path to our URL patterns list here and let's say when we go to our IP address or our domain name slash home this is what we want to happen we want to basically execute the code that we just created in our views.pi file so we can specify that by pointing to views dot index which let me finish writing this we have a file called views and inside that file views.pi there's a function called index and we just have to make sure that we can see that in here so from world import views so there's a world subdirectory inside of there there's a views.pi file and we're just referencing the index function that we defined in there so let's save that and run our development server see if everything works so we'll open up our web browser and instead of going to our IP address 8000 admin we'll just go to our IP address and one thing wrong here we did actually say that we wanted to go to slash home because we don't have a page at our root of our website yet so we let's indeed go to 8000 home and that will go ahead and load the hello world HTML let's take things a step further and display the list of countries on this page so we'll minimize that if you get out of our development server and go into our world app subdirectory I'm going to be working in views.pi again and this time let's import our model so from World dot models import country okay this is kind of like it should be if you did watch the last video this is exactly what we did in the python shell before so inside of our index function what we're going to do is create a variable called countries and we're going to assign to that variable country dot objects dot all so we're just getting a list of all the countries now the render um function call actually takes one additional argument called context so let's make a context variable initially it's just going to be an empty dictionary but then we can assign one of the keys in the dictionary we're going to call it countries and we're going to assign to that this variable that we just created the country's variable which is going to be a list of all of our countries from our Django model now the only less thing that we have to do is pass that into our render function so we can do that as the third argument for context and let's go ahead and save that now let's do something with that data in our template so we can open up the templates file called index.html and you know we can still print out hello world but let's Loop over all the countries and print them out on this page so we can use the Django template syntax which is curly bracket percent sign and then we can do a for Loop for each country in the country's variable which we just passed into the template we're gonna let's just do a a paragraph element to start so we'll print out the country's name so we have access to all of those attributes that are associated with each country so we're just going to use the name initially and then after that we can close the for loop with end four one word and that looks good so let's test that out let's go up with level and run our python development server open up up I forgot a t on the import in views.pi so let me make that fix real quick okay that should be good now let's run the server that looks good and we'll come back up here refresh our page and now we see a list of all of our countries let's take each one of these country paragraph elements right now and turn them into links and we'll link them to a page that doesn't exist yet but we'll link them to a country specific page so one step at a time let's just create the links first so we'll close out of our development server go into our world app subdirectory and then our template will just change that up a little bit index.html so we'll wrap the country name in an a href element which is a link element and we'll just leave that blank for now until we get the element closed up here and the URL we have a lot of different options I think one of the most simple options is to just use one of those ISO three letter country codes to keep things simple so let's do that let's access our country data and we'll use country what is it called ISO A3 that's one of the columns in our shape file which is now in our database so when somebody clicks on this country link it's going to go to a page slash the country's three letter ISO code so let's save that and go up a level test that out run our server we'll refresh the page all of these should turn into links and they do let's hover over Afghanistan and you can see down here that it says it's going to go to home slash afg for that Albania ALB Algeria dza and so on and so forth now if I do click on these Pages they obviously don't exist because we didn't tell Django about them but we'll take care of that next so there's three things that we have to do here we have to update our urls.pi file like we did before update our views.pi file and also create a template for each country page so let's take care of that one by one we'll close out of our development server go into we'll do the URLs first so let's open up GIS urls.pi and just like we did before with the home page let's make a page for each country so what that's going to look like is we'll make a new path in our URL patterns and this is going to be this is going to get a little bit complicated but not too bad so for each country page we're going to home slash some three letters and those three letters are the country code so let's spell that out here so when the user goes to the URL or the IP address slash home slash the iso code we are going to execute the function which is not yet defined in views.pi called country so let me explain the syntax here anything between this open less sun sign and close greater than sign is going to be passed into the function called country in views.pi which we have yet to Define so that'll make a little bit more sense in just a second when we go there and do that but what that's going to pass in is the value in the URL at that point so let let's go ahead and show you what that actually looks like so let's open up let's go into the world directory and open up views.pi and let's make a new function definition here called country as we defined over in urls.pi that's also going to take in a request and the argument is called ISO code as we Define in urls.pi so again what when everybody whenever somebody clicks on uh Afghanistan it was the three-letter code was afg we're going to get that value assigned to this variable when we execute this so we can do something with that we can instantiate the object associated with whatever object or whatever country they clicked on so let's make a variable called country and we'll look up in our country objects we'll get the one that has an ISO A3 code that's equal to the iso code that we passed into that function so again somebody goes to Afghanistan afg is going to be passed in here we're going to look up in our country objects to see which one has that and we're going to return that assign it to the country variable now what we can do with that country variable is create our context again we'll just make that empty dictionary initially and then we will assign the country data associated with that to the context called country so the last thing to do just like we did up here we are going to return render with the request that was passed in we're going to load the country.html file which we did not create it but we will create that next and we're going to pass in the context which includes the country data so let's save that open up our templates directory and make a new file in there called country.html as we specified in our views.pi file and and here we'll start out again very simple we'll just print out the country's name in a header one element so let's see if we did that right we'll go back to the root of our project run our server and open up our application we'll just go to home for now everything loads good here let's click on Afghanistan and I made a spelling mistake so I said count text instead of context so let's fix that go into worldviews.pi and yep there is the mistake change that to context run the server refresh the page see if that works and the page does load but it looks like I might have made another mistake here let's see what that is and the other mistake that I made I'm sorry this is hard to do these tutorials live and not make a mistake um so I defined the variable as County not country so I need to make that c-o-u-n-t-r-y so that we're passing this variable into here so we'll save that run our server hopefully you one last time and if we reload this page we should see Afghanistan and we do so let's see that if that works for Australia and unfortunately it does not it says it returned more than 20. so turns out that I picked the wrong column here I'm going to go back into qgis and show you what I mean so the iso A3 code does not actually have a unique value for each country so some of them have this negative 99 Australia being one of them that's why it returned all of these rows matching negative 99 so a better option than the iso A3 code column is looks like the sav A3 column so let's use that instead we'll go back into our python code and make that change so let's go into the world directory open up views.pi and instead of the iso code here A3 code we're going to use solve A3 and I said it before I'll say it again hopefully this is the last time I'll do this python manage Pi run server and we'll test this one out so we'll go back here refresh the page Afghanistan we'll still go to afg but this time Australia will go to negative 99 ah and obviously that's because we didn't make the update in our template so if we go to world templates index.html we have to link to the sub A3 as well so we'll do that here and I'm not even going to say it anymore we're going to run our server and test this out again so we'll refresh the page Afghanistan goes to Afghanistan and where does Australia go it goes to au1 which is perfect so each one of these should now work and it seems like they do all right it is finally map time we're going to need to install two python packages to do what we want the first one is called Django leaflet and you install it with Pip install Django leaflet and the second is Django Geo Json which pip installed Django geojson we need to get PIP which is a python package manager to install these first so let's take care of that we'll get out of here and what we're going to do is a pseudo apt install Python 3 Dash pip yes to continue and if you're like me you did not follow best practices to do a pseudo apt update first so you'll avoid that error if you do a pseudo apt update to update the references to the packages and now we can do a sudo app to install python 3-pip all right now let's get those python packages with the PIP package manager pip install Django Geo Json and Django leaflet so we'll execute that and in our GIS settings.pi file let's tell Django about those new apps that we just installed so we can add two more entries in here one of them is leaflet and the other one is DJ Geo Jason so go ahead and save that all right now is the most important part of the tutorial where we actually display a map for each country so we're going to do that in our app directory inside of the templates and we're going to open up country.html uh let's scrap everything that we did in here and I'm going to paste in some HTML that I know is working uh and I'll explain this line by line so we're basically loading in the Django apps that we just made Django aware of and that we just installed via pip we're going to pull in some leaflet JavaScript in CSS files in our HTML header right here we're still going to print out the country name and header one element and then we have a div here that we're defining and we're using the leaflet map template tag and we're passing it a map with a map with a callback to map in it now what's mapping it mapping it is a function that we're defining down here between these two script tags it's a JavaScript function and it's taking in a map in options as argument so basically what this is doing it's creating a Geo Json object okay what we're passing into that is the country remember this is our context that we're passing in the country context one of those columns is called geom geom and that contains the map data okay the outline of the country so we're passing that in from the Django object we're converting it to Json which is something that geojson understands and we add this one last filter here after this last pipe called safe just to make sure that all the characters are converted from Json to something that geojson is going to understand or from Django to something that Geo Jason's kind of nursing so sometimes you can see like percent 20 in your url if there's a space that type of stuff so that's all happening here we're passing that into the geojson object and we're going to add that to the map that we passed in with that map object we're going to fit the bounds to the area of the country shape so that should automatically zoom into just a little bit of padding on each side of the country and that's about it so let's save that file and see if everything works so we will run our server open up our application go to our IP address 8000 slash home and we still load our countries as expected let's click on Afghanistan and we see the name of the country and the border for Afghanistan we can zoom out see that in the context of the entire world that looks good let's try one more let's do I want to do Italy let's do Italy click on that and that does pretty much what we expected it to do so hopefully this video was helpful for you getting set up with leaflet and Django and geojango if it was I have a video about taking your website after you develop it a little bit more and putting it into production as far as a Django website's concerned so check out that video next let me know what you think thank you guys for watching I'll see you over there foreign

Channel: Tony Teaches Tech

Views: 5,181

Keywords: django geojson, django leaflet, django map, django shapefile, django shp file, geo json, geojson, how to use leaflet js, leaflet js, leaflet js django, leaflet js html, leaflet js python, leafletjs

Id: MerY9gaOuvQ

Length: 20min 30sec (1230 seconds)

Published: Thu Sep 21 2023