Upcoming SlideShare
Loading in...5




Talk related Html 5 and GeoDjango and how combine both technologies

Talk related Html 5 and GeoDjango and how combine both technologies



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Geodjango Geodjango Presentation Transcript

  • GeoDjango e HTML5Lucio
  • Who am I?• Delphi developer for 11 years• Now freelance and Web developer• Javascript addicted Lucio Grenzi 2 – Freelance
  • Agenda• HTML 5 geolocalization: the new parts• About GeoDjango• GIS data format troubles• GeoDjango apis• GeoDjango and Google Maps / OpenStreetMaps Lucio Grenzi 3 – Freelance
  • Once upon a time Lucio Grenzi 4 – Freelance
  • 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 – Freelance
  • HTML 5 Geolocation apis (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 – Freelance
  • HTML 5 Geolocation apis (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 – Freelance
  • HTML 5 Geolocation apis (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 – Freelance
  • GeoDjangoGeoDjango 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 – Freelance
  • Install GeoDjango• django.contrib.gis• Spatial database• Geospatial libraries Lucio Grenzi 10 – Freelance
  • Spatial databaseDatabase Library Supported Versions Notes RequirementsPostgreSQL GEOS, PROJ.4, 8.1+ Requires PostGIS PostGISMySQL GEOS 5.x limited functionalityOracle GEOS 10.2, 11 XE not supportedSQLite GEOS, GDAL, 3.6.+ Requires SpatiaLite PROJ.4, SpatiaLite 2.3+, pysqlite2 2.5+, and Django 1.1. Lucio Grenzi 11 – Freelance
  • Geospatial librariesProgram Description Required Supported VersionsGEOS Geometry Engine Yes 3.3, 3.2, 3.1, 3.0 Open SourcePROJ.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 libraryPostGIS 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 – Freelance
  • GIS problems• The Earth is not like a ball!• How to store data efficiently – Different vendor implementation Lucio Grenzi 13 – Freelance
  • GIS data formats• Lots of GIS file formats: – Raster formats: DRG, GeoTIFF, .. – Vector formats: DXF, GeoJSON, KML, GML – Lucio Grenzi 14 – Freelance
  • ABC GeoDjango Lucio Grenzi 15 – Freelance
  • GeoDjango Model layerA 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 – Freelance
  • GeoDjango Template layerDjango’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 – Freelance
  • GeoDjango View layerA 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 – Freelance
  • GeoDjango Model APIField type Field optionsclass GeometryField sridclass PointField spatial_indexclass LineStringField dimclass PolygonField geographyclass MultiPointField geography Typeclass MultiLineStringFieldclass MultiPolygonFieldGeometryCollectionFieldclass GeometryCollectionField Lucio Grenzi 19 – Freelance
  • 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 – Freelance
  • GeoQuerySet API• Measurement: distance,area, length, perimeter GeoQuerySet.distance(geom, **kwargs) Lucio Grenzi 21 – Freelance
  • GeoQuerySet API• Relationship: centroid, envelop, point_on_surface GeoQuerySet.envelope(**kwargs) Lucio Grenzi 22 – Freelance
  • GeoQuerySet API• Editor: force_rhr, reverse_geom, scale, snap_to_grid, transform(srid), translate GeoQuerySet.transform(srid=4326, **kwargs) Lucio Grenzi 23 – Freelance
  • GeoQuerySet API• Opertion: difference, intersection, sym_difference, union GeoQuerySet.intersection(geom) Lucio Grenzi 24 – Freelance
  • GeoQuerySet API• Output: geohash, geojson, gml, kml, svg GeoQuerySet.svg(**kwargs) Lucio Grenzi 25 – Freelance
  • Google Maps license Lucio Grenzi 26 – Freelance
  • OpenstreetMap recent licensing changes Lucio Grenzi 27 – Freelance
  • GeoDjango & Google Maps Lucio Grenzi 28 – Freelance
  • GeoDjango & Google Maps: recipe• Web server• Python and GeoDjango• PostgreSQL (postgresql-9.1-postgis)• libgeos Lucio Grenzi 29 – Freelance
  • Step 1 : create db and a new django project• createdb -U postgres -T template_postgis -O geouser geodatabase• python syncdb• startproject geodjangomaps• Changes affect settings.pyDATABASES = { default: { ENGINE : django.contrib.gis.db.backends.postgis, NAME: geodatabase, USER: geouser, PASSWORD: geopassword, }} Lucio Grenzi 30 – Freelance
  • Step 2 : Geospatial information• Edit in order to setup the spatial reference system• Google Maps api use srid = 4126name = models.CharField(max_length=32)geometry = models.PointField(srid=4326)objects = models.GeoManager() Lucio Grenzi 31 – Freelance
  • Step 3 : HTML page<!DOCTYPE html><head> <script src="" 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 – Freelance
  • 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 – Freelance
  • 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(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 – Freelance
  • Generate Markerclass 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="" doc+=lon="+marker.lon+" doc+=type="restaurant" doc+=/> doc+=</markers> self.response.out.write(doc) Lucio Grenzi 35 – Freelance
  • Openlayer<html> <head> <script src=""></script> <script> var points = []; </script> <ul> {% for point in interesting_points %} <li>{{ }} -- {{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 – Freelance
  • 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", "", {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 – Freelance
  • Openlayer django scriptvectors = OpenLayers.Layer.Vector("Simple Geometry");for (var i = 0; i < points.length; i++) { point =[i])[0]; point.attributes = {type:point}; vectors.addFeatures(point); } Lucio Grenzi 38 – Freelance
  • References••• Lucio Grenzi 39 – Freelance
  • Questions? Lucio Grenzi 40 – Freelance
  • Thank youCreative Commons via Lucio Grenzi 41 – Freelance