The document discusses using GeoDjango and HTML5 for geolocation applications. It begins with an introduction of the speaker and overview of topics to be covered, including HTML5 geolocation, GeoDjango, geographic information system (GIS) data formats, the GeoDjango API, and integrating GeoDjango with Google Maps and OpenStreetMaps. The document then covers specifics of each topic, such as HTML5 geolocation APIs, installing and configuring GeoDjango, spatial databases, GIS data problems and formats, the GeoDjango model, template, and view layers, GeoQuerySet APIs, and examples of integrating GeoDjango with Google Maps, OpenLayers, and recording geolocation data.
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
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
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
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
29. GeoDjango & Google Maps: recipe
• Web server
• Python and GeoDjango
• PostgreSQL (postgresql-9.1-postgis)
• libgeos
Lucio Grenzi 29
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
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
