Slide 1

Slide 1 text

Team up Django and Web mapping DjangoCon Europe 2014 Mathieu Leplatre @leplatrem www.makina-corpus.com

Slide 2

Slide 2 text

Main goals... ● Web mapping should be simple ● Google Maps should become unusual ● Demystify cartography !

Slide 3

Slide 3 text

Main focus... ● Fundamentals of cartography (projections, PostGIS) ● Web mapping (GeoJSON, Leaflet) ● Django toolbox (a.k.a. GeoDjango)

Slide 4

Slide 4 text

Fundamentals of cartography

Slide 5

Slide 5 text

Coordinates : position on Earth ● Longitude (x) – Latitude (y) ● Decimal degrees (-180 +180, -90 +90) → → ● GPS

Slide 6

Slide 6 text

Geodesy : shape of the Earth Ellipsoid (GPS, WGS 84) Illustration: http://mapschool.io

Slide 7

Slide 7 text

Projections ● Equations (lat/lng pixels) ↔ ● Representation on a plane ( compromises) → ● Spatial reference transformation Illustration: http://mapschool.io

Slide 8

Slide 8 text

Spatial References ● Coordinate system (cartesian) ● Units (degrees, meters) ● Main axis (equator, Greenwich) ● Ellipsoid, geoid (WGS 84) ● Conical, cylindrical, conformal, ... ● … Store WGS 84 → (GPS, srid=4326) Display →Mercator (Google Maps, srid=3857)

Slide 9

Slide 9 text

Vector data ● Point (x, y, z) ● Line (ordered list of points) ● Polygon (enveloppe + holes) Illustration: http://mapschool.io

Slide 10

Slide 10 text

Raster data ● ~ Images ● Map backgrounds (satellite, plan, …) ● Atimetry data (DEM) Illustration: http://mapschool.io

Slide 11

Slide 11 text

A PostGIS database ● Column types (Point, LineString, Polygon, …Raster...) ● Geographic functions (distance, area, extents ...) ● Spatial Indexes (rectangles trees...) $ sudo apt-get install postgis $ psql -d mydatabase > CREATE EXTENSION postgis;

Slide 12

Slide 12 text

Examples (1/2) CREATE TABLE island ( label VARCHAR(128), code INTEGER, geom geometry(Polygon, 4326) )

Slide 13

Slide 13 text

Examples (1/2) CREATE TABLE island ( label VARCHAR(128), code INTEGER, geom geometry(Polygon, 4326) ) Usual table Usual columns Vector geometry column Geometry type Spatial Reference

Slide 14

Slide 14 text

Examples (2/2) SELECT room.id FROM room, island WHERE ST_Intersects(room.geom, island.geom) Spatial join INSERT INTO room (geom) VALUES ( 'SRID=4326;POINT(3.12, 43.1)'::geometry ) EWKT format PostgreSQL cast

Slide 15

Slide 15 text

Web mapping

Slide 16

Slide 16 text

Web map anatomy... ● JavaScript + DOM ● Initialization of a
● « Layers »

Slide 17

Slide 17 text

Web map anatomy... ● JavaScript + DOM ● Initialization of a
● « Layers » ● (Backgrounds) ● Vector SVG → ● Lat/Long pixels → (CSS) ● DOM Events (interactions)

Slide 18

Slide 18 text

Leaflet example
var map = L.map('simplemap') .fitWorld(); L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png') .addTo(map); L.marker([43.07, -5.78]) .addTo(map); http://leafletjs.com

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

See also... D3 ● SVG ● Cool dataviz ● Exotic map projections OpenLayers 3 ● Canvas ● GIS-oriented (advanced use-cases)

Slide 21

Slide 21 text

Formats (1/2) ● Raster images (PNG ou JPG) ● z/x/y.png ● Projection 3857 (Mercator, Google Maps) →Cold data (tile provider) … → or warm (rendering engine)

Slide 22

Slide 22 text

Formats (2/2) ● GeoJSON for vector data ● Projection 4326 (GPS, WGS84) ● Interactive ? ● Volume ? ● Frequency ? →Dynamic (from database) SELECT ST_AsGeoJSON(geom) FROM ...

Slide 23

Slide 23 text

Nothing new... Web Server Browser PostGIS Django Rendering Engine Vector overlay Raster overlay Raster background Images z/x/y.png GeoJSON z/x/y.png, UTFGrid, ...

Slide 24

Slide 24 text

GeoDjango

Slide 25

Slide 25 text

Django Ecosystem for Cartography from django.contrib.gis import ... ● Models fields (syncdb) ● GeoQuerySet (spatial queries) ● Form fields (Django 1.6) ● System libraries deps (GEOS, GDAL) ● Widgets & AdminSite (OpenLayers 2)

Slide 26

Slide 26 text

Examples (1/2) from django.contrib.gis.db import ( models as gismodels ) class Island(gismodels.Model): label = models.CharField(max_length=128), code = models.IntegerField(), geom = gismodels.PolygonField(srid=4326) objects = gismodels.GeoManager()

Slide 27

Slide 27 text

Examples (2/2) from django.contrib.gis.geos import Polygon embiez = Island(label='Embiez', geom=Polygon(((0.34, 0.44), (0.36, 0.42), …))) ~ from django.contrib.gis.geos import fromstr myroom = fromstr('SRID=4326;POINT(3.12, 43.1)') Island.objects.filter(geom__intersects=myroom)

Slide 28

Slide 28 text

● Views (Class-based) ● Generalization & approximation (less details and decimals) ● Serialization (dumpdata, loaddata) ● Model fields (text, no GIS !) ● Vector tiles (huge datasets) django-geojson from djgeojson.views import GeoJSONLayerView urlpatterns = patterns('', url(r'^buildings.geojson$', GeoJSONLayerView.as_view(model=Building)) )

Slide 29

Slide 29 text

django-leaflet ● Quick-start kit {% leafletmap "djangocon" %} ● Assets (collecstatic) ● Easy plugins integration ● Global configuration (settings.py, plugins, ...) ● Leaflet projections machinery (reprojection)

Slide 30

Slide 30 text

django-leaflet (view) {% load leaflet_tags %} ... {% leaflet_js %} {% leaflet_css %} {% leafletmap "buildingmaps" callback="initMap" %} function initMap(map) { // Ajax Load $.getJSON("{% url app:layer %}", function (data) { // Add GeoJSON to the map L.geoJSON(data).addTo(map); }); } GeoJSON view

Slide 31

Slide 31 text

LAYER

Slide 32

Slide 32 text

django-leaflet (edit) Forms ● Fields (Django 1.6+ API) ● Widgets (hidden + Leaflet.draw) class BuildingForm(forms.ModelForm): class Meta: model = Building widgets = {'geom': LeafletWidget()} fields = ('code', 'geom') ● Leaflet AdminSite admin.site.register(Building, LeafletGeoAdmin)

Slide 33

Slide 33 text

SCREENSHOT FORM

Slide 34

Slide 34 text

Conclusion

Slide 35

Slide 35 text

Anyone can do Web mapping... Cartography is simple. ● Just some special data types ● Follows Django conventions ● Few lines of code Illustration: Chef Gusteau, Pixar Inc.

Slide 36

Slide 36 text

… with appropriate tools and strategies ! Cartography is hard. ● Performance (Web) ● Volume (precision) ● Data refresh rate (caching) ● User stories too far from data (modeling) Illustration: Anton Ego, Pixar Inc.

Slide 37

Slide 37 text

Makina Corpus - Free Software | Cartography | Mobile Questions ? ...and answers ! PostGIS - Leaflet – JavaScript http://makina-corpus.com