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

1. TeamupDjangoand
Webmapping
DjangoConEurope2014
MathieuLeplatre
@leplatrem
www.makina-corpus.com

2. Maingoals...
●
Webmappingshouldbesimple
●
GoogleMapsshouldbecomeunusual
●
Demystifycartography!

3. Mainfocus...
●
Fundamentalsofcartography(projections,PostGIS)
●
Webmapping(GeoJSON,Leaflet)
●
Djangotoolbox(a.k.a.GeoDjango)

4. Fundamentalsofcartography

5. Coordinates :positiononEarth
●
Longitude(x) – Latitude (y)
●
Decimaldegrees(-180 +180, -90 +90)→ →
●
GPS

6. Geodesy :shapeoftheEarth
Ellipsoid (GPS,WGS84)
Illustration:http://mapschool.io

7. Projections
●
Equations (lat/lng pixels)↔
●
Representationonaplane ( compromises)→
●
Spatialreferencetransformation
Illustration:http://mapschool.io

8. SpatialReferences
●
Coordinatesystem(cartesian)
●
Units(degrees,meters)
●
Mainaxis(equator,Greenwich)
●
Ellipsoid,geoid (WGS84)
●
Conical, cylindrical,conformal,...
●
…
Store WGS84→ (GPS,srid=4326)
Display →Mercator(GoogleMaps,srid=3857)

9. Vectordata
●
Point(x,y,z)
●
Line(orderedlistofpoints)
●
Polygon(enveloppe+holes)
Illustration:http://mapschool.io

10. Rasterdata
●
~Images
●
Mapbackgrounds(satellite,plan,…)
●
Atimetrydata(DEM)
Illustration:http://mapschool.io

11. APostGISdatabase
●
Columntypes(Point,LineString,Polygon,…Raster...)
●
Geographicfunctions(distance,area,extents...)
●
SpatialIndexes(rectanglestrees...)
$ sudo apt-get install postgis
$ psql -d mydatabase
> CREATE EXTENSION postgis;

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

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

14. 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

15. Webmapping

16. Webmapanatomy...
●
JavaScript+DOM
●
Initializationofa<div>
●
« Layers »

17. Webmapanatomy...
●
JavaScript+DOM
●
Initializationofa<div>
●
« Layers »
●
<img> (Backgrounds)
●
Vector SVG→
●
Lat/Long pixels→ (CSS)
●
DOMEvents (interactions)

18. Leafletexample
<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

20. Seealso...
D3
●
SVG
●
Cooldataviz
●
Exoticmapprojections
OpenLayers3
●
Canvas
●
GIS-oriented(advanceduse-cases)

21. Formats(1/2)
●
Rasterimages(PNGouJPG)
●
z/x/y.png
●
Projection3857(Mercator,GoogleMaps)
→Colddata
(tileprovider)
…→ orwarm
(renderingengine)

22. Formats(2/2)
●
GeoJSONforvectordata
●
Projection4326(GPS,WGS84)
●
Interactive ?
●
Volume ?
●
Frequency ?
→Dynamic
(fromdatabase)
SELECT
ST_AsGeoJSON(geom)
FROM ...

23. Nothingnew...
WebServer Browser
PostGIS Django
Rendering
Engine
Vector
overlay
Raster
overlay
Raster
background
Images
z/x/y.png
GeoJSON
z/x/y.png, UTFGrid, ...

24. GeoDjango

25. DjangoEcosystemforCartography
fromdjango.contrib.gisimport...
●
Modelsfields(syncdb)
●
GeoQuerySet(spatialqueries)
●
Formfields(Django1.6)
●
Systemlibrariesdeps(GEOS,GDAL)
●
Widgets&AdminSite(OpenLayers2)

26. 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()

27. 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)

28. ●
Views (Class-based)
●
Generalization&approximation (lessdetailsanddecimals)
●
Serialization (dumpdata, loaddata)
●
Modelfields(text,noGIS!)
●
Vectortiles(hugedatasets)
django-geojson
from djgeojson.views import GeoJSONLayerView
urlpatterns = patterns('',
url(r'^buildings.geojson$',
GeoJSONLayerView.as_view(model=Building))
)

29. django-leaflet
●
Quick-startkit {% leafletmap "djangocon" %}
●
Assets(collecstatic)
●
Easypluginsintegration
●
Globalconfiguration (settings.py,plugins,...)
●
Leafletprojectionsmachinery (reprojection)

30. 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);
});
}
GeoJSON
view

31. LAYER

32. django-leaflet(edit)
Forms
●
Fields(Django1.6+API)
●
Widgets (hidden<textarea>+Leaflet.draw)
class BuildingForm(forms.ModelForm):
class Meta:
model = Building
widgets = {'geom': LeafletWidget()}
fields = ('code', 'geom')
●
LeafletAdminSite
admin.site.register(Building, LeafletGeoAdmin)

33. SCREENSHOTFORM

34. Conclusion

35. AnyonecandoWebmapping...
Cartographyissimple.
●
Justsomespecialdatatypes
●
FollowsDjangoconventions
●
Fewlinesofcode
Illustration:ChefGusteau,PixarInc.

36. …withappropriatetoolsandstrategies!
Cartographyishard.
●
Performance(Web)
●
Volume(precision)
●
Datarefreshrate(caching)
●
Userstoriestoofarfromdata (modeling)
Illustration:AntonEgo,PixarInc.

37. MakinaCorpus -FreeSoftware|Cartography|Mobile
Questions ?
...andanswers !
PostGIS -Leaflet–JavaScript
http://makina-corpus.com