Tweet
Tweet

Slide 1

Slide 1 text

MAPS WITH DJANGO PAOLO MELCHIORRE ~ @pauloxnet

Slide 2

Slide 2 text

Paolo Melchiorre ~ @pauloxnet 2

Slide 3

Slide 3 text

Paolo Melchiorre ~ @pauloxnet @pauloxnet • CTO at 20tab • Software engineer • Python developer • Django contributor • Hiking enthusiast Paolo Melchiorre 3

Slide 4

Slide 4 text

Paolo Melchiorre ~ @pauloxnet 1.883 m 0 km 27 km 0 km 4

Slide 5

Slide 5 text

Paolo Melchiorre ~ @pauloxnet 5 Web mapping “… process of using the maps delivered by Geographic Information Systems (GIS) on the Internet …” — “Web mapping”, Wikipedia

Slide 6

Slide 6 text

Paolo Melchiorre ~ @pauloxnet • Static or Dynamic • Interactive or view only • Raster or Vector tiles • Spatial databases • Javascript library Web maps features 6

Slide 7

Slide 7 text

Paolo Melchiorre ~ @pauloxnet django 7

Slide 8

Slide 8 text

Paolo Melchiorre ~ @pauloxnet 8 Requirements $ python3 --version Python 3.10.0 $ python3 -m venv ~/.mymap $ source ~/.mymap/bin/activate $ python3 -m pip install django~=3.2

Slide 9

Slide 9 text

Paolo Melchiorre ~ @pauloxnet 9 Creating the ‘mymap’ project $ cd ~/projects $ python3 -m django startproject mymap mymap/ ├── manage.py └── mymap/ ├── asgi.py ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

Slide 10

Slide 10 text

Paolo Melchiorre ~ @pauloxnet 10 Creating the ‘markers’ app $ cd mymap $ python3 -m django startapp markers markers/ ├── admin.py ├── apps.py ├── __init__.py ├── migrations/ │ └── __init__.py ├── models.py ├── tests.py └── views.py

Slide 11

Slide 11 text

Paolo Melchiorre ~ @pauloxnet 11 Activating the ‘markers’ app # mymap/settings.py INSTALLED_APPS = [ "django.contrib.admin", "django.contrib.auth", "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", "django.contrib.staticfiles", "markers", ]

Slide 12

Slide 12 text

Paolo Melchiorre ~ @pauloxnet 12 Adding a template view # markers/views.py from django.views.generic import TemplateView class MarkersMapView(TemplateView): template_name = "map.html"

Slide 13

Slide 13 text

Paolo Melchiorre ~ @pauloxnet 13 Adding the ‘map’ template Markers Map

Slide 14

Slide 14 text

Paolo Melchiorre ~ @pauloxnet 14 Adding ‘markers’ urls # markers/urls.py from django.urls import path from markers.views import MarkersMapView app_name = "markers" urlpatterns = [ path("map/", MarkersMapView.as_view()), ]

Slide 15

Slide 15 text

Paolo Melchiorre ~ @pauloxnet 15 Updating ‘mymap’ urls # mymap/urls.py from django.contrib import admin from django.urls import include, path urlpatterns = [ path("admin/", admin.site.urls), path("markers/", include("markers.urls")), ]

Slide 16

Slide 16 text

Paolo Melchiorre ~ @pauloxnet 2.068 m 0 km 27 km 2 km 16

Slide 17

Slide 17 text

Paolo Melchiorre ~ @pauloxnet • JavaScript library for maps • Free Software • Desktop & Mobile friendly • Light (~39 KB of gzipped JS) • Well documented Leaflet 17

Slide 18

Slide 18 text

Paolo Melchiorre ~ @pauloxnet 18 Updating the ‘map’ template {% load static %} Markers Map

Slide 19

Slide 19 text

Paolo Melchiorre ~ @pauloxnet 19 Adding the ‘map’ CSS /* markers/static/map.css */ html, body { height: 100%; margin: 0; } #map { height: 100%; width: 100%; }

Slide 20

Slide 20 text

Paolo Melchiorre ~ @pauloxnet 20 Adding the ‘map’ JavaScript // markers/static/map.js const copy = "© OpenStreetMap contributors"; const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const osm = L.tileLayer(url, { attribution: copy }); const map = L.map("map", { layers: [osm] }); map.fitWorld();

Slide 21

Slide 21 text

Paolo Melchiorre ~ @pauloxnet 21 Show the empty web map $ python3 manage.py runserver $ python3 -m webbrowser -t \ http://localhost:8000/markers/map/

Slide 22

Slide 22 text

Paolo Melchiorre ~ @pauloxnet 22

Slide 23

Slide 23 text

Paolo Melchiorre ~ @pauloxnet 2.117 m 0 km 27 km 6 km 23

Slide 24

Slide 24 text

Paolo Melchiorre ~ @pauloxnet 24 GeoDjango django.contrib.gis (v1.0 ~2008) Fields, backends, queries, admin, … Spatialite backend (v1.1 ~2009) Multiple backends (v1.2 ~2010) OpenLayers-based widgets (v1.6 ~2013) GeoJSON serializer (v1.8 ~2015) GeoIP2 Geolocation (v1.9 ~2016)

Slide 25

Slide 25 text

Paolo Melchiorre ~ @pauloxnet • OSGeo library • Free Software • Read/Write geospatial data • Raster/Vector formats • Command line interface GDAL 25

Slide 26

Slide 26 text

Paolo Melchiorre ~ @pauloxnet 26 Installing GDAL # apt-get install gdal-bin

Slide 27

Slide 27 text

Paolo Melchiorre ~ @pauloxnet 27 Activating GeoDjango # mymap/settings.py INSTALLED_APPS = [ "django.contrib.admin", "django.contrib.auth", "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", "django.contrib.staticfiles", "django.contrib.gis", "markers", ]

Slide 28

Slide 28 text

Paolo Melchiorre ~ @pauloxnet 28 GeoDjango Compatibility Table ● Spatial Lookups (18/31) ● Database functions (15/32) ● Aggregate Functions (0/5) MariaDB 49% ● Spatial Lookups (18/31) ● Database functions (21/32) ● Aggregate Functions (2/5) Oracle 60% ● Spatial Lookups (31/31) ● Database functions (32/32) ● Aggregate Functions (5/5) PostGIS 100% ● Spatial Lookups (22/31) ● Database functions (30/32) ● Aggregate Functions (4/5) Spatialite 82% ● Spatial Lookups (18/31) ● Database functions (16/32) ● Aggregate Functions (0/5) MySQL 50%

Slide 29

Slide 29 text

Paolo Melchiorre ~ @pauloxnet • PostgreSQL extension • Best* GeoDjango backend • Spatial data types • Spatial indexing • Spatial functions PostGIS 29

Slide 30

Slide 30 text

Paolo Melchiorre ~ @pauloxnet 30 Installing PostgreSQL C client library # apt-get install libpq-dev

Slide 31

Slide 31 text

Paolo Melchiorre ~ @pauloxnet 31 Activating PostGIS # mymap/settings.py DATABASES = { "default": { "ENGINE": "django.contrib.gis.db.backends.postgis", "HOST": "database", "NAME": "mymap", "PASSWORD": "password", "PORT": 5432, "USER": "postgres", } }

Slide 32

Slide 32 text

Paolo Melchiorre ~ @pauloxnet 32 Adding the Marker model # markers/models.py from django.contrib.gis.db import models class Marker(models.Model): name = models.CharField(max_length=255) location = models.PointField() def __str__(self): return self.name

Slide 33

Slide 33 text

Paolo Melchiorre ~ @pauloxnet 33 Adding the Marker admin # markers/admin.py from django.contrib.gis import admin from markers.models import Marker @admin.register(Marker) class MarkerAdmin(admin.OSMGeoAdmin): list_display = ("name", "location")

Slide 34

Slide 34 text

Paolo Melchiorre ~ @pauloxnet 34 Adding some markers $ python3 manage.py makemigrations $ python3 manage.py migrate $ python3 manage.py createsuperuser $ python3 manage.py runserver $ python3 -m webbrowser -t \ http://localhost:8000/admin/markers/marker/add/

Slide 35

Slide 35 text

Paolo Melchiorre ~ @pauloxnet 35

Slide 36

Slide 36 text

Paolo Melchiorre ~ @pauloxnet 36 Updating the view # markers/views.py import json from django.core.serializers import serialize from django.views.generic import TemplateView from markers.models import Marker class MarkersMapView(TemplateView): template_name = "map.html" def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) markers = Marker.objects.all() context["markers"] = json.loads(serialize("geojson", markers)) return context

Slide 37

Slide 37 text

Paolo Melchiorre ~ @pauloxnet 37 Inserting markers in the template {% load static %} Markers Map {{ markers|json_script:"markers-data" }}

Slide 38

Slide 38 text

Paolo Melchiorre ~ @pauloxnet 38 Generated GeoJSON { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "EPSG:4326" } }, "features": [ { "type": "Feature", "properties": { "name": "Monte Amaro 2793m", "pk": "1" }, "geometry": { "type": "Point", "coordinates": [14.08591836494682, 42.08632592463349] } } ] }

Slide 39

Slide 39 text

Paolo Melchiorre ~ @pauloxnet 39 Rendering all markers in the map // markers/static/map.js const copy = "© OpenStreetMap contributors"; const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const osm = L.tileLayer(url, { attribution: copy }); const map = L.map("map", { layers: [osm], minZoom: 5 }); const markers = JSON.parse(document.getElementById("markers-data").textContent); const features = L.geoJSON(markers).bindPopup(layer => layer.feature.properties.name); map.addLayer(features).fitBounds(features.getBounds());

Slide 40

Slide 40 text

Paolo Melchiorre ~ @pauloxnet 40 Show the populated web map $ python3 manage.py runserver $ python3 -m webbrowser -t \ http://localhost:8000/markers/map/

Slide 41

Slide 41 text

Paolo Melchiorre ~ @pauloxnet 41

Slide 42

Slide 42 text

Paolo Melchiorre ~ @pauloxnet 2.450 m 0 km 27 km 7 km 42

Slide 43

Slide 43 text

Paolo Melchiorre ~ @pauloxnet 43 Requirements # requirements.txt django~=3.2.0 django-filter~=21.1 djangorestframework~=3.12.0 djangorestframework-gis~=0.17 psycopg2~=2.9.0

Slide 44

Slide 44 text

Paolo Melchiorre ~ @pauloxnet 44 Installing requirements $ python3 -m pip install -r requirements.txt

Slide 45

Slide 45 text

Paolo Melchiorre ~ @pauloxnet 45 Activating Django REST Framework # mymap/settings.py INSTALLED_APPS = [ "django.contrib.admin", "django.contrib.auth", "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", "django.contrib.staticfiles", "django.contrib.gis", "rest_framework", "rest_framework_gis", "markers", ]

Slide 46

Slide 46 text

Paolo Melchiorre ~ @pauloxnet 46 Adding the Marker serializer # markers/serializers.py from rest_framework_gis import serializers from markers.models import Marker class MarkerSerializer(serializers.GeoFeatureModelSerializer): class Meta: fields = ("id", "name") geo_field = "location" model = Marker

Slide 47

Slide 47 text

Paolo Melchiorre ~ @pauloxnet 47 Adding the Marker viewset # markers/viewsets.py from rest_framework import viewsets from rest_framework_gis import filters from markers.models import Marker from markers.serializers import MarkerSerializer class MarkerViewSet(viewsets.ReadOnlyModelViewSet): bbox_filter_field = "location" filter_backends = (filters.InBBoxFilter,) queryset = Marker.objects.all() serializer_class = MarkerSerializer

Slide 48

Slide 48 text

Paolo Melchiorre ~ @pauloxnet 48 Adding ‘markers’ API # markers/api.py from rest_framework import routers from markers.viewsets import MarkerViewSet router = routers.DefaultRouter() router.register(r"markers", MarkerViewSet) urlpatterns = router.urls

Slide 49

Slide 49 text

Paolo Melchiorre ~ @pauloxnet 49 Updating ‘mymap’ urls # mymap/urls.py from django.contrib import admin from django.urls import include, path urlpatterns = [ path("admin/", admin.site.urls), path("api/", include("markers.api")), path("markers/", include("markers.urls")), ]

Slide 50

Slide 50 text

Paolo Melchiorre ~ @pauloxnet 50 Trying to locate the user // markers/static/map.js const copy = "© OpenStreetMap contributors"; const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; const osm = L.tileLayer(url, { attribution: copy }); const map = L.map("map", { layers: [osm], minZoom: 5 }); map .locate() .on("locationfound", (e) => map.setView(e.latlng, 8)) .on("locationerror", () => map.setView([0, 0], 5)); // … more …

Slide 51

Slide 51 text

Paolo Melchiorre ~ @pauloxnet 51 Rendering markers incrementally // markers/static/map.js async function load_markers() { const markers_url = `/api/markers/?in_bbox=${map.getBounds().toBBoxString()}`; const response = await fetch(markers_url); const geojson = await response.json(); return geojson; } async function render_markers() { const markers = await load_markers(); L.geoJSON(markers) .bindPopup((layer) => layer.feature.properties.name) .addTo(map); } map.on('moveend', render_markers)

Slide 52

Slide 52 text

Paolo Melchiorre ~ @pauloxnet 52 Show the final web map $ python3 manage.py runserver $ python3 -m webbrowser -t \ http://localhost:8000/markers/map/

Slide 53

Slide 53 text

Paolo Melchiorre ~ @pauloxnet 53

Slide 54

Slide 54 text

Paolo Melchiorre ~ @pauloxnet 2.793 m 0 km 27 km 14 km 54

Slide 55

Slide 55 text

Paolo Melchiorre ~ @pauloxnet 55

Slide 56

Slide 56 text

Paolo Melchiorre ~ @pauloxnet 56 What’s next • Markers customization • Relational filtering • Clustering frontend/backend • Geocoding services • …

Slide 57

Slide 57 text

Paolo Melchiorre ~ @pauloxnet 57 Tips • docs in djangoproject.com • details in postgis.net • source code in github.com • questions in gis.stackexchange.com

Slide 58

Slide 58 text

Paolo Melchiorre ~ @pauloxnet 58 License CC BY-SA 4.0 This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Slide 59

Slide 59 text

Paolo Melchiorre ~ @pauloxnet @20tab 20tab 20tab info@20tab.com 20tab.com 59

Slide 60

Slide 60 text

Paolo Melchiorre ~ @pauloxnet @pauloxnet paolomelchiorre pauloxnet paolo@melchiorre.org paulox.net 60