Maps with GeoDjango, PostGIS and Leaflet

Speaker 1: I have the pleasure of announcing Paolo Merchiore. I did I practiced. Maps with Geo Django, Post GIS, and Leaflet.

Speaker 2: Thank you. So uh hello everyone and thanks for having me. Uh I'm here to talk to you about maps I'm not a GES expert, but I'm talking about maps from the point of view of a Django developer. It's knowing outside. So I want to start with this picture I took in a beautiful place in Europe in the summer. Who can tell me which country this photo was taken? Someone? No one. Okay. I'll tell you. It's Hedeli and to be more specific, I took this photo in a natural reserve in Abruzzo, the region where I live and work. But first a little bit about myself and what this picture has in common with maps.

Speaker 2: I'm Paolo Mecchiore, I'm Italian and as you can see I like the C I took this photo in the very same place of the previous one. I always like taking photo in my travels. I'm a computer science engineer and my thesis was about free software. I discovered free software when I was at university. The first free software I started using and contributing was a photo organizer. I was able to share photo with my friend like a static web album. I could also upload a scanned image of a map and put manually some photo in specific point

Speaker 2: on that map. It was my first web map. A bit basic, but it worked. And I forgot to mention that all of these happened in the pre-Google map era. So long time ago. After university I started using Python in my first job, we developed websites with Plone. Plone is a content management system with uh uh built on top of Zoop and um uh on top of its uh Zodb, the object-oriented databases. Then I needed to store data in a relational database like Postgres. And I started searching for a Python web framework with support for Postgres

Speaker 2: I found that the best choice for me was Django. My resources about Django, I read its documentation and I f I tried also the Geo Django tutorial. In the meantime, I started working remotely as a Django developer and the last few years I've been working at 20Tab as a senior developer. 20Tab is a software company based in Rome with some remote worker. As a company we attend and support some local meetups and conferences like this one. In 20Tab we use agile and lean methods and grow up marketing approach. The main part of our work is uh software

Speaker 2: development. with technology like Python, Django, React. js and Micro Whiskey. Some months ago an our customer asked to us to add a dynamic map on their website because they wanted to show their data on the map. So I started studying again the Geo Django documentation to find a simple way to integrate a web map in a Django project. Okay, now our goal is clear and let's see the main topic of this talk. We are talking about maps but we are also going through to travel all around Europe We will start from Abruzzo, the region

Speaker 2: where I come from, and we will speak about Gio Django. Then we'll go to Rome. the city where 20W is based and we will see all the PostGIS features. We'll go south to Sicily, the region where our front-end colleague Carmelo come from to speak about Leaflet. js. After that we will come here to Copenhagen to see a basic web map built from scratch. And at the end we will go to the south of France. where our customer is located to see a new case of a web map in a Django project already deployed in production. So let's talk about web map.

Speaker 2: A web map in general is something that allows users to view and search data in a special way. and it's common to add one in your project. Usually a web map is delivered by a geographic information system and it can be static or dynamic You can interact with it or maybe you can only view it. The map can use raster or vector tiles to represent this surface. Usually the data is stored in a special database and a web map will use JavaScript library to show data on your web page. So we already talked about GeoDjango, but what's

Speaker 2: Geojle? Geo Django is a country model that transforms Django into a geographic web framework. It will provide new special field types that you can use on your model Geo Django adds special queries to the Django ORM. For example, you can find a particular point in an area. Geojango extended Django admins with support for editing geometry fields. And finally, GeoDjango provides now four special database backends. As you can imagine, we needed a backend to manage all this geographical uh data

Speaker 2: and our choice was PostGIS because we already use Postgres in all our projects. But beside that, Postgres is also the most complete Geo Django backend. It is an extension of Postgres and it integrates special data in it. Postgres adds new special data types and specific indexes. that speed up the special function you can use in your data. Leaflet. js is one of the most used JavaScript libraries for map web maps. It's free software and it's both desktop and mobile friendly.

Speaker 2: It's very light. It weighs uh less than 40 kilobytes of JZP JavaScript. It has a very good documentation that you can read online and it it's also simple to use and it performs very well So now we are going to see an example of a map integrated in a Django project. We will use a basic Django project that everyone maybe know. I took it from the official documentation. We are seeing an extract from a blog application in the making query section of the documentation. I read it a lot of time and I think also you read it a lot of time.

Speaker 2: We have a blog model. Very simple. Another model for authors And then we have an entry model. The entry model has an headline, it's connected to a block, and it's related to one or more authors. So after installing all the required system packages, the first step to add a web map in the block project is to configure the setting file. So we need only to add the gear Django module and the star adapts Then we have to update the default database

Speaker 2: engine and use PostGIS instead of Postgres. But to use Postgres, it's necessary to create its extension of your Postgres database. To do that we can simply generate an empty immigration file from the blog application. Then we can use the create extension function from the Postgres contribute module, as you can see here. Okay, now we are working on models. After the post disactivation

Speaker 2: We can add a point field in our entry model to store a valid location. I omitted the other fields we we saw before I also added a let -long property to the model because it's useful to have a coordinates of our location in a list form when you work with Leaflet. js We can add a location to our entry using the admin. Um so we are going to use a different class as usual it's the open street map geo admin imported from um geo django We have defined

Speaker 2: an admin section of our entry model as you can see here. We have set only the default values for latitude, longitude and for the default zoom level. Okay, after doing that, a very nice map will show up in your admin page. It's very useful and you can use it to edit your map and also to edit an area or going around, zooming and so on. Okay, now we have headed a lot of points in our project using the admin.

Speaker 2: So when we have a lot of entry with points, we can show them in our web map page. And to do that we are going to use a generic class-based view from Django We need a list view with a filter that returns only entries having a valid point. And then we can connect this view to our URL paths. Finally, to show the map we need a simple HTMLA page with basic tags We have to link the Leaflet style sheet and the Leaflet JavaScript file to the either section. The other mandatory step is to add a div

Speaker 2: with a specific ID. And if you want you can specify some style rules like widths or heights, add some titles and so on. We have an empty scripts, a JavaScript section, but we'll see in a bit. So yeah, you can see the JavaScript code that completes our page and draw our map. We only have to define our map by setting the default latitude and longitude at the end zoom level. This is the point for Copenhagen. Then we have to we have to add a tile layer and here we are using the one from OpenStreetMap

Speaker 2: as a final step We cycle on all the entries that we received from the view and we create a marker on the map for each of them We have used the entry string representation in the marker pop-up message. You can add also other things, but it's the basic step you can do. So after doing all these codes, this is the final result. It's a basic map page. As you can see, we have two markers. One for the location of this conference and another one for the location of the sprints with the pop-up

Speaker 2: opponent Okay, now we have reached the goal of adding a web map in a small Django project. In this case the Django project was the blog up from the Django documentation. But what what can we do when the project is bigger and maybe is already deployed in production? Let's see So in our case, in 20Tab, the already deployed website was Merdemar, sorry for my friends. It's an international real estate website that advertises coastal properties close to the sea, both for sale and rental.

Speaker 2: So the website has been online since 2014 and it's translated in eight languages. At the moment it contains almost 100,000 active advertisements. in about 40 countries spread over six continents. This is the screenshot of the mobile version where we start working on the projects. So its first version was developed by with Django 1. 6 and it ran on pipe Python 2. 7. The data are stored on Postgres 9. 3 and there was only one location field in the database. Unfortunately, it's stored as a text field.

Speaker 2: Leaflet JS 1. 0 was used to show a static data and view only map. There is no user interaction at all. Okay. That one is the screenshot of the mobile version after the introduction of the interactive map. It was developed with uh Django 2. 1, Geo Django, and Python 3. 6. The data is stored in Postgres 10 and the special data is stored in geographic fields thanks to PostGIS 2. 4. Leaflet JS 1. 4 was used to allow users to display and interact with a dynamic map.

Speaker 2: Let's see some code for our project. This is only an extract of two model of our project. So we have imported two fields from GeoDjango. In the City model we used a multi-polygon field to store the borders data. And in the add model we referenced the CD with a foreign key and added the point field to store our location. The real model have other fields but is not necessary to show there for our goal So we before uh we see before um basic approach and but in our project

Speaker 2: We needed a more complex approach to serve the special data because we have a lot of um of points and of a lot of costal properties. So we decided to build a RESTful API with Django REST framework. As a DON we used Django RAS Frameworks GIS for geographical support and Django Filter for filtering support. After the installation, we needed to add them to the install adaption setting. So the first step to build our API is to write a serializer We inherited it from GeoFeature Model Serializer. It's imported from Djangor 's framework GIS.

Speaker 2: In order to define our serializer, uh we had to specify the model. Sorry the Geo field in our model and the additional field we want to add in the final Geo. json result So, and now we need to write the view. We imported the read-only model viewset for Django Rest framework and also the serializer we wrote before. Our view set inherited from the first one and in the query set we filtered all the ads with the location

Speaker 2: The bound box filter and the filter backend allow us to filter the API using a bound box. But what's a bone box? In this case a bottom box is a the map the map area. The bound box is an area defined by two latitudes and two longitudes. And it permits you to more do more uh requests when you move your map because you are changing the latitude and longitudes Okay, now the last step. After the viewset definition we imported the default Django REST framework router to register

Speaker 2: our marker spot. So as I said before, we will get data from the API and the PAPT every time we will we will move our maps and leaflet um are sending us The new button box defines the butt you're moving on the map. Okay, so at the end of this step calling calling our API you will receive our geo GeoJSON data. This is a very small extract of a GeoJSO with one point. You can see only its coordinates, its ID and no additional properties.

Speaker 2: But in the real project you can see a lot of them and you can add also a lot of properties to customize your pop-up in your map Okay, after decoding part, I'd like to show you a screencast of the interaction with the map. Uh because the new version of the website is not deployed yet. Let's see if it's work. Okay, it started. Okay, as you can see we have a list of properties. We have cluster in the left on the map and they are connected because they highlight when you

Speaker 2: move your cursor over it At the same time you can filter all your properties and you can filter using the different things like the type. like the distance from the cost. As as you can see the cluster are updating, also the number in the top of the list are updating And the list itself. Everything is done with Leaflet that are calling our API. So the list is still connected with our maps and you can reset

Speaker 2: all it. all the filters and you can hide it to use another approach. You can use our how to complete input that start at after the f the the third characters yard it and you can change your location on the map where we we went in Sardinia as you can see the list is updated and also this is the custom pop-up You can also move your map or zooming out and you are start seeing all the cluster showing up Let's see.

Speaker 2: Okay. Okay, now I want to show you again this photo. It shows a typical building on the Abruzzo Coast and its name is Traboco. I choose this photo because starting from photo like that I developed my interest in web mapping and also because in our use case project our use case project was about coastal properties. But now let's summarize what I've shown you. So it's possible to have an out-of

Speaker 2: -the-box web map with GeoDjango, PostGIS and Leaflet. js It's possible to execute special query and relational query at the same time, as we saw in the in the screencast. Your stack will be composed by Django and Postgres only. And Thanks to this solution we are able to implement also advanced features like backend clusterization, administrative levels, and dynamic special entity. Okay, I want to share with you all the resources

Speaker 2: that I use to prepare this talk and to develop the web map. Whenever possible we referred to the official documentation and we saw the documentation of all packages, Geo Django, Postgis and Leaflet. And we also refer to the code repository itself. Now some acknowledgments. I would like to thank Marie Rademar for trusting us to refactor and improve their websites. I will delight 20Tab for giving me the opportunity to be here with you all. And by the way, they are looking for a Django developer, so you can apply using their email address.

Speaker 2: And at the end You can use this QR code to visit the tag section of my website. You can find there the slides, the slides, they are already updated, uploaded. You can find the code sample and all the resources, URLs, and I asked you to add some comments or question about this topic or about the talk itself. Both the slides and the content on my website are released under Creative Commons license. So you can use it and share with everyone.

Speaker 2: Thank you.

Speaker 1: Thank you so much. We have two minutes uh for questions. That could be about Submit questions online at hashtag DjangoCon QA and IRCU on the IRC at uh hash DjangoCon. Um we can do there we go. Yeah, one question.

Speaker 2: Sorry.

Speaker 3: Okay. Thanks for your talk. I just wanted to know, entering data, are you using exclusively Django admin or did you write your own uh editor based on leaflets because the Django admin uh doesn't use internally leaflet GS.

Speaker 2: Yeah in Our customers have a lot of sources for their data, so they have a lot of importing commands that they use to take the data from other customers. and I show you only the uh the admin uh section because it's easy to fix some points A lot of time customer send misplaced points and then the operator have to uh go there and fix it with a very exact point but you can import your data in many ways it's only um a normal field so you can import it

Speaker 2: like JSON Jesvu everything.

Speaker 1: Thank you so much.