Use Case: Maps 🗺 with GeoDjango 🌎 PostGIS 🐘 and Leaflet 🍃

Transcript

1. Maps with GeoDjango PostGIS and Leaflet Paolo Melchiorre & Carmelo

   Catalfamo Rome - January 21, 2019 Use Case

2. Paolo Melchiorre 2 • Computer Science Engineer • Python Developer

   ~ 2006 • Django Developer ~ 2011 • Senior Developer @ 20Tab • PostgreSQL user (not DBA) • Remote Worker

3. Carmelo Catalfamo 3 • JavaScript Developer • NodeJS developer ~

   2014 • ReactJS developer ~ 2015 • React Native developer • Frontend developer @ 20tab • Django user

4. Goal 4 • GeoDjango • PostGIS • Leaflet • Use

   Case • Demo • Conclusion

5. Web mapping 5 • Map delivered by GIS • Static

   and Dynamic • Interactive and view only • Raster or Vector tiles • Spatial databases • Javascript library

6. GeoDjango 6 • Geographic framework • Spatial Field Types •

   Spatial ORM queries • GIS geometry interfaces • Admin geometry fields • Many database backends

7. PostGIS 7 • Best GeoDjango backend • PostgreSQL extension •

   Integrated spatial data • Spatial data types • Spatial indexing • Spatial functions

8. Leaflet 8 • JavaScript library for maps • Open Source

   • Desktop & Mobile friendly • Light (~38 KB) • Well documented • Simple, preforming, usable

9. Mer et Demeures 1.0 9 • Python 2.7 • Django

   1.6 • PostgreSQL 9.3 • Textual Spatial Fields • Leaflet 1.0 • Static/View-only map

10. Mer et Demeures 2.0 10 • Python 3.6 • Django

    2.1 / GeoDjango • PostgreSQL 10 • PostGIS 2.4 / Spatial data • Leaflet 1.4 • Dynamic/Interactive map

11. Demo 11 demo.meretdemeures.com

12. Models 12 from django.contrib.gis.db.models import ( MultiPolygonField, PointField) class City(models.Model):

    # … border = MultiPolygonField() class Ad(models.Model): # … location = PointField()

13. Migrations 13 from django.contrib import postgres from django.db import migrations

    class Migration(migrations.Migration): dependencies = [('geo', '0001_initial')] operations = [ postgres.operations.CreateExtension( 'postgis' ) ]

14. Managers 14 from django.contrib.gis.geos import Polygon from django.db import models

    class AdQuerySet(models.QuerySet): def filter_by_bbox(self, bbox): bound_box = Polygon.from_bbox(bbox) return self.filter( location__contained=bound_box )

15. REST API 15 from rest_framework import viewsets from rest_framework_gis import

    filters class AdViewSet(viewsets.ModelViewSet): # … bbox_filter_field = 'location' filter_backends = [ filters.InBBoxFilter]

16. Admin 16 from django.contrib import gis class AdAdmin(gis.admin.OSMGeoAdmin): # …

    default_lon = 0 default_lat = 0 default_zoom = 4 map_width = 600 map_height = 400 modifiable = True

17. Ajax/Leaflet JS 17 var map = L.map('map').setView( [lat, lng], zoom

    ) var tiles = 'https://www.myTiles...' L.tileLayer(tiles).addTo(map) L.marker([51.5, -0.09]).addTo(map)

18. <Container> <Loading visible={loading} /> <Map center={center} zoom={zoom} onMoveend={_ => handleMoveend()}>

    <Marker coords={[51.5, -0.09]} /> </Map> </Container> React Leaflet JS 18

19. Conclusion 19 • Out-of-the-box features • Spatial & Relational query

    • Django/PostgreSQL only • Backend clusterization • Administrative levels • Dynamic spatial entity

20. Acknowledgments 20 Mer et Demeures meretdemeures.com 20tab www.20tab.com

21. Resources 21 • postgis.net/docs/manual-2.4 • docs.djangoproject.com/en/2.1/ref/contrib/gis • leafletjs.com/reference-1.4.0.html • github.com/django/django

    • github.com/postgis/postgis • github.com/leaflet/leaflet

22. Thank you 22 License (CC BY-SA) creativecommons.org/licenses/by-sa/4.0/ Slide speakerdeck.com/pauloxnet

23. Questions 23 gis.stackexchange.com

24. Contacts Paolo Melchiorre @pauloxnet www.paulox.net Carmelo Catalfamo @mratomicbomb_ www.carmelocatalfamo.it