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
840
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
700
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
makinacorpus
0
120
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
100
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes - Sylvain Beorchia
makinacorpus
0
650
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
makinacorpus
1
380
Tests carto avec Mocha
makinacorpus
0
800
Alternatives libres à Google Maps
makinacorpus
2
3k
Other Decks in Technology
See All in Technology
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
事業継続を支える自動テストの考え方
tsuemura
0
300
プロセス改善による品質向上事例
tomasagi
1
1.6k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Six Lessons from altMBA
skipperchong
27
3.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Thoughts on Productivity
jonyablonski
69
4.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
A better future with KSS
kneath
238
17k
YesSQL, Process and Tooling at Scale
rocio
171
14k
A designer walks into a library…
pauljervisheath
205
24k
KATA
mclloyd
29
14k
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