TeamupDjangoand
Webmapping
DjangoConEurope2014
MathieuLeplatre
@leplatrem
www.makina-corpus.com
Maingoals...
●
Webmappingshouldbesimple
●
GoogleMapsshouldbecomeunusual
●
Demystifycartography!
Mainfocus...
●
Fundamentalsofcartography(projections,PostGIS)
●
Webmapping(GeoJSON,Leaflet)
●
Djangotoolbox(a.k.a.GeoDjang...
Fundamentalsofcartography
Coordinates :positiononEarth
●
Longitude(x) – Latitude (y)
●
Decimaldegrees(-180 +180, -90 +90)→ →
●
GPS
Geodesy :shapeoftheEarth
Ellipsoid (GPS,WGS84)
Illustration:http://mapschool.io
Projections
●
Equations (lat/lng pixels)↔
●
Representationonaplane ( compromises)→
●
Spatialreferencetransformation
Illust...
SpatialReferences
●
Coordinatesystem(cartesian)
●
Units(degrees,meters)
●
Mainaxis(equator,Greenwich)
●
Ellipsoid,geoid (W...
Vectordata
●
Point(x,y,z)
●
Line(orderedlistofpoints)
●
Polygon(enveloppe+holes)
Illustration:http://mapschool.io
Rasterdata
●
~Images
●
Mapbackgrounds(satellite,plan,…)
●
Atimetrydata(DEM)
Illustration:http://mapschool.io
APostGISdatabase
●
Columntypes(Point,LineString,Polygon,…Raster...)
●
Geographicfunctions(distance,area,extents...)
●
Spat...
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
Usual
co...
Examples (2/2)
SELECT room.id
FROM room, island
WHERE ST_Intersects(room.geom,
island.geom)
Spatial join
INSERT INTO room ...
Webmapping
Webmapanatomy...
●
JavaScript+DOM
●
Initializationofa<div>
●
« Layers »
Webmapanatomy...
●
JavaScript+DOM
●
Initializationofa<div>
●
« Layers »
●
<img> (Backgrounds)
●
Vector SVG→
●
Lat/Long pix...
Leafletexample
<script src="leaflet.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<div id="simplemap"></div>
...
Seealso...
D3
●
SVG
●
Cooldataviz
●
Exoticmapprojections
OpenLayers3
●
Canvas
●
GIS-oriented(advanceduse-cases)
Formats(1/2)
●
Rasterimages(PNGouJPG)
●
z/x/y.png
●
Projection3857(Mercator,GoogleMaps)
→Colddata
(tileprovider)
…→ orwarm...
Formats(2/2)
●
GeoJSONforvectordata
●
Projection4326(GPS,WGS84)
●
Interactive ?
●
Volume ?
●
Frequency ?
→Dynamic
(fromdat...
Nothingnew...
WebServer Browser
PostGIS Django
Rendering
Engine
Vector
overlay
Raster
overlay
Raster
background
Images
z/x...
GeoDjango
DjangoEcosystemforCartography
fromdjango.contrib.gisimport...
●
Modelsfields(syncdb)
●
GeoQuerySet(spatialqueries)
●
Formf...
Examples(1/2)
from django.contrib.gis.db import (
models as gismodels
)
class Island(gismodels.Model):
label = models.Char...
Examples(2/2)
from django.contrib.gis.geos import Polygon
embiez = Island(label='Embiez',
geom=Polygon(((0.34, 0.44),
(0.3...
●
Views (Class-based)
●
Generalization&approximation (lessdetailsanddecimals)
●
Serialization (dumpdata, loaddata)
●
Model...
django-leaflet
●
Quick-startkit {% leafletmap "djangocon" %}
●
Assets(collecstatic)
●
Easypluginsintegration
●
Globalconfi...
django-leaflet(view)
{% load leaflet_tags %}
...
{% leaflet_js %}
{% leaflet_css %}
</head>
<body>
{% leafletmap "building...
LAYER
django-leaflet(edit)
Forms
●
Fields(Django1.6+API)
●
Widgets (hidden<textarea>+Leaflet.draw)
class BuildingForm(forms.Mode...
SCREENSHOTFORM
Conclusion
AnyonecandoWebmapping...
Cartographyissimple.
●
Justsomespecialdatatypes
●
FollowsDjangoconventions
●
Fewlinesofcode
Illus...
…withappropriatetoolsandstrategies!
Cartographyishard.
●
Performance(Web)
●
Volume(precision)
●
Datarefreshrate(caching)
●...
MakinaCorpus -FreeSoftware|Cartography|Mobile
Questions ?
...andanswers !
PostGIS -Leaflet–JavaScript
http://makina-corpus...
Team up Django and Web mapping - DjangoCon Europe 2014
Upcoming SlideShare
Loading in...5
×

Team up Django and Web mapping - DjangoCon Europe 2014

989

Published on

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

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
989
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×