SlideShare una empresa de Scribd logo
1 de 48
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
l.grenzi@gmail.com – Freelance
3
Agenda
• HTML 5 and geolocalization
• GeoDjango: first introduction
• GIS data format troubles
• GeoDjango api's
• GeoDjango and Google Maps /
OpenStreetMaps
Lucio Grenzi
l.grenzi@gmail.com – Freelance
4
Once upon a time ...
Lucio Grenzi
l.grenzi@gmail.com – Freelance
5
...and now
Lucio Grenzi
l.grenzi@gmail.com – Freelance
6
Lucio Grenzi
l.grenzi@gmail.com – Freelance
7
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
9
HTML 5 Geolocation api's
geolocation.getCurrentPosition(showPosition)
geolocation.watchPosition(showPosition)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
14
Install GeoDjango
• django.contrib.gis
• Spatial database
• Geospatial libraries
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
17
PostGIS 2.x
• Completely rewritten
• Many more vector functions including
• Django support >= 1.5
• Suggested PostgreSQL >= 9.2
Lucio Grenzi
l.grenzi@gmail.com – Freelance
18
GIS problems
• The Earth is not like
a ball!
• How to store data
efficiently
– Different vendor
implementation
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
23
ABC GeoDjango
Lucio Grenzi
l.grenzi@gmail.com – Freelance
24
Geometry field
● GeometryField
● PointField
● LineStringField
● PolygonField
● MultiPointField
● MultiLineStringField
● MultiPolygonField
● GeometryCollectionField
Lucio Grenzi
l.grenzi@gmail.com – Freelance
25
Geometry field option
srid
spatial_index
dim
geography
geography Type
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
27
GeoQuerySet API
• Measurement: distance,area, length, perimeter
GeoQuerySet.distance(geom, **kwargs)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
28
GeoQuerySet API
• Relationship: centroid, envelop, point_on_surface
GeoQuerySet.envelope(**kwargs)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
29
GeoQuerySet API
• Editor: force_rhr, reverse_geom, scale, snap_to_grid,
transform(srid), translate
GeoQuerySet.transform(srid=4326, **kwargs)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
30
GeoQuerySet API
• Opertion: difference, intersection, sym_difference, union
GeoQuerySet.intersection(geom)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
31
GeoQuerySet API
• Output: geohash, geojson, gml, kml, svg
GeoQuerySet.svg(**kwargs)
Lucio Grenzi
l.grenzi@gmail.com – Freelance
32
Front-end api making map interactions
• Google maps API
• OpenLayer
• Polymaps
• Wax
Lucio Grenzi
l.grenzi@gmail.com – Freelance
33
Google Maps license
http://www.google.com/intl/it_it/help/terms_maps.html
Lucio Grenzi
l.grenzi@gmail.com – Freelance
34
OpenstreetMap recent licensing changes
http://blog.openstreetmap.it/2012/04/01/cambio-licenza/
Lucio Grenzi
l.grenzi@gmail.com – Freelance
35
GeoDjango & Google Maps
Lucio Grenzi
l.grenzi@gmail.com – Freelance
36
GeoDjango & Google Maps: recipe
• Web server
• Python and GeoDjango
• PostgreSQL (postgresql-9.1-postgis)
• libgeos
Lucio Grenzi
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
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
l.grenzi@gmail.com – Freelance
47
Questions?
Lucio Grenzi
l.grenzi@gmail.com – Freelance
48
Thank you
Creative Commons via tcmaker.org

Más contenido relacionado

Similar a Geodjango and HTML 5

Similar a Geodjango and HTML 5 (20)

Beyond GeoServer Basics
Beyond GeoServer BasicsBeyond GeoServer Basics
Beyond GeoServer Basics
 
GIS_Day_2016
GIS_Day_2016GIS_Day_2016
GIS_Day_2016
 
QGIS Open Source Desktop GIS
QGIS Open Source Desktop GISQGIS Open Source Desktop GIS
QGIS Open Source Desktop GIS
 
Using python to analyze spatial data
Using python to analyze spatial dataUsing python to analyze spatial data
Using python to analyze spatial data
 
Saving Money with Open Source GIS
Saving Money with Open Source GISSaving Money with Open Source GIS
Saving Money with Open Source GIS
 
New opensource geospatial software stack from NextGIS
New opensource geospatial software stack from NextGISNew opensource geospatial software stack from NextGIS
New opensource geospatial software stack from NextGIS
 
GIS User to Web-GIS Developer Journey
GIS User to Web-GIS Developer JourneyGIS User to Web-GIS Developer Journey
GIS User to Web-GIS Developer Journey
 
Powerful geographic web framework GeoDjango
Powerful geographic web framework GeoDjangoPowerful geographic web framework GeoDjango
Powerful geographic web framework GeoDjango
 
GeoNode intro and demo
GeoNode intro and demoGeoNode intro and demo
GeoNode intro and demo
 
Logi Hacks: Tips & Tricks for Using Info
Logi Hacks: Tips & Tricks for Using InfoLogi Hacks: Tips & Tricks for Using Info
Logi Hacks: Tips & Tricks for Using Info
 
Implementation of the new REST API for Open Source LBS-platform Geo2Tag
Implementation of the new REST API for Open Source LBS-platform Geo2TagImplementation of the new REST API for Open Source LBS-platform Geo2Tag
Implementation of the new REST API for Open Source LBS-platform Geo2Tag
 
How I become Go GDE
How I become Go GDEHow I become Go GDE
How I become Go GDE
 
My experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developerMy experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developer
 
Geo mapfish 2_foss4g-eu_2017
Geo mapfish 2_foss4g-eu_2017Geo mapfish 2_foss4g-eu_2017
Geo mapfish 2_foss4g-eu_2017
 
PostGIS and Spatial SQL
PostGIS and Spatial SQLPostGIS and Spatial SQL
PostGIS and Spatial SQL
 
2018 - Grupo QGIS Brasil e o lançamento do QGIS 3.4 LTR (Versão de Longo Prazo)
2018 - Grupo QGIS Brasil e o lançamento do QGIS 3.4 LTR (Versão de Longo Prazo)2018 - Grupo QGIS Brasil e o lançamento do QGIS 3.4 LTR (Versão de Longo Prazo)
2018 - Grupo QGIS Brasil e o lançamento do QGIS 3.4 LTR (Versão de Longo Prazo)
 
Present meet and greet
Present meet and greetPresent meet and greet
Present meet and greet
 
Using Geoscript Groovy
Using Geoscript GroovyUsing Geoscript Groovy
Using Geoscript Groovy
 
Geonode 2.0
Geonode 2.0Geonode 2.0
Geonode 2.0
 
Integrating PostGIS in Web Applications
Integrating PostGIS in Web ApplicationsIntegrating PostGIS in Web Applications
Integrating PostGIS in Web Applications
 

Más de Lucio Grenzi

Jenkins djangovillage
Jenkins djangovillageJenkins djangovillage
Jenkins djangovillage
Lucio Grenzi
 

Más de Lucio Grenzi (12)

How to use Postgresql in order to handle Prometheus metrics storage
How to use Postgresql in order to handle Prometheus metrics storageHow to use Postgresql in order to handle Prometheus metrics storage
How to use Postgresql in order to handle Prometheus metrics storage
 
Building serverless application on the Apache Openwhisk platform
Building serverless application on the Apache Openwhisk platformBuilding serverless application on the Apache Openwhisk platform
Building serverless application on the Apache Openwhisk platform
 
Patroni: PostgreSQL HA in the cloud
Patroni: PostgreSQL HA in the cloudPatroni: PostgreSQL HA in the cloud
Patroni: PostgreSQL HA in the cloud
 
Postgrest: the REST API for PostgreSQL databases
Postgrest: the REST API for PostgreSQL databasesPostgrest: the REST API for PostgreSQL databases
Postgrest: the REST API for PostgreSQL databases
 
Full slidescr16
Full slidescr16Full slidescr16
Full slidescr16
 
Use Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile applicationUse Ionic Framework to develop mobile application
Use Ionic Framework to develop mobile application
 
Rabbitmq & Postgresql
Rabbitmq & PostgresqlRabbitmq & Postgresql
Rabbitmq & Postgresql
 
Jenkins djangovillage
Jenkins djangovillageJenkins djangovillage
Jenkins djangovillage
 
PLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web sidePLV8 - The PostgreSQL web side
PLV8 - The PostgreSQL web side
 
Pg tap
Pg tapPg tap
Pg tap
 
Yui app-framework
Yui app-frameworkYui app-framework
Yui app-framework
 
node.js e Postgresql
node.js e Postgresqlnode.js e Postgresql
node.js e Postgresql
 

Último

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
VictoriaMetrics
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
masabamasaba
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
masabamasaba
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
masabamasaba
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
 

Último (20)

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptx
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
WSO2CON 2024 - Navigating API Complexity: REST, GraphQL, gRPC, Websocket, Web...
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 

Geodjango and HTML 5

  • 1. GeoDjango and HTML5 Lucio Grenzi l.grenzi@gmail.com
  • 2. 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
  • 3. Lucio Grenzi l.grenzi@gmail.com – Freelance 3 Agenda • HTML 5 and geolocalization • GeoDjango: first introduction • GIS data format troubles • GeoDjango api's • GeoDjango and Google Maps / OpenStreetMaps
  • 4. Lucio Grenzi l.grenzi@gmail.com – Freelance 4 Once upon a time ...
  • 5. Lucio Grenzi l.grenzi@gmail.com – Freelance 5 ...and now
  • 8. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 9. Lucio Grenzi l.grenzi@gmail.com – Freelance 9 HTML 5 Geolocation api's geolocation.getCurrentPosition(showPosition) geolocation.watchPosition(showPosition)
  • 10. Lucio Grenzi l.grenzi@gmail.com – Freelance 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. }
  • 11. Lucio Grenzi l.grenzi@gmail.com – Freelance 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!"); } }
  • 12. Lucio Grenzi l.grenzi@gmail.com – Freelance 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; };
  • 13. Lucio Grenzi l.grenzi@gmail.com – Freelance 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.
  • 14. Lucio Grenzi l.grenzi@gmail.com – Freelance 14 Install GeoDjango • django.contrib.gis • Spatial database • Geospatial libraries
  • 15. Lucio Grenzi l.grenzi@gmail.com – Freelance 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.
  • 16. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 17. Lucio Grenzi l.grenzi@gmail.com – Freelance 17 PostGIS 2.x • Completely rewritten • Many more vector functions including • Django support >= 1.5 • Suggested PostgreSQL >= 9.2
  • 18. Lucio Grenzi l.grenzi@gmail.com – Freelance 18 GIS problems • The Earth is not like a ball! • How to store data efficiently – Different vendor implementation
  • 19. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 20. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 21. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 22. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 23. Lucio Grenzi l.grenzi@gmail.com – Freelance 23 ABC GeoDjango
  • 24. Lucio Grenzi l.grenzi@gmail.com – Freelance 24 Geometry field ● GeometryField ● PointField ● LineStringField ● PolygonField ● MultiPointField ● MultiLineStringField ● MultiPolygonField ● GeometryCollectionField
  • 25. Lucio Grenzi l.grenzi@gmail.com – Freelance 25 Geometry field option srid spatial_index dim geography geography Type
  • 26. Lucio Grenzi l.grenzi@gmail.com – Freelance 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
  • 27. Lucio Grenzi l.grenzi@gmail.com – Freelance 27 GeoQuerySet API • Measurement: distance,area, length, perimeter GeoQuerySet.distance(geom, **kwargs)
  • 28. Lucio Grenzi l.grenzi@gmail.com – Freelance 28 GeoQuerySet API • Relationship: centroid, envelop, point_on_surface GeoQuerySet.envelope(**kwargs)
  • 29. Lucio Grenzi l.grenzi@gmail.com – Freelance 29 GeoQuerySet API • Editor: force_rhr, reverse_geom, scale, snap_to_grid, transform(srid), translate GeoQuerySet.transform(srid=4326, **kwargs)
  • 30. Lucio Grenzi l.grenzi@gmail.com – Freelance 30 GeoQuerySet API • Opertion: difference, intersection, sym_difference, union GeoQuerySet.intersection(geom)
  • 31. Lucio Grenzi l.grenzi@gmail.com – Freelance 31 GeoQuerySet API • Output: geohash, geojson, gml, kml, svg GeoQuerySet.svg(**kwargs)
  • 32. Lucio Grenzi l.grenzi@gmail.com – Freelance 32 Front-end api making map interactions • Google maps API • OpenLayer • Polymaps • Wax
  • 33. Lucio Grenzi l.grenzi@gmail.com – Freelance 33 Google Maps license http://www.google.com/intl/it_it/help/terms_maps.html
  • 34. Lucio Grenzi l.grenzi@gmail.com – Freelance 34 OpenstreetMap recent licensing changes http://blog.openstreetmap.it/2012/04/01/cambio-licenza/
  • 35. Lucio Grenzi l.grenzi@gmail.com – Freelance 35 GeoDjango & Google Maps
  • 36. Lucio Grenzi l.grenzi@gmail.com – Freelance 36 GeoDjango & Google Maps: recipe • Web server • Python and GeoDjango • PostgreSQL (postgresql-9.1-postgis) • libgeos
  • 37. Lucio Grenzi l.grenzi@gmail.com – Freelance 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', }}
  • 38. Lucio Grenzi l.grenzi@gmail.com – Freelance 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()
  • 39. Lucio Grenzi l.grenzi@gmail.com – Freelance 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>
  • 40. Lucio Grenzi l.grenzi@gmail.com – Freelance 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>
  • 41. Lucio Grenzi l.grenzi@gmail.com – Freelance 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>')
  • 42. Lucio Grenzi l.grenzi@gmail.com – Freelance 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)
  • 43. Lucio Grenzi l.grenzi@gmail.com – Freelance 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>
  • 44. Lucio Grenzi l.grenzi@gmail.com – Freelance 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>
  • 45. Lucio Grenzi l.grenzi@gmail.com – Freelance 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); }
  • 46. Lucio Grenzi l.grenzi@gmail.com – Freelance 46 References • http://www.geodjango.com • http://invisibleroads.com/tutorials/geodjango-googlemaps-build.html • http://code.google.com/p/geodjango-basic-apps/wiki/FOSS4GWorkshop
  • 47. Lucio Grenzi l.grenzi@gmail.com – Freelance 47 Questions?
  • 48. Lucio Grenzi l.grenzi@gmail.com – Freelance 48 Thank you Creative Commons via tcmaker.org