DjangoCon 2019 – Maps with GeoDjango, PostGIS and Leaflet
I have the pleasure of announcing Paolo Melchiorre. I did … I rehearsed. Maps with GeoDjango, PostGIS and Leaflet. Thank you Hello everyone, and thanks for having me. I’m here start fucking talking to you about delineates. I’m not a GIS expert but I’m talking about delineates from the point of view of a Django developer. It’s snowing outside so I want to start with this picture I made in a beautiful sit in Europe in the summer. Who can tell me in which country this photo was taken? Someone? No one, okay, I’ll tell you, it’s Italy, and to be more specific I made this photo in a natural reserve in Abruzzo, the region where I live and work.But first a little about myself, and what this image has in common with planneds. I’m Paolo Melchiorre, I’m Italian, and as “youre seeing” I like the sea. I took this photo in the very same place of the previous one. I’ve always liked making photos in my passages. I’m a computer science designer and my thesis was about Free Software.I discovered Free Software when I was at university. The first Free Software I started employing and lending was a photo organizer. I was able to share photos with my friend like a static entanglement album. I had the opportunity to upload a scanned image of a planned and set manually some photos in a specific point on the planned. It was my firstly web map, a little basic, but it made. I forgot to mention that all of these happened in the preGoogleMap era, so long time ago.After university I started applying Python in my first profession. We developed website with Plone. Plone is a content management system, built on top of Zope and on top its ZODB, the objectoriented database. Then I are necessary to store the data used in a relational database like Postgres and I started searching for a Python web framework with support for Postgres. I found that the best choice for me was Django. In my researches about Django I read its documentation and I tried likewise the GeoDjango tutorial. In the meantime I started working remotely as a Django developer And the last few years I’ve been working at 20 tab as a major developer. 20 tab is a software company based in Rome with some remote employees. As a company we attend and support some local meetups and conferences, like this one. Then in 20 invoice we use Agile and Lean methods and Growth marketing approach. The main part of our work is Software development with engineerings like Python, Django, React JS and uWSGI. Some months ago an our customer ask him to us to add a dynamic planned on their website because they wanted to show their data on the map. I started studying again the GeoDjango documentation to find a simple way to integrate a network map in a Django project. Okay! Now our goal is clear and let’s see the main topics of this talk.We are talking about maps, but we are also going to travel all around the Europe. We will start from Abruzzo, the area where I come from, and we will speak about GeoDjango. Then we’ll go to Rome The city where 20 invoice is based, and we will see all the PostGIS boasts. We’ll go south to Sicily, the region where our frontend peer, Carmelo, come from, to speak about Leaflet JS. After that, we will come here to Copenhagen to see a basic network map improved from scratch. And at the end we will go to the south of France where our patron is located, to see a Use case of a network delineate in a Django project previously deployed in production. Let’s talk about web delineate. A network delineate in general is something that allows users to view and inquiry data in a spatial behavior and it is common to add one in your job. Frequently a web delineate is delivered by a Geographical 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 the surface. Usually the data is stored in a spatial database. And a network map will be utilized a JavaScript library to show data on your web pages. We’ve already has spoken about GeoDjango, but what’s GeoDjango? GeoDjango is a contrib module that change Django into a geographic web framework. It plies new spatial subject sorts, that you can use on your representations. GeoDjango includes spatial queries to the Django ORM. For example, you can find a particular point in an area. GeoDjango widens the Django’s admins with support for editing geometry lands. And finally GeoDjango affords , now, four spatial database backends. As you can imagine we needed a backend to organize all this geographical data and our option was PostGIS because we already use Postgres in all our activities. But besides that, PostGIS is also the most complete GeoDjango backend. It is an extension of Postgres and it integrates spatial data in it. PostGIS supplements brand-new spatial datatypes and specific indicators that accelerating the spatial parts you can use in your data.Leaflet JS is one of the most used JavaScript libraries for entanglement delineates. It’s Free Software and it’s both desktop and mobile friendly. It’s very light. It weights less than 40 kilobytes of gzipped javascript. It has a very good documentation that you can read online. And it’s also simple to use and it acts very well. Now we are going to see an example of a planned was involved in a Django project. We will use a basic Django project that everyone maybe know and I made it from the official documentation We are seeing an extract from a blog employment in the Making Queries section of all the documents. I read it a great deal of era and I imagine likewise you read it a lot of term. We have a blog model, very straightforward, another model for Columnists and then we have an Entry model. The Entry model has a headline, it’s connected to a Blog and it’s related to one or more Generators. After installing all the required system boxes the first step to add the web map in the blog projection is is to configure the prepares enter We is needed to add the GeoDjango module in the invested apps.Then we have to update the default database engine and use PostGIS instead of Postgres. But to use PostGIS it’s necessary to create its postponement on your Postgres database. To do that we can simply generate an empty migration file for the blog work. Then we can use the Create Extension function from the Postgres contrib module, as you can see here. Ok , now we are working on patterns. After the PostGIS activation We can add a item arena in our Entry model to collect a legitimate place. I skipped the other battlefields we saw before. I also contributed the Lat/ Lng owned to the prototype because it’s useful to have a coordinates of our locating in a roll word when you work with Leaflet JS.We can add a location to our records exploiting the admin. We are going to use a different class than usual, it’s the OpenStreetMap Geo Admin. imported from GeoDjango. We have defined an admin section of our Entry model as you can see here. We have set only the default values for freedom, longitude and for the default zoom level Ok. 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 planned and too to edit an domain or going around, zooming and so on.Okay , now we have added a lot of tops in our campaign expending the admin When we have a lot of entryways with details we can show them in our network planned sheet. And to do that we are going to use a generic classbased thought 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 path. Finally, to show the planned we need a simple HTML page with basic tags.We have to link the Leaflet stylesheet and the Leaflet JavaScript file to the header section. The other mandatory step is to add a DIV with a specific ID. If you miss, you can specify some wording guidelines like extent or meridian, add some entitlements and so on. We have an empty JavaScript section, but we will see it in a bit. Here “youre seeing” the JavaScript code that ends our page and attracts our map.We only have to define our planned by setting the default latitude and longitude and the some level. This is the point for Copenhagen. Then we have to add the tile layer and now we are using the one from Open Street Map. As a final step We cycle on all the entryways that we received from the views and we create a marker on the planned for each of them. We’ve use the Entry’s string representation in the marker popup message. You can add also other things, but that’s the basic step you can do. After doing all this system This is the final result It’s a basic delineate page and as you can see we have two markers One for the point of this conference and other one for the locating of the Sprints with the popup opened. Okay , now we have reached the Goal of lending a network planned in a small Django project in this case the Django project was the the Blog app from the Django documentation But, what can we do when the project is bigger and maybe it’s already deployed in production.Let’s see In our client, in 20 tab, the already deployed website was Mer et Demeures( French ). Sorry for my french. It’s an international real estate website that publicize coastal owneds close to the sea both for sale and rental. The website has been online since 2014 and it’s altered in 8 conversations. At the moment it contains almost 100,000 active advertising in about 40 countries spread over 6 continents. This is the screenshot of the mobile version when we start working on the project Its first explanation was developed with Django 1.6 and it runs on Python 2.7 The data are stored in Postgres 9.3 and there was only one location field in the database Unfortunately, it’s collected as a text arena. Leaflet JS 1.0 was used to show a static data and wiewonly map There is no user interaction at all That one is the screenshot of the mobile version after the introduction of the interactive map.It was developed with Django 2.1, GeoDjango and Python 3.6 The data is stored in Postgres 10 and the spatial data is stored in geographic domains Thanks to PostGIS 2.4 Leaflet JS 1.4 was used to allow user to expose and treated with dynamic delineate. This is some code from our assignment. This is only an extract of two sits from our projection We have imported 2 fields from GeoDjango In the City model we expended a multi polygon province to store the borders data. In the Ad model, we invoked the City with a foreign key and added a place arena to place our locating. The real prototypes has other environments but is not necessary to show there for our aims. We appreciate before a basic approach but in our assignment we needed a more complex approach to serve spatial data because we have a lot of places and a great deal of coastal assets We decided to build a RESTful API with Django REST framework.As addons we expended Django REST framework GIS for geographical support and Django filter for filtering funding. After the station, we needed to add them to the installed apps in naming. The first step to build our API is to write a serializer. We inherited it from Geo Feature Model Serializer, it’s imported from Django Rest framework GIS. In order to define our serializer we had to specify the representation, The geo field in our example and the additional subjects we want to add in the final GeoJSON result.Now we need to write the attitude. We imported the readonly model viewset for Django REST framework And too the serializer we wrote before Our viewset inherit from the first one and in the queryset we filtered all the ads with a site The boundbox filter and the filter backend allow us to filter the API utilizing a bound chest. But what’s a box? In this case the tie chest is the map area The fixed container is an area defined by two freedoms and longitudes and it permits you to do more applications when you move your map because you are changing the latitude and longitude. Okay now the last step After the viewset definition we imported the default Django REST framework router to register our markers road. As I said before, we will get data from the API in the route every time we will we will move our delineate and Leaflet are sending us the brand-new oblige carton defined by you, is moving forward the map.At the end of the step, announcing our API You will receive our GeoJSON data This is a very small extract of a GeoJSON with one point You can see only its coordinates, its ID and no added qualities but in the real project you can see a lot of them and you can add too a great deal of properties to customize your popup in your delineate After the coding place I’d like to show you a screencast of the interactions with the planned because the brand-new edition of the website is not deployed yet Let’s see if it acts Okay, it started As you can see we have a roll of belongings We have knots in the left, on the planned and they are connected because they foreground when you move your cursor over it At the same time you can filter all your belongings and you can filter expend different things, like the different types like the interval from the coast as you can see the knot are updating, too the numeral in the top of the list are updating and the list itself Everything is done with Leaflet that are calling our API The list is still connected with our maps and you can reset all the filters and you can hide it to use another approach You can use our autocomplete input, that start after the third people you add to it and you can change your locating on the delineate We’ve went in Sardinia as “youre seeing” the schedule is updated and also this is the custom popup You can also move your planned or zooming out and you start seeing all the cluster demo up Now I want to show you again this photo It establish a normal be built upon the Abruzzo coast and its reputation is Trabocco.I choose this photo because starting from photo like that, I developed my interest in web mapping and too because in our Use case projection our abuse occurrence job was about coastal assets But now let’s summarize what I’ve picture you It’s possible to have an outofthebox web map with GeoDjango, PostGIS and Lefalet JS. It’s possible to execute spatial inquiries and relational queries at the same time. as we saw in the in the screencast Your stack will be composed by Django and Postgre simply Thanks to this solution we are able to implement too advanced features like backend clusterization Administrative levels and dynamic spatial entity. I want to share with you all the resources that I used to prepare this talk and to develop the web map. Whenever possible we denoted the official documentation and with the records of all cartons: GeoDjango, PostGIS and Leaflet. and we likewise referred to the code repository itself.Now some admissions I would like to thank Mer et Demeures for trusting us to refactor and improve their website. I would like to thank 20 tab for giving me the opportunity to be with you all. By the course, they are looking for a Django developer. So you can apply applying their email address. At the end You can use this QR code to visit the talk slouse of my website You can find there the slips, either already uploaded you can find the code sample and all the resources URLs I ask you to add some comments or questions about this topic or about the talk itself. Both the moves and the content on my website are secreted under Creative Commons License so you can use it and share with everyone.Thank you, you can contact me on my website or on my Twitter account. Thank you so much we have two minutes for questions that could be about … Submit questions online at #djangoconqa and I are see you on the IRC at #djangocon We can do there we go got one question Thanks for your talk. I just wanted to know entering data are you exercising exclusively Django admin or did you write your own editor based on Leflet JS, because the Django admin doesn’t use internally Lefalet JS Our customer have a lot of generators for the data.So they have a lot of importation of masteries that they used to take the data from other customers. I indicate you simply the admin slouse because it’s easy to fix some points. A quantity of experience customer send misplaced object and then the motorist have to go there and fix it with the very precise item but you can import your data in many ways. It’s only a normal realm so you can import it like JSON, CSV, everything. Thank you so much better ..
