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