php/archived-presentations
1
0
Fork 0
mirror of https://github.com/php/presentations.git synced 2026-03-23 23:22:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

- Added the rest of the mapping talk.

Browse Source
This commit is contained in:
Derick Rethans
2010-10-08 18:30:10 +00:00
parent e642d1230e
commit 8d1a9f972d
50 changed files with 951 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
maps-phpnw10.xml
View File

@@ -16,7 +16,7 @@
<email>derick@derickrethans.nl</email>
<twitter>derickr</twitter>
<url>http://derickrethans.nl/talks.html</url>
<joindin>http://joind.in/???</joindin>
<joindin>http://joind.in/2047</joindin>
<slide>slides/map/title.xml</slide>
<slide>slides/toolbox/me.xml</slide>
@@ -39,7 +39,71 @@
<slide>slides/map/earth-sphere-approximation.xml</slide>
<slide>slides/map/meridian.xml</slide>
<slide>slides/map/earth-not-flat.xml</slide>
<slide>slides/map/projections.xml</slide>
<slide>slides/map/coordinates.xml</slide>
<slide>slides/map/planets.xml</slide>
<slide>slides/map/coordinate-transformation.xml</slide>
<slide>slides/map/grid-systems.xml</slide>
<slide>slides/map/national-grid.xml</slide>
<!--
SHOWING DATA
- OpenStreetMap tiles
- (Google, eew!)
-->
<slide>slides/map/googlemap.xml</slide>
<slide>slides/map/openlayers-simple.xml</slide>
<!--
ACQUIRING LOCATION
- Nominatim
- Geonames
- Yahoo
- firefox location API
- Google GeoLocation
-->
<slide>slides/map/openlayers-location.xml</slide>
<slide>slides/map/nominatim-lookup.xml</slide>
<slide>slides/map/yahoo-lookup.xml</slide>
<slide>slides/map/reverse.xml</slide>
<slide>slides/map/nominatim-reverse-lookup.xml</slide>
<slide>slides/map/geonames-reverse-lookup.xml</slide>
<slide>slides/map/yahoo-reverse-lookup.xml</slide>
<slide>slides/map/html-location-services.xml</slide>
<slide>slides/map/google-geolocation.xml</slide>
<slide>slides/map/google-geolocation-get-wlan.xml</slide>
<!--
ACQUIRING DATA
- Open Street Map
- Ordnance Survey Open CodePoint
- GPX files
-->
<slide>slides/map/osm-what.xml</slide>
<slide>slides/map/osm-xapi.xml</slide>
<slide>slides/map/osm-data.xml</slide>
<slide>slides/map/osm-parse-into-db.xml</slide>
<!--
PLOTTING DATA
- mysql/sqlite/mongodb
- distances are tricky
- flickr photos
-->
<slide>slides/map/finding-food.xml</slide>
<slide>slides/map/finding-food-data-sqlite.xml</slide>
<slide>slides/map/finding-food-data-mysql.xml</slide>
<slide>slides/map/finding-food-data-mongo.xml</slide>
<slide>slides/map/finding-distances.xml</slide>
<slide>slides/map/finding-food-take2.xml</slide>
<slide>slides/map/tube-gpx.xml</slide>
<slide>slides/map/conferences.xml</slide>
<slide>slides/map/flickr.xml</slide>
<!-- micro format: http://en.wikipedia.org/wiki/Geo_%28microformat%29 -->
<slide>slides/map/resources.xml</slide>
</presentation>

26
slides/map/conferences.xml Normal file
View File

@@ -0,0 +1,26 @@
<slide>
<title>Plotting data</title>
<div effect="fade-out">
<iframe filename='examples/conferences.html'/>
</div>
<div effect="fade-in">
<example><![CDATA[<?xml version="1.0" encoding="UTF-8"?>
<gpx
version="1.0"
creator="GPSBabel - http://www.gpsbabel.org"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.topografix.com/GPX/1/0"
xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
<trk><name>Conferences</name>
<trkseg>
<trkpt lat="51.5393357" lon="-0.1982196"><name>London</name></trkpt>
<trkpt lat="53.4791466" lon="-2.2447445"><name>Manchester</name></trkpt>
<trkpt lat="49.9999952" lon="8.2710237"><name>Mainz</name></trkpt>
<trkpt lat="52.05292" lon="6.09513"><name>Dieren</name></trkpt>
<trkpt lat="51.5393357" lon="-0.1982196"><name>London</name></trkpt>
</trkseg>
</trk>
</gpx>]]></example>
</div>
</slide>

16
slides/map/coordinate-transformation.xml Normal file
View File

@@ -0,0 +1,16 @@
<slide>
<title>Coordinate Transformation</title>
<subtitle>Converting between two datums</subtitle>
<break lines="2"/>
<blurb>Helmert transformation:</blurb>
<image filename="helmert2.png" attr="http://en.wikipedia.org/wiki/Helmert_transformation"/>
<blurb>WGS84 to OSGB36:</blurb>
<example>
cx: −446.448 cy: 125.157 cz: −542.06
s: 20.4894
rx: −0.1502 ry: −0.247 rz: −0.8421</example>
<blurb>Accuracy of about 7m for a OSGB36/WGS84 transformation</blurb>
</slide>

7
slides/map/coordinates.xml Normal file
View File

@@ -0,0 +1,7 @@
<slide>
<title>Geoids and Coordinates</title>
<break lines="2"/>
<image filename="edin-lon.png" attr="(c) OpenStreetMap contributors, CC-BY-SA"/>
<blurb align="center">Different geoids give different coordinates for places </blurb>
</slide>

16
slides/map/earth-not-flat.xml
View File

@@ -1,5 +1,17 @@
<slide>
<title>The Earth is not flat</title>
<title>Map Projections</title>
<image filename='flatmap.jpg'/>
<break lines="5"/>
<div effect="fade-out">
<image filename='flatmap.jpg'/>
<blurb align="center">The Earth is not flat</blurb>
</div>
<div effect="fade-in-out">
<image filename="globe.jpg" attr="http://www.flickr.com/photos/derickrethans/2527529206"/>
<blurb align="center">Bringing a globe with you isn't very practical</blurb>
</div>
<div effect="fade-in">
<image filename="paper.jpg"/>
<blurb align="center">Paper is flat, so we need to project the globe on a 2D plane</blurb>
</div>
</slide>

BIN
slides/map/edin-lon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

BIN
slides/map/edin-lon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1016 KiB

8
slides/map/finding-distances.xml Normal file
View File

@@ -0,0 +1,8 @@
<slide>
<title>Distances are tricky</title>
<break lines="3"/>
<image filename='map-calculations.png'/>
<break/>
<blurb align="center">*note*: km / miles ≈ cos(51.5)</blurb>
</slide>

44
slides/map/finding-food-data-mongo.xml Normal file
View File

@@ -0,0 +1,44 @@
<slide>
<title>Finding Food</title>
<subtitle>Getting The Data: MongoDB</subtitle>
<div effect="fade-out">
<example><![CDATA[<?php
header('Content-type: text/plain');
$m = new Mongo( 'mongodb://localhost:27017' );
$d = $m->selectDb( 'geolocation' );
$wantedD = isset($_GET['d']) ? $_GET['d']: 1;
$query = array( 'cuisine' => $_GET['cuisine'] );
if ( $_GET['cuisine'] == 'all' )
{
$query = array();
}
$s = $d->command(
array(
'geoNear' => 'poi',
'near' => array( $_GET['lat'], $_GET['lon'] ),
'num' => 10000,
'maxDistance' => $wantedD * (360 / (2*M_PI*6371.01)), // km to °
'query' => $query,
)
);
echo "lat\tlon\ttitle\tdescription\r\n";
foreach( $s['results'] as $res) {
if (isset($res['obj']['name'] ) )
{
echo $res['obj']['loc'][0], "\t", $res['obj']['loc'][1], "\t", $res['obj']['name'], "\t", sprintf('real: %.4f mongo: %.4f', $e, $res['dis'] / (360 / (2*M_PI*6371.
}
}
]]></example>
</div>
<div effect="fade-in-out">
<blurb>Spatial Index</blurb>
<example><![CDATA[
db.poi.ensureIndex( { loc : '2d' } );
]]></example>
<blurb>It is not a geospatial index (yet)</blurb>
</div>
</slide>

43
slides/map/finding-food-data-mysql.xml Normal file
View File

@@ -0,0 +1,43 @@
<slide>
<title>Finding Food</title>
<subtitle>Getting The Data: MySQL</subtitle>
<div effect="fade-out">
<example><![CDATA[<?php
include 'distance.php';
header('Content-type: text/plain');
require '/home/derick/dev/zetacomponents/trunk/Base/src/ezc_bootstrap.php';
$d = ezcDbFactory::create( 'mysql://root:root@localhost/geolocation' );
$wantedD = isset($_GET['d']) ? $_GET['d']: 1;
$q = $d->createSelectQuery();
$q->select('*',"DISTANCE({$_GET['lat']},{$_GET['lon']}, lat, lon) as dist")->from('poi');
if ( $_GET['cuisine'] !== 'all' )
{
$q->where($q->expr->eq('cuisine', $q->bindValue( $_GET['cuisine'] ) ) );
}
$s = $q->prepare();
$s->execute();
]]></example>
</div>
<div effect="fade-in-out">
<blurb>Stored Procedure</blurb>
<example><![CDATA[
delimiter //
CREATE FUNCTION distance (latA double, lonA double, latB double, LonB double)
RETURNS double DETERMINISTIC
BEGIN
SET @RlatA = radians(latA);
SET @RlonA = radians(lonA);
SET @RlatB = radians(latB);
SET @RlonB = radians(LonB);
SET @deltaLat = @RlatA - @RlatB;
SET @deltaLon = @RlonA - @RlonB;
SET @d = SIN(@deltaLat/2) * SIN(@deltaLat/2) +
COS(@RlatA) * COS(@RlatB) * SIN(@deltaLon/2)*SIN(@deltaLon/2);
RETURN 2 * ASIN(SQRT(@d)) * 6371.01;
END//
]]></example>
</div>
</slide>

50
slides/map/finding-food-data-sqlite.xml Normal file
View File

@@ -0,0 +1,50 @@
<slide>
<title>Finding Food</title>
<subtitle>Getting The Data: SQLite</subtitle>
<div effect="fade-out">
<example><![CDATA[<?php
include 'distance.php';
header('Content-type: text/plain');
require '/home/derick/dev/zetacomponents/trunk/Base/src/ezc_bootstrap.php';
$d = ezcDbFactory::create( 'sqlite://' . dirname( __FILE__ ) . '/pois.sqlite' );
$wantedD = isset($_GET['d']) ? $_GET['d']: 1;
$q = $d->createSelectQuery();
$q->select('*')->from('poi');
if ( $_GET['cuisine'] !== 'all' )
{
$q->where($q->expr->eq('cuisine', $q->bindValue( $_GET['cuisine'] ) ) );
}
$s = $q->prepare();
$s->execute();
echo "lat\tlon\ttitle\tdescription\ticonSize\ticonOffset\ticon\r\n";
foreach( $s as $res) {
$e = distance2($_GET['lat'], $_GET['lon'], $res['lat'], $res['lon'] );
if ($e < $wantedD) {
echo $res['lat'], "\t", $res['lon'], "\t", $res['name'], "\t", sprintf('%.2f', $e). " km away\t16,16\t-8,-8\tpub.png\r\n";
}
}]]></example>
<blurb><link href='/presentations/slides/map/examples/fetch.php?cuisine=all&amp;lat=51.514&amp;lon=-0.116&amp;d=0.5'/></blurb>
</div>
<div effect="fade-in-out">
<blurb>Calculating Distance</blurb>
<example><![CDATA[<?php
function distance2($latA, $lonA, $latB, $lonB)
{
$latA = deg2rad($latA);
$lonA = deg2rad($lonA);
$latB = deg2rad($latB);
$lonB = deg2rad($lonB);
$deltaLat = ($latA - $latB);
$deltaLon = ($lonA - $lonB);
$d = sin($deltaLat/2) * sin($deltaLat/2) +
cos($latA) * cos($latB) * sin($deltaLon/2) * sin($deltaLon/2);
$d = 2 * asin(sqrt($d));
return $d * 6371.01;
}
]]></example>
</div>
</slide>

51
slides/map/finding-food-data.xml Normal file
View File

@@ -0,0 +1,51 @@
<slide>
<title>Finding Food</title>
<subtitle>Getting The Data</subtitle>
<div effect="fade-out">
<blurb>SQLite</blurb>
<example><![CDATA[<?php
include 'distance.php';
header('Content-type: text/plain');
require '/home/derick/dev/zetacomponents/trunk/Base/src/ezc_bootstrap.php';
$d = ezcDbFactory::create( 'sqlite://' . dirname( __FILE__ ) . '/pois.sqlite' );
$wantedD = isset($_GET['d']) ? $_GET['d']: 1;
$q = $d->createSelectQuery();
$q->select('*')->from('poi');
if ( $_GET['cuisine'] !== 'all' )
{
$q->where($q->expr->eq('cuisine', $q->bindValue( $_GET['cuisine'] ) ) );
}
$s = $q->prepare();
$s->execute();
echo "lat\tlon\ttitle\tdescription\ticonSize\ticonOffset\ticon\r\n";
foreach( $s as $res) {
$e = distance2($_GET['lat'], $_GET['lon'], $res['lat'], $res['lon'] );
if ($e < $wantedD) {
echo $res['lat'], "\t", $res['lon'], "\t", $res['name'], "\t", sprintf('%.2f', $e). " km away\t16,16\t-8,-8\tpub.png\r\n";
}
}]]></example>
<blurb><link href='/presentations/slides/map/examples/fetch.php?cuisine=all&amp;lat=51.514&amp;lon=-0.116&amp;d=0.5'/></blurb>
</div>
<div effect="fade-in-out">
<blurb>Calculating Distance</blurb>
<example><![CDATA[<?php
function distance2($latA, $lonA, $latB, $lonB)
{
$latA = deg2rad($latA);
$lonA = deg2rad($lonA);
$latB = deg2rad($latB);
$lonB = deg2rad($lonB);
$deltaLat = ($latA - $latB);
$deltaLon = ($lonA - $lonB);
$d = sin($deltaLat/2) * sin($deltaLat/2) +
cos($latA) * cos($latB) * sin($deltaLon/2) * sin($deltaLon/2);
$d = 2 * asin(sqrt($d));
return $d * 6371.01;
}
]]></example>
</div>
</slide>

5
slides/map/finding-food-take2.xml Normal file
View File

@@ -0,0 +1,5 @@
<slide>
<title>Finding Food</title>
<iframe filename='examples/find-poi.php?default=mongo'/>
</slide>

60
slides/map/finding-food.xml Normal file
View File

@@ -0,0 +1,60 @@
<slide>
<title>Finding Food</title>
<div effect="fade-out">
<iframe filename='examples/find-poi.php'/>
</div>
<div effect="fade-in">
<example><![CDATA[
function init() {
map = new OpenLayers.Map ("map", {
eventListeners: {
"moveend": moveEndEvent
},
controls:[
]]></example>
<example><![CDATA[
function changeQuery()
{
cuisine = document.getElementById('amenity').value;
radiusInput = document.getElementById('radius');
source = document.getElementById('source').value;
if (source == 'sqlite') { script = 'fetch.php'; }
if (source == 'mysql') { script = 'fetch-mysql.php'; }
if (source == 'mongo') { script = 'fetch-mongo.php'; }
if (source == 'mongo2') { script = 'fetch-mongo-fixed.php'; }
center = map.getCenter().transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
pois.destroy();
pois = new OpenLayers.Layer.Text( "The Shops", {
location: "./" + script + "?cuisine=" + cuisine +
'&lat=' + center.lat + '&lon=' + center.lon + '&d=' + radiusInput.value,
projection: map.displayProjection
});
map.addLayer(pois);
multiFeature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(center.lon,center.lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
radiusInput.value * 1000 / Math.cos(center.lat / (180/Math.PI)), 10 + map.getZoom() * 2, 10
),
{
color: 'blue',
align: 'rt'
});
vectorLayer.removeAllFeatures();
vectorLayer.drawFeature(multiFeature);
vectorLayer.addFeatures([multiFeature]);
}
function moveEndEvent(event)
{
changeQuery();
}
]]></example>
</div>
</slide>

63
slides/map/flickr.xml Normal file
View File

@@ -0,0 +1,63 @@
<slide>
<title>Flickr</title>
<div effect="fade-out">
<iframe filename='examples/ol-flickr.html'/>
</div>
<div effect="fade-in-out">
<example><![CDATA[function newImageMarker(url, lat, lon)
{
w = 85 - ((19-map.getZoom())*4);
size = new OpenLayers.Size(w,w);
offset = new OpenLayers.Pixel(-(size.w/2), -(size.h/2));
icon = new OpenLayers.Icon(url, size, offset);
marker = new OpenLayers.Marker(
new OpenLayers.LonLat(lon, lat)
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
icon.clone()
);
marker.events.register(
'mousedown',
marker,
function(evt) { showImage(this.icon); OpenLayers.Event.stop(evt); }
);
markers.addMarker(marker);
}
function changeQuery()
{
markers.clearMarkers();
$.getJSON('fetch-flickr.php', function(data) {
$.each(data.items, function(i,item){
newImageMarker(item.url, item.lat, item.lon);
});
});
}
]]></example>
</div>
<div effect="fade-in">
<example result="1"><![CDATA[<?php
$d = ezcDbFactory::create( 'sqlite://' . dirname( __FILE__ ) . '/presentations/slides/map/examples/photos.sqlite' );
$q = $d->createSelectQuery();
$q->select('*')->from('photo')->orderBy( 'date_taken', ezcQuerySelect::DESC )->limit(100);
$s = $q->prepare();
$s->execute();
$items = array();
foreach ( $s as $photo )
{
$items[] = array(
'lon' => $photo['lon'],
'lat' => $photo['lat'],
'url' => $photo['thumb_url']
);
}
echo json_encode(array( 'items' => $items ) );
]]></example>
</div>
</slide>

18
slides/map/geonames-reverse-lookup.xml Normal file
View File

@@ -0,0 +1,18 @@
<slide>
<title>Reverse Geocoding</title>
<subtitle>Nominatim</subtitle>
<example result="1"><![CDATA[<?php
$lat = 48.8583;
$lon = 2.2945;
$baseUrl = 'http://ws.geonames.org/findNearbyPlaceNameJSON?username=derick&style=full&';
$data = file_get_contents( "{$baseUrl}lat={$lat}&lng={$lon}" );
$data = json_decode( $data )->geonames[0];
echo $data->toponymName, ', ', $data->countryName, "\n";
echo $data->timezone->timeZoneId, "\n";
print_r( $data );
?>]]></example>
<blurb>http://www.geonames.org/export/web-services.html#findNearbyPlaceName</blurb>
</slide>

BIN
slides/map/globe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

41
slides/map/google-geolocation-get-wlan.xml Normal file
View File

@@ -0,0 +1,41 @@
<slide>
<title>Getting the WLAN info</title>
<example result="1"><![CDATA[<?php
define( 'NM', "org.freedesktop.NetworkManager" );
$d = new Dbus( Dbus::BUS_SYSTEM, true );
$n = $d->createProxy( NM, "/org/freedesktop/NetworkManager", NM);
$wifi = array();
foreach ($n->GetDevices()->getData() as $device)
{
$device = $device->getData();
$dev = $d->createProxy( NM, $device, "org.freedesktop.DBus.Properties");
$type = $dev->Get(NM . ".Device", "DeviceType")->getData();
if ( $type == 2 ) // WI-FI
{
$wifiDev = $d->createProxy(NM, $device, NM . ".Device.Wireless");
foreach( $wifiDev->GetAccessPoints()->getData() as $ap )
{
$apDev = $d->createProxy(NM, $ap->getData(), "org.freedesktop.DBus.Properties");
$props = $apDev->GetAll(NM . ".AccessPoint")->getData();
$ssid = '';
foreach( $props['Ssid']->getData()->getData() as $n )
{
$ssid .= chr($n);
}
$wifi[] = array('ssid' => $ssid, "mac_address" => $props['HwAddress']->getData() );
}
}
}
$request = array( 'version' => '1.1.0', 'host' => 'example.com', 'wifi_towers' => $wifi );
$c = curl_init();
curl_setopt( $c, CURLOPT_URL, 'https://www.google.com/loc/json' );
curl_setopt( $c, CURLOPT_POST, 1 );
curl_setopt( $c, CURLOPT_POSTFIELDS, json_encode( $request ) );
curl_setopt( $c, CURLOPT_RETURNTRANSFER, true );
$result = json_decode( curl_exec( $c ) )->location;
echo "<a href='http://openstreetmap.org/?lat={$result->latitude}&amp;lon={$result->longitude}&amp;zoom=18'>here</a>\n";
?>]]></example>
</slide>

21
slides/map/google-geolocation.xml Normal file
View File

@@ -0,0 +1,21 @@
<slide>
<title>Google Geo-location Service</title>
<example result='1'><![CDATA[<?php
$request = array(
'version' => '1.1.0',
'host' => 'example.com',
'wifi_towers' => array(
array( 'ssid' => 'ZyXEL_3934rar', 'mac_address' => "00:02:CF:E4:60:CE" )
)
);
$c = curl_init();
curl_setopt( $c, CURLOPT_URL, 'https://www.google.com/loc/json' );
curl_setopt( $c, CURLOPT_POST, 1 );
curl_setopt( $c, CURLOPT_POSTFIELDS, json_encode( $request ) );
curl_setopt( $c, CURLOPT_RETURNTRANSFER, true );
var_dump( json_decode( curl_exec( $c ) ) );
]]></example>
<blurb>http://code.google.com/intl/es-ES/apis/gears/geolocation_network_protocol.html</blurb>
</slide>

37
slides/map/googlemap.xml Normal file
View File

@@ -0,0 +1,37 @@
<slide>
<title>Showing a Map</title>
<subtitle>Google Maps</subtitle>
<div effect="fade-out">
<iframe filename='examples/googlemap.html' image='openlayers.png'/>
</div>
<div effect="fade-in">
<example><![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.153293, -76.72534);
var myOptions = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
]]></example>
</div>
</slide>

8
slides/map/grid-systems.xml Normal file
View File

@@ -0,0 +1,8 @@
<slide>
<title>Different coordinate-systems</title>
<break lines="2"/>
<image filename="osgrid.png" attr="(c) OpenStreetMap contributors, CC-BY-SA"/>
<blurb align="center">(2° × 2°) |ff0000|WGS84 Latitude and Longitude| (1° × 1°)</blurb>
<blurb align="center">(100km × 100km) |0000ff|Ordnance Survey National Grid| (10km × 10km)</blurb>
</slide>

BIN
slides/map/helmert1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
slides/map/helmert2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

50
slides/map/html-location-services.xml Normal file
View File

@@ -0,0 +1,50 @@
<slide>
<title>Finding the user</title>
<subtitle>Using JavaScript to locate the user</subtitle>
<div effect="fade-out">
<iframe filename='examples/find-me.html'/>
</div>
<div effect="fade-in">
<example><![CDATA[
function getPosition()
{
navigator.geolocation.getCurrentPosition(iKnowWhereYouAre, notTheFaintestClue, {timeout:30000});
}
function notTheFaintestClue()
{
}
function iKnowWhereYouAre(position)
{
var lonLat = new OpenLayers.LonLat(
position.coords.longitude, position.coords.latitude
).transform(map.displayProjection, map.projection);
map.setCenter(lonLat, zoom);
center = map.getCenter().
transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
factor = Math.cos(center.lat / (180/Math.PI)), 10 + map.getZoom() * 2;
multiFeature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(
center.lon, center.lat
).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
position.coords.accuracy / factor, 10
),
{
color: 'blue',
align: 'rt'
}
);
vectorLayer.removeAllFeatures();
vectorLayer.drawFeature(multiFeature);
vectorLayer.addFeatures([multiFeature]);
}
]]></example>
</div>
</slide>

BIN
slides/map/map-calculations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

5
slides/map/meridian.xml
View File

@@ -1,5 +1,6 @@
<slide>
<title>Greenwich Meridian</title>
<iframe filename='examples/ol-meridian.html' image='ol-meridian.png'/>
<iframe filename='examples/ol-meridian.html'/>
<blurb>|ff0000|Greenwich Meridian|</blurb>
<blurb>|0000ff|IRTS Meridian|</blurb>
</slide>

BIN
slides/map/national-grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 KiB

6
slides/map/national-grid.xml Normal file
View File

@@ -0,0 +1,6 @@
<slide>
<title>National Grid</title>
<image filename="national-grid.png"/>
<blurb align="center">*TF*: 100x100km square — *TF45*: 10x10km square<br/>*TF458672*: point with 100m accuracy (545800,367200)</blurb>
</slide>

23
slides/map/nominatim-lookup.xml Normal file
View File

@@ -0,0 +1,23 @@
<slide>
<title>Finding where a place is</title>
<subtitle>Nominatim</subtitle>
<div>
<example result="1"><![CDATA[<?php
$name = urlencode( ':-:location:-:' );
$baseUrl = 'http://nominatim.openstreetmap.org/search?format=json&q=';
$data = file_get_contents( "{$baseUrl}{$name}&limit=1&addressdetails=1" );
foreach ( json_decode( $data ) as $elem )
{
printf( "%s, %s @ %.3f, %.3f\n",
$elem->address->city, $elem->address->country,
$elem->lat, $elem->lon
);
print_r( $elem );
}
?>]]></example>
<blurb>http://wiki.openstreetmap.org/wiki/Nominatim</blurb>
</div>
</slide>

17
slides/map/nominatim-reverse-lookup.xml Normal file
View File

@@ -0,0 +1,17 @@
<slide>
<title>Reverse Geocoding</title>
<subtitle>Nominatim</subtitle>
<example result="1"><![CDATA[<?php
$lat = 48.8583;
$lon = 2.2945;
$z = 18;
$baseUrl = 'http://nominatim.openstreetmap.org/reverse?format=json&';
$data = file_get_contents( "{$baseUrl}lat={$lat}&lon={$lon}&zoom={$z}" );
$data = json_decode( $data );
echo $data->display_name, "\n";
print_r( $data );
?>]]></example>
<blurb>http://wiki.openstreetmap.org/wiki/Nominatim</blurb>
</slide>

22
slides/map/openlayers-location.xml Normal file
View File

@@ -0,0 +1,22 @@
<slide>
<title>Showing a Map</title>
<subtitle>Looking up latitude and longitude from a location</subtitle>
<div effect="fade-out">
<iframe filename='examples/openlayers-nominatim.php?name=:-:location:-:' image='openlayers-nominatim.png'/>
</div>
<div effect="fade-in">
<example result="1"><![CDATA[
<?php
$name = urlencode( ':-:location:-:' );
$baseUrl = 'http://nominatim.openstreetmap.org/search?format=json&q=';
$data = file_get_contents( "{$baseUrl}{$name}&limit=1" );
$json = json_decode( $data );
$lat = $json[0]->lat;
$lon = $json[0]->lon;
?>
var lat=<?php printf( '%0.3f', $lat ); ?>
var lon=<?php printf( '%0.3f', $lon ); ?>
<?php var_dump( $json[0] ); ?>
]]></example>
</div>
</slide>

51
slides/map/openlayers-simple.xml Normal file
View File

@@ -0,0 +1,51 @@
<slide>
<title>Showing a Map</title>
<subtitle>OpenStreetMap</subtitle>
<div effect="fade-out">
<iframe filename='examples/openlayers.html' image='openlayers.png'/>
</div>
<div effect="fade-in">
<example><![CDATA[
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<style>
html,body { margin: 0; padding: 0; width: 1004px; height: 590px; }
#map { width: 100%; height: 100%; border: 1px solid black; float: left; z-index: -1; }
div.olControlAttribution { bottom: 0.5em; font-size: 70%; }
</style>
<script src='OpenLayers.js'></script>
<script src='osm/OpenStreetMap.js'></script>
<script type="text/javascript">
var map; //complex object of type OpenLayers.Map
var lat=54.417
var lon=-3.51
var zoom=14
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
var lonLat = new OpenLayers.LonLat(lon, lat).
transform(map.displayProjection, map.projection);
map.setCenter(lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<div id='map'></div>
</body>
</html>]]></example>
</div>
</slide>

BIN
slides/map/osgrid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

27
slides/map/osm-data.xml Normal file
View File

@@ -0,0 +1,27 @@
<slide>
<title>The Data</title>
<list>
<bullet>Nodes (Lat/Lon point)<br/>
<example><![CDATA[<node id='459517295' lat='50.0100766' lon='8.3162402' user='WoGo' timestamp='2009-08-09T11:45:33Z' uid='152395' version='1' changeset='2083951'>]]></example>
</bullet>
<bullet>Ways (Ordered interconnection of nodes)</bullet>
<bullet>Areas (Closed ways)
<example><![CDATA[<way id='76174399' user='Derick Rethans' uid='37137' timestamp='2010-09-06T08:30:14Z' version='1' changeset='5695697'>
<nd ref='898861293'/>
<nd ref='898861305'/>
<nd ref='898861298'/>
<nd ref='898861315'/>
<nd ref='898861293'/>
...
</way>]]></example>
</bullet>
<bullet>Tags (Describe an element)
<example><![CDATA[<tag k='addr:housenumber' v='375'/>
<tag k='addr:street' v='Kilburn High Road'/>
<tag k='amenity' v='pub'/>
<tag k='building' v='yes'/>
<tag k='name' v='North London Tavern'/>]]></example>
</bullet>
</list>
</slide>

12
slides/map/osm-parse-into-db.xml Normal file
View File

@@ -0,0 +1,12 @@
<slide>
<title>Massage the Data</title>
<blurb>Process:</blurb>
<list>
<bullet>Use XAPI to fetch data</bullet>
<bullet>Parse XML file with PHP into a DB</bullet>
<bullet>Query database</bullet>
<bullet>Show data</bullet>
<bullet>Profit!</bullet>
</list>
</slide>

17
slides/map/osm-what.xml Normal file
View File

@@ -0,0 +1,17 @@
<slide>
<title>OpenStreetMap</title>
<image filename="osm.png" align="center"/>
<list>
<bullet>*"Wikipedia for Maps"*</bullet>
<bullet>Licensed under the Creative Commons Attribution-ShareAlike 2.0 licence (CC-BY-SA):
<blurb>You are free to copy, distribute, transmit and adapt our maps
and data, as long as you credit OpenStreetMap and its contributors. If
you alter or build upon our maps or data, you may distribute the result
only under the same licence.</blurb>
</bullet>
<bullet>Rendered map: <link href='http://openstreetmap.org/'/></bullet>
<bullet>A lot of data is not rendered, but is available.</bullet>
</list>
</slide>

28
slides/map/osm-xapi.xml Normal file
View File

@@ -0,0 +1,28 @@
<slide>
<title>Fetching OSM data</title>
<example>wget
http://osmxapi.hypercube.telascience.org/api/0.6/node
[amenity=pub]
[bbox=-2.401,53.394,-2.104,53.551]
-O pubs.osm</example>
<example><![CDATA[<?xml version='1.0' encoding='UTF-8'?>
<osm version='0.6' generator='xapi: OSM Extended API 2.0' attribution='http://wiki.openstreetmap.org/wiki/Attribution' xmlns:xapi='http://www.informationfreeway.org/xapi/0.6' xapi:uri='/api/0.6/node[amenity=pub][bbox=-2.401,53.394,-2.104,53.551]' xapi:planetDate='20101006' xapi:copyright='2010 OpenStreetMap contributors' xapi:license='Creative commons CC-BY-SA 2.0' xapi:bugs='For assistance or to report bugs contact 80n80n@gmail.com' xapi:instance='zappyHyper'>
<bounds minlat='53.394' minlon='-2.401' maxlat='53.551' maxlon='-2.104'/>
<node id='275332052' lat='53.548238' lon='-2.3958373' version='2' changeset='4395635'
user='Steeley' uid='101150' visible='true' timestamp='2010-04-11T17:08:16Z'>
<tag k='amenity' v='pub'/>
<tag k='name' v='The Saddle'/>
</node>
...
<node id='30732192' lat='53.4647746' lon='-2.2319186' version='3' changeset='5810586'
user='geordiemanc' uid='345640' visible='true' timestamp='2010-09-18T11:12:50Z'>
<tag k='address' v='325 Oxford Road'/>
<tag k='amenity' v='pub'/>
<tag k='name' v='Kro Bar'/>
<tag k='phone' v='01612743100'/>
<tag k='postal_code' v='M13 9PG'/>
<tag k='real_ale' v='yes'/>
</node>]]></example>
</slide>

BIN
slides/map/osm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
slides/map/paper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
slides/map/planets.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

7
slides/map/planets.xml Normal file
View File

@@ -0,0 +1,7 @@
<slide>
<title>Planets</title>
<break lines="2"/>
<image filename="planets.jpg"/>
<blurb align="center">Coordinates have to be agreed on; and can be tricky</blurb>
</slide>

BIN
slides/map/projections.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

7
slides/map/projections.xml Normal file
View File

@@ -0,0 +1,7 @@
<slide>
<title>Map Projections</title>
<break lines="2"/>
<image filename="projections.jpg"/>
<blurb align="center">Different projections have different strengths</blurb>
</slide>

23
slides/map/resources.xml Normal file
View File

@@ -0,0 +1,23 @@
<slide template="white" type="title">
<title>Resources</title>
<blurb>:-:email:-: - twitter: @:-:twitter:-:</blurb>
<blurb>:-:url:-:</blurb>
<blurb>:-:joindin:-:</blurb>
<break/>
<blurb><link href='http://openstreetmap.org'/></blurb>
<blurb><link href='http://dev.openlayers.org/docs/files/OpenLayers-js.html'/></blurb>
<blurb><link href='http://data.london.gov.uk/taxonomy/categories/transport'/></blurb>
<blurb><link href='http://www.flickr.com/services/api/'/></blurb>
<blurb><link href='http://www.ordnancesurvey.co.uk/oswebsite/gps/information/coordinatesystemsinfo/guidecontents/index.html'/></blurb>
<blurb><link href='http://en.wikipedia.org/wiki/Helmert_transformation'/></blurb>
<blurb><link href='http://code.google.com/apis/maps/documentation/javascript/'/></blurb>
<blurb><link href='http://wiki.openstreetmap.org/wiki/Nominatim'/></blurb>
<blurb><link href='http://developer.yahoo.com/geo/placefinder/guide/'/></blurb>
<blurb><link href='http://www.geonames.org/export/web-services.html'/></blurb>
<blurb><link href='http://code.google.com/intl/es-ES/apis/gears/geolocation_network_protocol.html'/></blurb>
<blurb><link href='http://www.mongodb.org/display/DOCS/Geospatial+Indexing'/></blurb>
<blurb><link href='http://en.wikipedia.org/wiki/Gpx'/></blurb>
</slide>

7
slides/map/reverse.xml Normal file
View File

@@ -0,0 +1,7 @@
<slide>
<title>Reverse Geocoding</title>
<subtitle>Finding a name for coordinates</subtitle>
<iframe filename='examples/ol-nominatim.html'/>
</slide>

BIN
slides/map/tf.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
slides/map/tf45.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

35
slides/map/tube-gpx.xml Normal file
View File

@@ -0,0 +1,35 @@
<slide>
<title>Plotting data</title>
<div effect="fade-out">
<iframe filename='examples/ol-tubes.html'/>
</div>
<div effect="fade-in">
<example><![CDATA[
var lgpx = new OpenLayers.Layer.GML("Bakerloo", "BAK.gpx", {
format: OpenLayers.Format.GPX,
style: {strokeColor: "#ae6118", strokeWidth: 3, strokeOpacity: 0.3},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
]]></example>
<example><![CDATA[<?xml version="1.0" encoding="UTF-8"?>
<gpx
version="1.0"
creator="GPSBabel - http://www.gpsbabel.org"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.topografix.com/GPX/1/0"
xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
<trk><name>Elephant &amp; Castle - Baker Street - Harrow &amp; Wealdstone</name>
<trkseg>
<trkpt lat="51.5434596" lon="-0.2752602">
<name>Stonebridge Park</name>
</trkpt>
<trkpt lat="51.552765" lon="-0.2971141">
<name>Wembley Central</name>
</trkpt>
<trkpt lat="51.5624687" lon="-0.3036124">
<name>North Wembley</name>
]]></example>
</div>
</slide>

21
slides/map/yahoo-lookup.xml Normal file
View File

@@ -0,0 +1,21 @@
<slide>
<title>Finding where a place is</title>
<subtitle>Yahoo! PlaceFinder</subtitle>
<example result="1"><![CDATA[<?php
$name = urlencode( ':-:location:-:' );
$baseUrl = 'http://where.yahooapis.com/geocode?flags=GJT&appid=[yourappidhere]&q=';
$data = file_get_contents( "{$baseUrl}{$name}" );
foreach ( json_decode( $data )->ResultSet->Results as $elem )
{
printf( "%s, %s @ %.3f, %.3f\n",
$elem->level3, $elem->level0,
$elem->latitude, $elem->longitude
);
print_r( $elem );
}
?>]]></example>
<blurb>http://developer.yahoo.com/geo/placefinder/guide/</blurb>
</slide>

18
slides/map/yahoo-reverse-lookup.xml Normal file
View File

@@ -0,0 +1,18 @@
<slide>
<title>Reverse Geocoding</title>
<subtitle>Yahoo! PlaceFinder</subtitle>
<example result="1"><![CDATA[<?php
$lat = 48.8583;
$lon = 2.2945;
$baseUrl = 'http://where.yahooapis.com/geocode?gflags=R&flags=GJQT&q=';
$data = file_get_contents( "{$baseUrl}{$lat},{$lon}" );
$data = json_decode( $data )->ResultSet->Results[0];
echo $data->level3, ', ', $data->level0, "\n";
echo $data->timezone, "\n";
print_r( $data );
?>]]></example>
<blurb>http://developer.yahoo.com/geo/placefinder/guide/</blurb>
</slide>