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
870
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
750
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
makinacorpus
0
130
Petit déjeuner "Les bases de la cartographie sur le Web"
makinacorpus
0
420
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir de rien" le 11 février - Toulouse
makinacorpus
0
270
CoDe, le programme de développement d'applications mobiles de Makina Corpus
makinacorpus
0
110
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
670
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
390
Tests carto avec Mocha
makinacorpus
0
810
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
1
200
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
見てわかるテスト駆動開発
recruitengineers
PRO
6
1.8k
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
270
Backboneとしてのtimm2025
yu4u
4
1.7k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
470
JavaScript 研修
recruitengineers
PRO
5
1k
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.5k
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
1
170
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
300
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Faster Mobile Websites
deanohume
309
31k
What's in a price? How to price your products and services
michaelherold
246
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
A better future with KSS
kneath
239
17k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Cult of Friendly URLs
andyhume
79
6.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
We Have a Design System, Now What?
morganepeng
53
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
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