Upcoming SlideShare
×

# Team up Django and Web mapping - DjangoCon Europe 2014

2,395 views

Published on

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

Published in: Technology, Art & Photos
7 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
Your message goes here
• Be the first to comment

Views
Total views
2,395
On SlideShare
0
From Embeds
0
Number of Embeds
91
Actions
Shares
0
34
0
Likes
7
Embeds 0
No embeds

No notes for slide

### Team up Django and Web mapping - DjangoCon Europe 2014

1. 1. TeamupDjangoand Webmapping DjangoConEurope2014 MathieuLeplatre @leplatrem www.makina-corpus.com
2. 2. Maingoals... ● Webmappingshouldbesimple ● GoogleMapsshouldbecomeunusual ● Demystifycartography!
3. 3. Mainfocus... ● Fundamentalsofcartography(projections,PostGIS) ● Webmapping(GeoJSON,Leaflet) ● Djangotoolbox(a.k.a.GeoDjango)
4. 4. Fundamentalsofcartography
5. 5. Coordinates :positiononEarth ● Longitude(x) – Latitude (y) ● Decimaldegrees(-180 +180, -90 +90)→ → ● GPS
6. 6. Geodesy :shapeoftheEarth Ellipsoid (GPS,WGS84) Illustration:http://mapschool.io
7. 7. Projections ● Equations (lat/lng pixels)↔ ● Representationonaplane ( compromises)→ ● Spatialreferencetransformation Illustration:http://mapschool.io
8. 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. 9. Vectordata ● Point(x,y,z) ● Line(orderedlistofpoints) ● Polygon(enveloppe+holes) Illustration:http://mapschool.io
10. 10. Rasterdata ● ~Images ● Mapbackgrounds(satellite,plan,…) ● Atimetrydata(DEM) Illustration:http://mapschool.io
11. 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. 12. Examples (1/2) CREATE TABLE island ( label VARCHAR(128), code INTEGER, geom geometry(Polygon, 4326) )
13. 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. 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. 15. Webmapping
16. 16. Webmapanatomy... ● JavaScript+DOM ● Initializationofa<div> ● « Layers »
17. 17. Webmapanatomy... ● JavaScript+DOM ● Initializationofa<div> ● « Layers » ● <img> (Backgrounds) ● Vector SVG→ ● Lat/Long pixels→ (CSS) ● DOMEvents (interactions)
18. 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
19. 19. Seealso... D3 ● SVG ● Cooldataviz ● Exoticmapprojections OpenLayers3 ● Canvas ● GIS-oriented(advanceduse-cases)
20. 20. Formats(1/2) ● Rasterimages(PNGouJPG) ● z/x/y.png ● Projection3857(Mercator,GoogleMaps) →Colddata (tileprovider) …→ orwarm (renderingengine)
21. 21. Formats(2/2) ● GeoJSONforvectordata ● Projection4326(GPS,WGS84) ● Interactive ? ● Volume ? ● Frequency ? →Dynamic (fromdatabase) SELECT ST_AsGeoJSON(geom) FROM ...
22. 22. Nothingnew... WebServer Browser PostGIS Django Rendering Engine Vector overlay Raster overlay Raster background Images z/x/y.png GeoJSON z/x/y.png, UTFGrid, ...
23. 23. GeoDjango
24. 24. DjangoEcosystemforCartography fromdjango.contrib.gisimport... ● Modelsfields(syncdb) ● GeoQuerySet(spatialqueries) ● Formfields(Django1.6) ● Systemlibrariesdeps(GEOS,GDAL) ● Widgets&AdminSite(OpenLayers2)
25. 25. 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()
26. 26. 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)
27. 27. ● 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)) )
28. 28. django-leaflet ● Quick-startkit {% leafletmap "djangocon" %} ● Assets(collecstatic) ● Easypluginsintegration ● Globalconfiguration (settings.py,plugins,...) ● Leafletprojectionsmachinery (reprojection)
29. 29. 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
30. 30. LAYER
31. 31. 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)
32. 32. SCREENSHOTFORM
33. 33. Conclusion
34. 34. AnyonecandoWebmapping... Cartographyissimple. ● Justsomespecialdatatypes ● FollowsDjangoconventions ● Fewlinesofcode Illustration:ChefGusteau,PixarInc.
35. 35. …withappropriatetoolsandstrategies! Cartographyishard. ● Performance(Web) ● Volume(precision) ● Datarefreshrate(caching) ● Userstoriestoofarfromdata (modeling) Illustration:AntonEgo,PixarInc.
36. 36. MakinaCorpus -FreeSoftware|Cartography|Mobile Questions ? ...andanswers ! PostGIS -Leaflet–JavaScript http://makina-corpus.com