Use Case: Maps ๐Ÿ—บ with GeoDjango ๐ŸŒŽ PostGIS ๐Ÿ˜ and Leaflet ๐Ÿƒ

Use Case: Maps ๐Ÿ—บ with GeoDjango ๐ŸŒŽ PostGIS ๐Ÿ˜ and Leafletย ๐Ÿƒ

Slides from my talk presented on 2019-01-21 at #PyRoma meetup in Rome

For more information:
https://www.paulox.net/talks/#pyroma-meetup-2019

6b8e2101579190ad96e747e01c279898?s=128

Paolo Melchiorre

January 21, 2019
Tweet

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