Geodjango and HTML 5

GeoDjango and HTML5
Lucio Grenzi
l.grenzi@gmail.com

Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
3
Agenda
• HTML 5 and geolocalization
• GeoDjango: first introduction
• GIS data format troubles
• GeoDjango api's
• GeoDjango and Google Maps /
OpenStreetMaps

Lucio Grenzi
4
Once upon a time ...

Lucio Grenzi
5
...and now

Lucio Grenzi
6

Lucio Grenzi
7

Lucio Grenzi
8
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
9
HTML 5 Geolocation api's
geolocation.getCurrentPosition(showPosition)
geolocation.watchPosition(showPosition)

Lucio Grenzi
10
GetCurrentPosition
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
11
watchPosition
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
12
HTML 5 Geolocation attributes
interface Position {
readonly attribute Coordinates coords;
readonly attribute DOMTimeStamp
timestamp;
};
interface Coordinates {
readonly attribute double latitude;
readonly attribute double longitude;
readonly attribute double altitude;
readonly attribute double accuracy;
readonly attribute double altitudeAccuracy;
readonly attribute double heading;
readonly attribute double speed;
};

Lucio Grenzi
13
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
14
Install GeoDjango
• django.contrib.gis
• Spatial database
• Geospatial libraries

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

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

Lucio Grenzi
17
PostGIS 2.x
• Completely rewritten
• Many more vector functions including
• Django support >= 1.5
• Suggested PostgreSQL >= 9.2

Lucio Grenzi
18
GIS problems
• The Earth is not like
a ball!
• How to store data
efficiently
– Different vendor
implementation

Lucio Grenzi
19
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
20
GDAL : “swiss army knife” of GIS data
• Geospatial Data Abstraction Library
• A subset of GDAL is specialized in reading and
writing vector geographic data in a variety of
standard formats
• GeoDjango only supports some of the
capabilities

Lucio Grenzi
21
GEOS
• Geometry Engine - Open Source
• GEOS implements the OpenGIS Simple
Features for SQL spatial predicate functions
and spatial operators.
• GeoDjango implements a high-level Python
wrapper for the GEOS library

Lucio Grenzi
22
GEOIP
IP-based geolocation binding MaxMind
• Needed in order to perform IP-based
geolocation( the location, coords)
• requires the GeoIP C library and GeoIP
Country or City datasets

Lucio Grenzi
23
ABC GeoDjango

Lucio Grenzi
24
Geometry field
● GeometryField
● PointField
● LineStringField
● PolygonField
● MultiPointField
● MultiLineStringField
● MultiPolygonField
● GeometryCollectionField

Lucio Grenzi
25
Geometry field option
srid
spatial_index
dim
geography
geography Type

Lucio Grenzi
26
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
• Operation: difference, intersection, sym_difference, union
• Output: geohash, geojson, gml, kml, svg
• Miscellaneous: mem_size, num_geom, num_points

Lucio Grenzi
27
GeoQuerySet API
• Measurement: distance,area, length, perimeter
GeoQuerySet.distance(geom, **kwargs)

Lucio Grenzi
28
GeoQuerySet API
• Relationship: centroid, envelop, point_on_surface
GeoQuerySet.envelope(**kwargs)

Lucio Grenzi
29
GeoQuerySet API
• Editor: force_rhr, reverse_geom, scale, snap_to_grid,
transform(srid), translate
GeoQuerySet.transform(srid=4326, **kwargs)

Lucio Grenzi
30
GeoQuerySet API
• Opertion: difference, intersection, sym_difference, union
GeoQuerySet.intersection(geom)

Lucio Grenzi
31
GeoQuerySet API
• Output: geohash, geojson, gml, kml, svg
GeoQuerySet.svg(**kwargs)

Lucio Grenzi
32
Front-end api making map interactions
• Google maps API
• OpenLayer
• Polymaps
• Wax

Lucio Grenzi
33
Google Maps license
http://www.google.com/intl/it_it/help/terms_maps.html

Lucio Grenzi
34
OpenstreetMap recent licensing changes
http://blog.openstreetmap.it/2012/04/01/cambio-licenza/

Lucio Grenzi
35
GeoDjango & Google Maps

Lucio Grenzi
36
GeoDjango & Google Maps: recipe
• Web server
• Python and GeoDjango
• PostgreSQL (postgresql-9.1-postgis)
• libgeos

Lucio Grenzi
37
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
38
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
39
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
40
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
41
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('user')
)
marker.put()
self.response.out.write('<html><body>')
self.response.out.write(" Location Updated<br/>")
self.response.out.write('</body></html>')

Lucio Grenzi
42
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
43
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
44
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
45
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
46
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
47
Questions?

Lucio Grenzi
48
Thank you
Creative Commons via tcmaker.org

Geodjango and HTML 5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Geodjango and HTML 5

Ähnlich wie Geodjango and HTML 5 (20)

Mehr von Lucio Grenzi

Mehr von Lucio Grenzi (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Geodjango and HTML 5