geodjango

GeoDjango e HTML5

Lucio Grenzi

[email protected]

Lucio [email protected] – 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


3

Agenda

• HTML 5 geolocalization: the new parts• About GeoDjango• GIS data format troubles• GeoDjango api's• GeoDjango and Google Maps /

OpenStreetMaps


4

Once upon a time


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


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. }


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!");

}

}


8

HTML 5 Geolocation api's (3/3)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;

};


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.


10

Install GeoDjango

• django.contrib.gis• Spatial database• Geospatial libraries


11

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.


12

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


13

GIS problems

• The Earth is not like a ball!

• How to store data efficiently– Different vendor

implementation


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


15

ABC GeoDjango


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.


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


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


19

GeoDjango Model APIField type

class GeometryField

class PointField

class LineStringField

class PolygonField

class MultiPointField

class MultiLineStringField

class MultiPolygonField

GeometryCollectionField

class GeometryCollectionField

Field options

srid

spatial_index

dim

geography

geography Type


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


21

GeoQuerySet API

• Measurement: distance,area, length, perimeter

GeoQuerySet.distance(geom, **kwargs)


22

GeoQuerySet API

• Relationship: centroid, envelop, point_on_surface

GeoQuerySet.envelope(**kwargs)


23

GeoQuerySet API

• Editor: force_rhr, reverse_geom, scale, snap_to_grid, transform(srid), translate

GeoQuerySet.transform(srid=4326, **kwargs)


24

GeoQuerySet API

• Opertion: difference, intersection, sym_difference, union

GeoQuerySet.intersection(geom)


25

GeoQuerySet API

• Output: geohash, geojson, gml, kml, svg

GeoQuerySet.svg(**kwargs)


26

Google Maps license

http://www.google.com/intl/it_it/help/terms_maps.html


27

OpenstreetMap recent licensing changes

http://blog.openstreetmap.it/2012/04/01/cambio-licenza/


28

GeoDjango & Google Maps


29

GeoDjango & Google Maps: recipe

• Web server• Python and GeoDjango• PostgreSQL (postgresql-9.1-postgis)• libgeos


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.pyDATABASES = { 'default': { 'ENGINE' : 'django.contrib.gis.db.backends.postgis', 'NAME': 'geodatabase', 'USER': 'geouser', 'PASSWORD': 'geopassword', }}


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()


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>


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>


34

Record Locationclass 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>')


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)


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>


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>


38

Openlayer django scriptvectors = 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); }


39

References

• http://www.geodjango.com

• http://invisibleroads.com/tutorials/geodjango-googlemaps-build.html

• http://code.google.com/p/geodjango-basic-apps/wiki/FOSS4GWorkshop


40

Questions?


41

Thank you

Creative Commons via tcmaker.org

geodjango

Technology