1. GeoDjango e HTML5
Lucio Grenzi
l.grenzi@gmail.com

2. Who am I?
• Delphi developer for 11 years
• Now freelance and Web developer
• Javascript addicted
Nonantolando.blogspot.com
https://plus.google.com/108943068354277861330
http://it.linkedin.com/pub/lucio-grenzi/27/2bb/2a
Lucio Grenzi 2
l.grenzi@gmail.com – Freelance

3. Agenda
• HTML 5 geolocalization: the new parts
• About GeoDjango
• GIS data format troubles
• GeoDjango api's
• GeoDjango and Google Maps /
OpenStreetMaps
Lucio Grenzi 3
l.grenzi@gmail.com – Freelance

4. Once upon a time
Lucio Grenzi 4
l.grenzi@gmail.com – Freelance

5. HTML 5 and Geolocation
• Supported by IE 9,
Firefox, Safari, Chrome
• All the smartphone has a
GPS or a Wifi network
card
• Location based services
Lucio Grenzi 5
l.grenzi@gmail.com – Freelance

6. HTML 5 Geolocation api's (1/3)
Example of requesting a potentially cached position.
// Request a position. We accept positions whose age is not greater than 10 minutes. If the user
// agent does not have a fresh enough cached position object, it will automatically
// acquire a new one.
navigator.geolocation.getCurrentPosition(successCallback,
errorCallback,
{maximumAge:600000});
function successCallback(position) {
// By using the 'maximumAge' option above, the position object is guaranteed to be at most 10
// minutes old.
}
function errorCallback(error) {
// Update a div element with error.message.
}
Lucio Grenzi 6
l.grenzi@gmail.com – Freelance

7. HTML 5 Geolocation api's (2/3)
function getLocationUpdate(){
if(navigator.geolocation){
// timeout 60 seconds
var options = {timeout:60000};
watchID = navigator.geolocation.watchPosition(showLocation,
errorHandler,
options);
}else{
alert("Sorry, browser does not support geolocation!");
}
}
Lucio Grenzi 7
l.grenzi@gmail.com – Freelance

8. HTML 5 Geolocation api's (3/3)
interface Position { interface Coordinates {
readonly attribute Coordinates coords; readonly attribute double latitude;
readonly attribute DOMTimeStamp readonly attribute double longitude;
timestamp; readonly attribute double altitude;
}; readonly attribute double accuracy;
readonly attribute double altitudeAccuracy;
readonly attribute double heading;
readonly attribute double speed;
};
Lucio Grenzi 8
l.grenzi@gmail.com – Freelance

9. GeoDjango
GeoDjango intends to be a
world-class geographic
Web framework.
Its goal is to make it as easy
as possible to build GIS
Web applications and
harness the power of
spatially enabled data.
Lucio Grenzi 9
l.grenzi@gmail.com – Freelance

10. Install GeoDjango
• django.contrib.gis
• Spatial database
• Geospatial libraries
Lucio Grenzi 10
l.grenzi@gmail.com – Freelance

11. Spatial database
Database Library Supported Versions Notes
Requirements
PostgreSQL GEOS, PROJ.4, 8.1+ Requires PostGIS
PostGIS
MySQL GEOS 5.x limited functionality
Oracle GEOS 10.2, 11 XE not supported
SQLite GEOS, GDAL, 3.6.+ Requires SpatiaLite
PROJ.4, SpatiaLite 2.3+, pysqlite2 2.5+,
and Django 1.1.
Lucio Grenzi 11
l.grenzi@gmail.com – Freelance

12. Geospatial libraries
Program Description Required Supported Versions
GEOS Geometry Engine Yes 3.3, 3.2, 3.1, 3.0
Open Source
PROJ.4 Cartographic Yes (PostgreSQL and 4.7, 4.6, 4.5, 4.4
Projections library SQLite only)
GDAL Geospatial Data No (but, required for 1.8, 1.7, 1.6, 1.5, 1.4
Abstraction Library SQLite)
GeoIP IP-based geolocation No 1.4
library
PostGIS Spatial extensions for Yes (PostgreSQL 1.5, 1.4, 1.3
PostgreSQL only)
SpatiaLite Spatial extensions for Yes (SQLite only) 3.0, 2.4, 2.3
SQLite
Lucio Grenzi 12
l.grenzi@gmail.com – Freelance

13. GIS problems
• The Earth is not like
a ball!
• How to store data
efficiently
– Different vendor
implementation
Lucio Grenzi 13
l.grenzi@gmail.com – Freelance

14. GIS data formats
• Lots of GIS file formats:
– Raster formats: DRG, GeoTIFF, ..
– Vector formats: DXF, GeoJSON, KML, GML
– http://en.wikipedia.org/wiki/GIS_file_formats
Lucio Grenzi 14
l.grenzi@gmail.com – Freelance

15. ABC GeoDjango
Lucio Grenzi 15
l.grenzi@gmail.com – Freelance

16. GeoDjango Model layer
A model is the single, definitive source of data
about your data.
It contains the essential fields and behaviors of
the data you’re storing. Generally, each model
maps to a single database table.
Lucio Grenzi 16
l.grenzi@gmail.com – Freelance

17. GeoDjango Template layer
Django’s template language is designed to strike
a balance between power and ease.
The Django template system provides tags which
function similarly to some programming
constructs – an if tag for boolean tests, a for
tag for looping, etc. – but these are not simply
executed as the corresponding Python code
Lucio Grenzi 17
l.grenzi@gmail.com – Freelance

18. GeoDjango View layer
A view function, or view for short, is simply a
Python function that takes a Web request and
returns a Web response. This response can be
the HTML contents of a Web page, or a
redirect, or a 404 error
Lucio Grenzi 18
l.grenzi@gmail.com – Freelance

19. GeoDjango Model API
Field type Field options
class GeometryField srid
class PointField spatial_index
class LineStringField dim
class PolygonField geography
class MultiPointField geography Type
class MultiLineStringField
class MultiPolygonField
GeometryCollectionField
class GeometryCollectionField
Lucio Grenzi 19
l.grenzi@gmail.com – Freelance

20. GeoQuerySet API
• Measurement: distance,area, length, perimeter
• Relationship: centroid, envelop, point_on_surface
• Editor: force_rhr, reverse_geom, scale, snap_to_grid,
transform(srid), translate
• Opertion: difference, intersection, sym_difference, union
• Output: geohash, geojson, gml, kml, svg
• Miscellaneous: mem_size, num_geom, num_points
Lucio Grenzi 20
l.grenzi@gmail.com – Freelance

21. GeoQuerySet API
• Measurement: distance,area, length, perimeter
GeoQuerySet.distance(geom, **kwargs)
Lucio Grenzi 21
l.grenzi@gmail.com – Freelance

22. GeoQuerySet API
• Relationship: centroid, envelop, point_on_surface
GeoQuerySet.envelope(**kwargs)
Lucio Grenzi 22
l.grenzi@gmail.com – Freelance

23. GeoQuerySet API
• Editor: force_rhr, reverse_geom, scale, snap_to_grid,
transform(srid), translate
GeoQuerySet.transform(srid=4326, **kwargs)
Lucio Grenzi 23
l.grenzi@gmail.com – Freelance

24. GeoQuerySet API
• Opertion: difference, intersection, sym_difference, union
GeoQuerySet.intersection(geom)
Lucio Grenzi 24
l.grenzi@gmail.com – Freelance

25. GeoQuerySet API
• Output: geohash, geojson, gml, kml, svg
GeoQuerySet.svg(**kwargs)
Lucio Grenzi 25
l.grenzi@gmail.com – Freelance

26. Google Maps license
http://www.google.com/intl/it_it/help/terms_maps.html
Lucio Grenzi 26
l.grenzi@gmail.com – Freelance

27. OpenstreetMap recent licensing changes
http://blog.openstreetmap.it/2012/04/01/cambio-licenza/
Lucio Grenzi 27
l.grenzi@gmail.com – Freelance

28. GeoDjango & Google Maps
Lucio Grenzi 28
l.grenzi@gmail.com – Freelance

29. GeoDjango & Google Maps: recipe
• Web server
• Python and GeoDjango
• PostgreSQL (postgresql-9.1-postgis)
• libgeos
Lucio Grenzi 29
l.grenzi@gmail.com – Freelance

30. Step 1 : create db and a new django project
• createdb -U postgres -T template_postgis -O geouser
geodatabase
• python manage.py syncdb
• django-admin.py startproject geodjangomaps
• Changes affect settings.py
DATABASES = { 'default': {
'ENGINE' : 'django.contrib.gis.db.backends.postgis',
'NAME': 'geodatabase',
'USER': 'geouser',
'PASSWORD': 'geopassword',
}}
Lucio Grenzi 30
l.grenzi@gmail.com – Freelance

31. Step 2 : Geospatial information
• Edit model.py in order to setup the spatial
reference system
• Google Maps api use srid = 4126
name = models.CharField(max_length=32)
geometry = models.PointField(srid=4326)
objects = models.GeoManager()
Lucio Grenzi 31
l.grenzi@gmail.com – Freelance

32. Step 3 : HTML page
<!DOCTYPE html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></
script>
</head>
<body onload="load()" onunload="GUnload()">
<span style=" font-family:Verdana; background-color:#95877f; cursor:default;"
onclick="get_location();">Find me!</span>
<div id="map" style="width: 400px; height: 400px"></div></body>
Lucio Grenzi 32
l.grenzi@gmail.com – Freelance

33. Get Current position
<script language="javascript">
var lat=50;
var lon=-110;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(lat, lon), 13);} }
function map(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
load(); }
function get_location() { navigator.geolocation.getCurrentPosition(map);}
</script>
Lucio Grenzi 33
l.grenzi@gmail.com – Freelance

34. Record Location
class RecordLocation(webapp.RequestHandler):
def post(self):
session=SessionManager(self)
if session.is_set():
marker=Markers(lat=self.request.get('lat'),lon=self.request.get('lon'),user_id=self.request.get('u
ser'))
marker.put()
self.response.out.write('<html><body>')
self.response.out.write(" Location Updated<br/>")
self.response.out.write('</body></html>')
Lucio Grenzi 34
l.grenzi@gmail.com – Freelance

35. Generate Marker
class GenerateMarkers(webapp.RequestHandler):
def get(self):
session=SessionManager(self)
if session.is_set():
markers=db.GqlQuery("SELECT * FROM Markers")
doc='<?xml version="1.0"?>'
doc+='<markers>'
for marker in markers:
doc+='<marker '
doc+='lat="'+marker.lat+'" '
doc+='lon="'+marker.lon+'" '
doc+='type="restaurant" '
doc+='/>'
doc+='</markers>'
self.response.out.write(doc)
Lucio Grenzi 35
l.grenzi@gmail.com – Freelance

36. Openlayer
<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script> var points = []; </script>
<ul>
{% for point in interesting_points %}
<li>{{ point.name }} -- {{point.interestingness}}</li>
<script>points.push({{point.geometry.geojson|safe}});</script>
{% endfor %}
</ul> </scrpit>
</head>
<body onload="init()">
Intersting Points.<br />
<div id="map"></div>
</body></html>
Lucio Grenzi 36
l.grenzi@gmail.com – Freelance

37. Openlayer js script
<script type="text/javascript">
var map, base_layer, kml;
function init(){
map = new OpenLayers.Map('map');
base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
var point = new OpenLayers.Geometry.Point(-100.01, 55.78);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature]);
}
</script>
Lucio Grenzi 37
l.grenzi@gmail.com – Freelance

38. Openlayer django script
vectors = OpenLayers.Layer.Vector("Simple Geometry");
for (var i = 0; i < points.length; i++) {
point = format.read(points[i])[0];
point.attributes = {'type':'point'};
vectors.addFeatures(point);
}
Lucio Grenzi 38
l.grenzi@gmail.com – Freelance

39. References
• http://www.geodjango.com
• http://invisibleroads.com/tutorials/geodjango-googlemaps-build.html
• http://code.google.com/p/geodjango-basic-apps/wiki/FOSS4GWorkshop
Lucio Grenzi 39
l.grenzi@gmail.com – Freelance

40. Questions?
Lucio Grenzi 40
l.grenzi@gmail.com – Freelance

41. Thank you
Creative Commons via tcmaker.org
Lucio Grenzi 41
l.grenzi@gmail.com – Freelance