 Hello everyone, I'm very very happy to be here with you whole in person Finally, so in this room has never has ever used a web map Oh few people. Okay, and who knows what Django is Perfect in this talk we see together how to build web maps from scratch with Django obviously If you are asking yourself what types of maps we can build with Django Let's see an example right away These maps show mountain peaks all around the world and we'll use We all use map like this every day in mobile application or websites and I built these maps With Django using the natural here to map that asset and in this talk we see together how to build map like this Maybe But first I present myself So I'm Paulo Macchiore and the city of 20 tab a bitonic software company based in Rome in Italy I'm a software engineer and a long time Python backhand developer after using Django for a few years I became a contributor to the project and I've always loved attending conferences like this and over the year became a speaker. I also Really like hiking in the mountains So I decided to build a map where I can put all the mountain peaks I've reached. I Took this photo from the starting point One of my last hike I was in the Italian up in ines in the central part of Italy and design has not yet reason but trust me in the distance during the Adriatic scene and And The making of this map will be a bit like this hike We'll start from an easy stretch and we'll go up in altitude where things get more challenging But let's start from the basic about web maps A web map Have many feature it can be static or dynamic you can interact with it or you can only view it The map can use raster vector tiles to represent the surface but usually the data is stored in a special database and When map will use JavaScript library to show data on your web page On Wikipedia regarding web maps we can read that web map is the process of using the maps delivered by geographic information system on the internet But implementing a geographic information system for scratch is beyond the scope of this talk to do this as you can imagine We are going to use Django my preferred web framework. This cable today is not working So the requirements to create our map with Django are a stable and supported version of Python and the latest stable version of Django itself My example I've studied it in a virtual environment and I suggest to you to do the same to create the my map project as which to my Project directory and then use the start project Django command and the basic file of our project will be created for us After reaching to the my map directory we create our markers up with the Django startup command Again, all the necessary file will be created for us. It will be very hard Now we have to activate our markers application by inserting its name in the list of Installed apps in the my map setting file At this point we can proceed to insert in the markers view file a new template view for the page of our map in The marker templates directory we can now create a template file for our map For now, we had only usually border plates without title, but without a body content In the markers URL We must now add the parts of our The view map using its template view as a last step We include in turn the URL file of the marker up in that of the project We just made a first view in Django But it will show only a blank page so we can move on to something more challenging Okay, I took this other photo after after half an hour of walking in the dark You can see the sunrise in the distance and we are about to start the high altitude paths as For your hike something will be begin to be seen in our project as well In fact, we'll have a blank map page using leaflet library Leaflet is one of the most used JavaScript library for web maps. It's a free software and it's desktop and mobile-friendly L is very light. It weighs just over 40 kilobytes It has a very good documentation that you can read directly online To use leaflet, we need to link its JavaScript and CSS module in our template We need Sorry It's time We need also a div tag with a specific ID in addition using the Django static template tag We'll also link our custom JavaScript CSS file Which will now create We add our CSS file in the static directory and inside it We add only the basic rule to show to show a full map a full screen map In our JavaScript file, we add the code to view our map Using the defined variables we initialize an open-street map layer We hook the newly defined layer to our map and the last statement sets a map view That mostly contain the world with the maximum zoom level possible So we can now start The Django project with the run server command and finally visit our map page in the browser That's it. We just created an empty map with Django and the result is much much pretty much what you see now I'm out without markers showing the world words This photo showed a crossroad at the end of the first part of my hike just before a very challenging appeal stretch the sun and reason and Landscape is visible around and likewise after having visualized our map We will now start with a meet a bit more elaborate part Writing more codes to create our marker and display them It's time to get to know and activate the Django the Django geographic module Django added geographic functionality a few years ago in the country GIS module with specific fields that are based back-end special queries and also admin integration Since then many you use a full feature. I've been headed every year until the latest version and Before activating hits we need to install some requirements and mandatory Django requirements is GDEL I promise It's an OS geo library for reading and writing raster and vector just special data I don't know why it's working. So Okay It's released with free software license and it's a variety of useful command line for data translation and processing to easily install GDAL package on Debian and You can use the apt package manager, but for other operating system you can read specific instruction in the Django documentation We can now activate the Django by adding the country with GIS module today started up in our project setting to use Django we need to change our database engine and We use one of the company database back-end in this case. We have chosen to use special light It's a special extension for SQL light the Django defaulted at the base back-end It provides a vector geo database functionality and it's released with free software license. It's a very simple architecture And a complete database, you know, in an ordinary file As before on Debian base system, we can install a special light package using the apt package manager So let's add special lights As a database back-end Setting the default engine in our project setting We can now Finally define our marker model to store location and a name Our two fields are both mandatory. The location is a simple point field and we'll use the name to represent the model To easily insert new markers in the map We use the Django admin interface and we define a marker admin class by inheriting the GIS model admin class Which uses the open street map layer in its widget? So now we can generate a new database migration and then apply hits to our database We also create a new super user to access the admin interface and after starting the project locally we can now start the project as usually with with run server and We can visit the admin in the browser if It's true. Okay Here is the page for inserting the markers in our admin as you can see we have a text field to enter the name of the spots and a GIS widget that we can use to manually navigate the map and then manually define our point in the space in this case is the The peaks our I want to reach So after having created more markers with the admin we can finally show them in our map and We can do that by adding the information in our view Here we are retrieving the all the markers from the database and Converting them to Geo JSON before adding them to the context of our view in our template We use the JSON script template tagged to Totally random to Sorry in our template we use Geo JSON script template tag to add our markers in our page the Geo JSON script the Geo JSON script template tag will generate a code like this JSON Geo JSON codes So let's edit our JavaScript file and store the Geo JSON in a variable Starting from this variable we build a layer for our map and we extract also the name of the single marker for our label and finally we had the layer in our map by setting the view to contain all the data We can now start to gain our project with the run server command and see again in our browser So this is the map and this map we see few marker I uploaded through the admin and They are inside the page code, but the loading is still fluid and fast. You can also see the pop-up marker maybe of the peak and But if we add a lot of more marker to show our map loading Would would be much slower and leaflet will have a harder time rendering it So we need a better solution this photo show a beautiful landscape At the end of a challenging climb the idea speaks begin to be seen or round But there are still challenging passages before reaching the summit So we then continue implementing the final version of our map first. Let's start using post GIS as the new back end engine Post GIS is a that a postgres extension and it's also the best database back end you can use for to jungle it in I tried Sorry for for this So it internally integrates special data and has a special data types indexes and functions In order to use post GIS as a database back end. We need to install the postgres Postgres seal client to library and as before you can do it with the upd package manager Now we modify the project database setting adding the post GIS engine and the connection parameter For our postgres database, which you can have locally or remotely So the Python requirements It's a funny presentation today the Python requirements of our project are increasing and Therefore a good practice. It's to create a requirement file with the package list We'll use the Python postgres database adapter Django rest framework. It's geographic at dawn and also Django filter We install all the Python requirements using the Python package installer module The package that we use directly in the code of our project are Django rest framework and its geographic at dawn Which we then insert in the list of the solid ups of our project settings So let's create a serializer for our marker class In order thing from a rest framework. Yes serializer We only have to define the optional field to be shown as additional property the geographic field location and maybe and Sorry and the model marker So our orientation is to expose our markers via our restful API and to do so we define a read-only view set we set the location as a field to filter our markers and Then a filter based on bound box We also return all our marker instances without any limitation or filters So in the markers application we define the URL of our new endpoint using the Django rest framework Default router to create our path and finally we add the definition of the URL of our project and We had a new path for the API that includes the path specified for our markers so after finishing our Restful API we move on to update our JavaScript file as we no longer have the data preloaded in our page We no longer have a way to position the map so that it contains all the markers So we try to locate the user In the positive case if the user authorize the map will use its location to center the map in the negative case We locate him in an arbitrary point in the Atlantica's ocean and with a low zoom level This is your point So by no longer loading the mark really the markers directly on the page We therefore ask our endpoint to return only the markers of the specified displayed area paste as a bond by a bound box string To build the marker layer we ask our end point for data Asynchronously and extract the properties we want to show in the pop-ups We invoke this flow every time the user stopped moving on the map and finally here is our complete map In this example, we can see how the markers in a specific specific map are look and if it's work I Don't know the more time So the running the loading take place very fluid not in the video But because the number of car occurs only when the movement of the map stop and therefore the data traffic is reduced to the essential And the rendering is carried by leaflet very well. So That's it start again Okay, okay as our map project the hike No, maybe as a more map project that I also also reached its final destination The view is a bit covered, but we can finally have the new marker to the map with these points And it it was one of the longest hike I ever made and I hope to be able to do new one soon And show you if it's work at the end So there are also many other features that we can had in the future in a map for example Marker customization pop-ups to show more information filtering based on relational data, not only geographic clustering of the marker both in the front end and back end and Also using geocoding services to add marker locations started from an address for example and so on Before before saying goodbye, I want to share with you some tips Based on my experience as a map developers with Django It's strange Two more slides So the first suggestion is read the documentation in the Django website because it's full information about the Geo Django But also read the details about how things work in the policy. Yes documentation And read the source code of the board project on GitHub because there is something you can learn only from the source code unfortunately and Last one is search for question on stack exchange But try to answer the question and not not read the solution because it's a way to improve Last but not least you can also study this presentation because it's released with the creative commons license and Maybe I can finish Okay, okay 20 tab The company I work for we have developed many map with Django And you can find out more about open source project and petonic work using this context and last one To find out more about my personal work with Python and Django You can use also my contacts with this QR code. You can download this presentation on my website. It's already there and Thanks for your patience. Thanks again for having me and enjoy the next talk in the conference So if there is some questions, I'm available now and also after The talk and I don't know if there is some online. No, no like question No question about the connector Thank you for the for the interesting talk It's it's great to see what you can do with Django and on this side of things I haven't experienced it before and I appreciate you soldering on through the technical difficulties as well Do you have any recommendations in terms of tile sets hosting that sort of thing? Do you recommend that, you know, you try and serve those files statically with jet in the static files of Django or Relying on a third-party API service or anything like that? Yeah, we use this technique to host internally everything for our project so We use only external tiles from my box or the free one from OpenStreetMap and I think with PostJS Maybe with managed solution with Postgres you can solve 90% of the whole problem will you can have in a project Only if you are very big like the company you need some more complex solution, but for Maybe one million user we use PostJS and Postgres no problem We at the point you can you have to start to clusterizing or doing something like that Everything you can do directly with Django and Postgres Thank you for your question and I want to thank also the technical assistance me So if there is no other question I say goodbye. Thank you