Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Team up Django and Web mapping - DjangoCon Euro...
Search
Makina Corpus
May 20, 2014
Technology
3
820
Team up Django and Web mapping - DjangoCon Europe 2014
● Web mapping should be simple
● Google Maps should become unusual
● Demystify cartography !
Makina Corpus
May 20, 2014
Tweet
Share
More Decks by Makina Corpus
See All by Makina Corpus
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
makinacorpus
0
690
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
makinacorpus
0
110
Petit déjeuner "Les bases de la cartographie sur le Web"
makinacorpus
0
410
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir de rien" le 11 février - Toulouse
makinacorpus
0
260
CoDe, le programme de développement d'applications mobiles de Makina Corpus
makinacorpus
0
93
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
640
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
370
Tests carto avec Mocha
makinacorpus
0
800
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
君は隠しイベントを見つけれるか?
mujyun
0
290
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
692
190k
Building an army of robots
kneath
302
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
We Have a Design System, Now What?
morganepeng
50
7.2k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Writing Fast Ruby
sferik
626
61k
BBQ
matthewcrist
85
9.3k
Music & Morning Musume
bryan
46
6.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Adopting Sorbet at Scale
ufuk
73
9k
GitHub's CSS Performance
jonrohan
1030
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Transcript
Team up Django and Web mapping DjangoCon Europe 2014 Mathieu
Leplatre @leplatrem www.makina-corpus.com
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 Usual columns Vector geometry column Geometry type Spatial Reference
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
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
None
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 PostGIS Django Rendering Engine Vector
overlay Raster overlay Raster background Images 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); }); } GeoJSON view
LAYER
django-leaflet (edit) Forms • Fields (Django 1.6+ API) • Widgets
(hidden <textarea> + Leaflet.draw) class BuildingForm(forms.ModelForm): class Meta: model = Building widgets = {'geom': LeafletWidget()} fields = ('code', 'geom') • Leaflet AdminSite admin.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