team up django and web mapping - djangocon europe 2014
DESCRIPTION
● Web mapping should be simple ● Google Maps should become unusual ● Demystify cartography !TRANSCRIPT
Main goals...
● Web mapping should be simple● Google Maps should become unusual● Demystify cartography !
Main focus...
● Fundamentals of cartography (projections, PostGIS)● Web mapping (GeoJSON, Leaflet)● Django toolbox (a.k.a. GeoDjango)
Fundamentals of cartography
Coordinates : position on Earth
● Longitude (x) – Latitude (y)● Decimal degrees (-180 +180, -90 +90)→ →● GPS
Geodesy : shape of the Earth
Ellipsoid (GPS, WGS 84)
Illustration: http://mapschool.io
Projections
● Equations (lat/lng pixels)↔● Representation on a plane ( compromises)→● Spatial reference transformation
Illustration: http://mapschool.io
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)
Vector data
● Point (x, y, z)● Line (ordered list of points)● Polygon (enveloppe + holes)
Illustration: http://mapschool.io
Raster data
● ~ Images● Map backgrounds (satellite, plan, …)● Atimetry data (DEM)
Illustration: http://mapschool.io
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;
Examples (1/2)
CREATE TABLE island (
label VARCHAR(128),code INTEGER,
geom geometry(Polygon, 4326))
Examples (1/2)
CREATE TABLE island (
label VARCHAR(128),code INTEGER,
geom geometry(Polygon, 4326))
Usual table
UsualcolumnsVector
geometrycolumn
Geometry type SpatialReference
Examples (2/2)
SELECT room.idFROM room, islandWHERE 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
Web mapping
Web map anatomy... ● JavaScript + DOM● Initialization of a <div>● « Layers »
Web map anatomy... ● JavaScript + DOM● Initialization of a <div>● « Layers »
● <img> (Backgrounds)● Vector SVG→● Lat/Long pixels → (CSS)● DOM Events (interactions)
Leaflet example
<script src="leaflet.js"></script><link rel="stylesheet" href="leaflet.css" />
<div id="simplemap"></div>
<script> 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);</script>
http://leafletjs.com
See also... D3● SVG● Cool dataviz● Exotic map projections
OpenLayers 3● Canvas● GIS-oriented (advanced use-cases)
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)
Formats (2/2)
● GeoJSON for vector data● Projection 4326 (GPS, WGS84)
● Interactive ?● Volume ? ● Frequency ?
→ Dynamic (from database)
SELECT ST_AsGeoJSON(geom)FROM ...
Nothing new...Web Server Browser
P o s t G I S D j a n g o
R e n d e r i n gE n g i n e
V e c t o r o v e r l a y
R a s t e ro v e r l a y
R a s t e rb a c k g r o u n d
I m a g e s
z/x/y.png
GeoJSON
z/x/y.png, UTFGrid, ...
GeoDjango
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)
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()
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)
● 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)))
django-leaflet
●Quick-start kit {% leafletmap "djangocon" %}●Assets (collecstatic)●Easy plugins integration●Global configuration (settings.py, plugins, ...)●Leaflet projections machinery (reprojection)
django-leaflet (view) {% load leaflet_tags %} ... {% leaflet_js %} {% leaflet_css %}</head><body>
{% leafletmap "buildingmaps" callback="initMap" %}
<script type="text/javascript">
function initMap(map) {
// Ajax Load $.getJSON("{% url app:layer %}", function (data) {
// Add GeoJSON to the map L.geoJSON(data).addTo(map); }); }
GeoJSONview
LAYER
django-leaflet (edit)
Forms●Fields (Django 1.6+ API)●Widgets (hidden <textarea> + Leaflet.draw)class BuildingForm(forms.ModelForm):
class Meta:model = Buildingwidgets = {'geom': LeafletWidget()}
fields = ('code', 'geom')
●Leaflet AdminSiteadmin.site.register(Building, LeafletGeoAdmin)
SCREENSHOT FORM
Conclusion
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.
… 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.
Makina Corpus - Free Software | Cartography | Mobile
Questions ?...and answers !
PostGIS - Leaflet – JavaScript
http://makina-corpus.com