Illuminated Hacks -- Where 2.0 101 Tutorial

Embed Size (px)

DESCRIPTION

Some of my favorite hacks for the pleasure of your hacking sensibility with the hopeful outcome of illuminating best practices of putting your website on the geoweb and hinting at the means to get exactly what you need. cause I likes the hacks. hacks are rad.

Citation preview

  • 1. Illuminated Hacks Mikel Maron Where 2.0 101 Tutorial [email_address] http://brainoff.com/

2. Some of my favorite hacks for the pleasure of your hacking sensibility with the hopeful outcome of illuminating best practices of putting your website on the geoweb and hinting at the meansto get exactly what you need. cause I likes the hacks. hacks are rad. 3. Upcoming StreetView 4. Bangladesh Boat Journey 5. geocodr 6. UNDP Environment Projects 7. Upcoming StreetView 8. http://googlesightseeing.com/2008/05/07/street-view-sabotage/ 9. http://gregsadetsky.com/?p=81 10. http://cbk0.google.com/cbk?output=xml&ll=37.784692,-122.39303 2008 GoogleI-80I-80I-80 11. http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay Official StreetView API panoClient = new GStreetviewClient();latlng = new GLatLng(37.784692,-122.39303);panoClient.getNearestPanorama(latlng, showPanoData); function showPanoData(panoData) { if (panoData.code != 200) { GLog.write('showPanoData: Server rejected with code: ' + panoData.code); return; } console.log( panoData.location.latlng ); } 12. http://cbk0.google.com/cbk?output=tile&zoom=2&y=0&x={0,3}&panoid=j-LK2ptQjG2w0EfQ1-6zMQ 13. Official StreetView API 14. http://upcoming.yahoo.com/event/461321/ 15. http://flickr.com/photos/tags/upcoming:event=461321 16. http://flickr.com/photos/10111/2467558023/ 17. Machine Tags namespace:predicate=value geobloggers user controlled, just normal tags structured data geo:lat=37.784692 geo:long=-122.39303 geotagged camel:humpcount=1 loosely coupled lastfm:event=97947 iso:isbn=0713998393 http://www.flickr.com/groups/api/discuss/72157594497877875/ http://adactio.com/journal/1274/ 18. machine_tags (Optional) Aside from passing in a fully formed machine tag, there is a special syntax for searching on specific properties : * Find photos using the 'dc' namespace : "machine_tags" => "dc:" * Find photos with a title in the 'dc' namespace : "machine_tags" => "dc:title=" * Find photos titled "mr. camera" in the 'dc' namespace : "machine_tags" => "dc:title="mr. camera" * Find photos whose value is "mr. camera" : "machine_tags" => "*:*="mr. camera"" * Find photos that have a title, in any namespace : "machine_tags" => "*:title=" * Find photos that have a title, in any namespace, whose value is "mr. camera" : "machine_tags" => "*:title="mr. camera"" * Find photos, in the 'dc' namespace whose value is "mr. camera" : "machine_tags" => "dc:*="mr. camera"" Multiple machine tags may be queried by passing a comma-separated list. The number of machine tags you can pass in a single query depends on the tag mode (AND or OR) that you are querying with. "AND" queries are limited to (16) machine tags. "OR" queries are limited to (8). http://www.flickr.com/services/api/flickr.photos.search.html a hack all grown up 19. http://upcoming.yahoo.com/place/hCca8XSYA5nn0X1Sfw 20. GeoRSS http://upcoming.yahoo.com/syndicate/v2/place/hCca8XSYA5nn0X1Sfw May7, Manifesto SF at The StudMANIFESTO - Leave the boys at home, this is music for men! Deep house, classic disco. Dance the night away! David Harness & Cez Every Wed - 9pm to 2am players.
http://upcoming.yahoo.com/event/ 600466 /http://upcoming.yahoo.com/event/600466/ http://upcoming.yahoo.com/event/60046/#comments37.7697-122.42Thu, 07 May 2008 15:50:49 -07002008-05-08T15:50:49-07:00Manifesto SF2008-05-07T21:00:00Zhttp://upcoming.yahoo.com/venue/16322/http://upcoming.yahoo.com/venue/16322/ The Stud Harrison @ 9 thStreetSan FranciscoCalifornia94103United Stateshttp://upcoming.yahoo.com/venue/16322/ 21. Proposals Reference External Geometries Simple Features (for SQL) Multiple Locations elev floor radius featuretypetag relationshiptag featurename georss.org Geometries Attributes SimpleGMLRSS 1.0RSS 2.0Atom Flavors RSS formats 22. Reguest Upcoming GeoRSS Feed For each item, parse out lat, lng, event-id, venue-name With lat/lng, get panoid from StreetView XML api Request StreetView tiles Post images to flickr with upcoming:event maching tag Wait for upcoming squirrels to run Do a little dance 23. #!/usr/bin/ruby require 'rexml/document' include REXML require 'net/http' require 'cgi' require 'uri' upcomingrss = "http://upcoming.yahoo.com/syndicate/v2/place/hCca8XSYA5nn0X1Sfw--" panoxml = "http://cbk0.google.com/cbk?output=xml&ll=" panoimg = "http://cbk0.google.com/cbk?output=tileamp;zoom=2amp;y=0amp;panoid=" url = URI.parse(upcomingrss) req = Net::HTTP::Get.new(url.path) res = Net::HTTP.start(url.host, url.port) {|http| http.request(req) } doc = Document.new( res.body ) XPath.each( doc, "//item/") { |element| begin lat = XPath.first( element, "geo:lat" ).text lng = XPath.first( element, "geo:long" ).text venue = XPath.first( element, ".//xCal:x-calconnect-venue-name" ).text guid = XPath.first( element, "guid" ).text upid = /http://upcoming.yahoo.com/event/(.*)//.match(guid)[1] panourl = URI.parse(panoxml + lat + "," + lng) panoreq = Net::HTTP::Get.new(panourl.path + "?" + panourl.query) panores = Net::HTTP.start(panourl.host, panourl.port) {|http| http.request(panoreq) } panodoc = Document.new( panores.body ) panoid = XPath.first(panodoc, "//data_properties").attributes["pano_id"] for i in 0..3 system("wget " + panoimg + panoid + "amp;x=" + i.to_s + " -O img/" + panoid + ".jpg") tags = "geo:lat=" + lat + " geo:long=" + lng + " upcoming:event=" + upid system("./flickr.pl img/" + panoid + ".jpg '" + venue + "' '" + tags + "'") end rescue end } 24. #!/usr/bin/perl use Flickr::Upload; use Flickr::API; my $api_key='b78f44c2721ef1f146a6d83eb9559f33';my $api_secret = 'd05b91178ddb026c'; my $api = new Flickr::API( {'key' => $api_key,'secret' => $api_secret }, 'perms' => 'write' ); my $auth_token = '72157600303046027-ce35689cc50c1afc'; my $ua = Flickr::Upload->new( { 'key' =>$api_key, 'secret' => $api_secret } ); $photo_id = $ua->upload( auth_token =>$auth_token, photo=>"@ARGV[0]",email=>'[email protected]', title=>"@ARGV[1]", description=>'', tags =>"@ARGV[2]", is_public => 1, is_friend => 1, is_family => 1 ) ; 25. http://upcoming.yahoo.com/event/600466 Studly! 26. http://www.flickr.com/photos/8721477@N08/ 27. Improvements? Directionality Undistorted 28. 29. Bangladesh Boat Journey project led by Dharmafly http://www.bbc.co.uk/worldservice/bangladeshboat/ http://dharmafly.com/ 30. http://www.flickr.com/photos/mikel_maron/2304719567/ Dharmafly. Prem melted my brain 31. Hack 1 Easily geotag posts and pics 32. http://twittervision.com/ 33. http://twitter.com/bangladeshboat 34. http://microformats.org/wiki/microblogging-nanoformats Nanoformats! L: o Used to define a location o Example: Good place to visitL: Place Georges Pompidou, Paris, France o Example2: Good place to visitL: Place Georges Pompidou, Paris, 75004 o Example3: Good place to visitL:48.860500,2.352260 o Text Syntax:L: or L:at the end ofa tweet o Geo Syntax: L: + info: (Section 3.4.2 of RFC2426) 35. nanoformat parsing engine suite 36. A Model for GeoWeb friendliness http://dev.opera.com/articles/view/location-based-publishing-and-services/ http://dharmafly.com/blog/bangladeshboat 37. TwitterVision http://twittervision.com/bangladeshboat 38. Geo Microformats https://addons.mozilla.org/en-US/firefox/addon/4106 39. hAtom microformat

  • The month long BBC Bangladesh boat trip has come to an end, and what a momentous four weeks it's been!

    • Last updated by Ben Sutherland and Alastair Lawson on 28th November 2007
    40. hAtom microformat http://tools.microformatic.com/transcode/rss/hatom/www.bbc.co.uk/worldservice/bangladeshboat/ 41. Google Maps http://maps.google.com/maps?q=http://www.bbc.co.uk/worldservice/bangladeshboat/rss.xml&z=8 42. mapufacture http://mapufacture.com/feeds/1009982 43. Google Earth http://bangladeshboat.welcomebackstage.com/feed/?format=kml&numPosts=all 44. iCal feed 45. API http://bangladeshboat.welcomebackstage.com/ 46. http://bangladeshboat.welcomebackstage.com/ 47. Greasemonkey API http://bangladeshboat.welcomebackstage.com/ 48. Pacer Feeds http://mapufacture.com/users/{user-id}/pacer 49. Hack 2 Free the Bubble! http://www.bbc.co.uk/worldservice/bangladeshboat/js/mashup.js 50. Extreme DOM 51. http://maps.google.com/intl/en_us/mapfiles/iw2.png 52. Explode the InfoWindow divs = document.getElementsByTagName('div'); for (var i=0; i < divs.length; i++) { if (divs[i].style.overflow == "hidden") { divs[i].style.overflow = "visible"; } } 53. 54. Capture the Window Opening function CustomBalloon(map) { var that = this; this.gmap = map; this.visible = false; this.closed = true; this.infoWindow = this.gmap.getInfoWindow(); // Set global settings.map.custom_infowindow to false// for default GMaps behavior if (settings.map.custom_infowindow) { GEvent.addListener(this.gmap, "infowindowopen", function() { that.closed = false; if (that.grabbed) { // infoWindow opened off-screen -> move to correct location that.setPosition(); if (!that.visible){ that.show(); } } else { // wait until first infoWindow initialized// -> grab balloon element that.grabGMapInfoWindow(); } }); .. } 55. Grab the InfoWindow grabGMapInfoWindow: function() { var that = this; this.balloon =this.infoWindow[settings.map.gmElements.infoWindow.balloon].parentNode; this.balloon.parentNode.removeChild(this.balloon); this.balloonShadow =this.infoWindow[settings.map.gmElements.infoWindow.shadow].parentNode; this.balloonShadow.parentNode.removeChild(this.balloonShadow); this.newBalloon = document.body.appendChild(extend(cE('div'),{ id: 'balloon' })); this.newBalloon.appendChild(this.balloon); this.hide(); this.infoWindow.hide = function() { that.hide(); }; this.grabbed = true; applyFilters('customBalloonGrabGMapInfoWindow', this); } 56. move the window setPosition: function() { var x; var y; var a; //L[0] = div containing icon; L[1] is shadow a = findPos(this.marker[settings.map.gmElements.marker.icon_imgs][0]); x = a[0]; y = a[1]; // balloon.firstChild.lastChild is an image stretched to cover // the entire visible balloon, so it's the place to get width/height // arrowx, arrowy are offsets for "arrow" portion of the balloonvar arrowx = -25; var arrowy = 70; x -= parseInt(this.balloon.firstChild.lastChild.style.width,10)/2 + arrowx; y -= parseInt(this.balloon.firstChild.lastChild.style.height,10) + arrowy; // offset by the specified offset position x -= this.offset.x; y -= this.offset.y; this.balloon.firstChild.style.left = x + "px"; this.balloon.firstChild.style.top = y +"px"; applyFilters('customBalloonSetPosition', this); } 57. findPos // Position of an object on screen function findPos(obj) { var curleft = 0; var curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while ((obj = obj.offsetParent)) { curleft += obj.offsetLeft; curtop += obj.offsetTop; } } return [curleft, curtop]; } 58. http://www.bbc.co.uk/worldservice/bangladeshboat/js/mashup.js 59. cute cow code break lolcows! mooove! 60. geocodr http://geocodr.net/ 61. mapping flickr tags - europe http://brainoff.com/openplan/flickr/ 62. foot and mouth http://brainoff.com/openplan/flickr/ 63. worldKit some Perl serving WMS requests (I'll spare you) flickr tag tiles 64. nave Flickr geocoding http://brainoff.com/flickr/geocodrer/ sub handle_fl { my ($e, %attr); parseElem($e,attr,@_); if ($e eq "photo") { $lat += $attr{'latitude'}; $lng += $attr{'longitude'}; $count++; } } $ua = LWP::UserAgent->new('worldKit','http://brainoff.com/worldkit/ @'); $response = $ua->get( $flickrurl . "tags=$tags" ); if (defined($response)) { if ($response->is_success()) { $xp = new XML::Parser(Handlers => {Start => &handle_fl, }); eval { $xp->parse($response->content); }; } else { die; } } $lat = $lat / $count; $lng = $lng / $count; print "$tags
    "; print "$lat, $lng
    "; print "GMap"; 65. http://brainoff.com/flickr/geocodrer/ http://brainoff.com/flickr/geocoder/?tags=santa+cruz santacruz 31.219397388, -104.796292444 66. k-means clustering http://en.wikipedia.org/wiki/K-means 67. smarter Flickr geocoding function geocode($key, $place,$searchmode, $sortmode, $format, $bbox, $numresults,$numclusters, $tryagain ) { $error = "1"; $f = new phpFlickr('1b5c444be51e50c05eeeed1b72b8747f'); $resp = $f->photos_search(array($searchmode => $place, 'bbox' => $bbox, 'per_page' => $numresults,'sort' => $sortmode, 'tag_mode' => 'all', 'extras' => 'geo', )); if ($resp){ $cnt ="0"; $datapoints = array(); foreach ($resp['photo'] as $photo) { $photolat = $photo['latitude']; $photolon = $photo['longitude']; array_push($datapoints,new DataPoint((float)$photolat,(float)$photolon,$photo['title'])); $cnt++; } 68. smarter Flickr geocoding $jca = new JCA($numclusters,$numresults * 2 ,$datapoints); $jca->startAnalysis(); $clusters = $jca->getClusterOutput(); $largestClust = 0; $largestClustSize = 0; for ($i=0; $i $largestClustSize) { $largestClustSize =count($tempCluster); $largestClust = $i; } }//for $cX = $jca->getCluster($largestClust)->getCentroid()->getCx(); $cY = $jca->getCluster($largestClust)->getCentroid()->getCy(); } 69. rockin 70. http://geothings.ning.com/Flickr/flickrgeocodr_cluster.php to output more detailed information regarding the clusters themselvesin REST XML or JSON. You will need to create a query string. The only required key-value pair is "place", and it will use the other values on their default settings. *place= the placename to search for. *format = json|xml (default xml). *searchmode= tags|text (default tags) (text searchs tags, title and description). *sortmode= interestingness-desc|relevance| (or any other values from Flickr API)(default interestingness-desc). *bbox= any min_lon, min_lat, max_lon, max_lat Comma separated, no spaces. Good for limiting to continent / country. (default world -180.0,-90.0,180.0,90.0). *numresults= 5 to 500 (default 50) Number of photo results to process fromFlickr, more will slow things down,but may increase sample size, and accuracy. *numclusters= 2 to 20 (default 3) Number of clusters to use internally, experiment with this, I find 3 and 4 fine. *xn_auth =no - a Ning tweak to bypass Ning authenitcation, speeds things up. *showpoints= true|false (defaults to false) Returns photos in each cluster (link to photo, and link url) *showclusters= true|false (defaults to true) format = xml or json (default is xml)http://geocodr.net/FlickrGeocodrDocs.php 71. http://geothings.ning.com/Flickr/flickrgeocodr_cluster.php?place=santa+cruz&numclusters=5&numresults=500 cluster010-49.734894-72.9383211santa cruz-50.483625,-73.280869,-49.280298,-72.321281cluster117836.961319095506-122.02093021348santa cruz36.922587,-122.120348,37.025473,-121.854225cluster2649.9303338333331.7630273333333santa cruz43.769071,-1.70371,53.4371,11.261426cluster35138.893761862745-9.4491147254902santa cruz28.454712,-16.249337,39.164552,-5.990155cluster4537.1452402-122.2436208santa cruz37.000924,-122.394363,37.251595,-122.1129621 72. Cluster 2: Santa Cruz, Portugal 73. Cluster 3: Santa Cruz, Argentina 74. Kite Hill, San Francisco 75. Kite Hill, San Francisco, Google 76. headmap manifesto http://www.technoccult.com/library/headmap.pdf 77. http://geothings.ning.com/Flickr/flickrgeocodr.php?place=sadness &bbox=-74.06021118164062,40.694175391548754,-73.86314392089844,40.86108317321337 &searchmode=text&sortmode=relevance&numresults=100&numclusters=4&xn_auth=no 40.767735142857-73.974891142857sadness1 78. sadness in new york! http://maps.google.com/maps?q=40.720959166667%2C-73.995379 79. sadness in new york! http://maps.google.com/maps?q=40.720959166667%2C-73.995379 80. global sadness in ... switzerland! 81. Other Geometries, Bay to Breakers http://geobloggers.com/archives/2008/04/28/making-sense-of-the-world-web20expo-slides-are-online/ thanks Dan Catt! 82. Crowd Sourced Reverse Geocoding http://geobloggers.com/archives/2008/04/28/making-sense-of-the-world-web20expo-slides-are-online/ thanks Dan Catt! 83. 84. UNDP Environment Projects http://europeandcis.undp.org/environment/#map 85. Hacks 1 Geotag Projects * RSS -> Mapufacture -> GeoRSS Fit in the layout * Lightbox maps Plot Custom GeoRSS/Layers * Mapstraction/MGeoRSS 86. Half a world of projectscustom CMS w/ no maps http://europeandcis.undp.org/environment/show/3D245417-F203-1EE9-B535882303FB38F5 87. Vanilla RSS of UNDP Projects http://europeandcis.undp.org/home/rss?feed=projects&a=121676,121677,121678,121679,121680,121681&showTags=5 88. UNDP Projects in Mapufacture http://mapufacture.com/feeds/1000504 89. Editing in UNDP Projects in Cyprus http://mapufacture.com/feeds/1000504/edit?category=Cyprus 90. Export GeoRSS back out to UNDP UNDP Europe & CIS projectshttp://mapufacture.com/feeds/1000504.rss Sat, 10 May 2008 09:46:15 +0000UNDP Europe & CIS projects130029735.1019340572461 14.26025390625 64.1297836764257 14.26025390625 64.1297836764257 166.22314453125 35.1019340572461 166.22314453125 35.1019340572461 14.26025390625607DD33A-F203-1EE9-BE72B91BA22313DFSecond National Communication for Kyrgyzstanhttp://europeandcis.undp.org/home/show/607DD33A-F203-1EE9-BE72B91BA22313DF Sun, 20 Apr 2008 17:01:26 +0000Preparation of the Kyrgyz Republics Second National Communication to the UNFCCCFrameworks and strategies for sustainable development Europe & CIS Kyrgyzstan Central Asia42.8679124839153 74.5422363281253D2883E9-F203-1EE9-B3320F78E2657ECESupport to alignment of NBSAP with CBD obligationshttp://europeandcis.undp.org/home/show/3D2883E9-F203-1EE9-B3320F78E2657ECE Sun, 20 Apr 2008 17:01:25 +0000Support to alignment of NBSAP with CBD obligations and to development of CHMFrameworks and strategies for sustainable development Europe & CIS Romania EU member countries and Turkey44.355278211603 26.2353515625 http://mapufacture.com/feeds/1000504.rss 91. Hacks 2 Geotag Projects * RSS -> Mapufacture -> GeoRSS Fit in the layout * Lightbox maps Plot Custom GeoRSS/Layers * Mapstraction/MGeoRSS 92. Cramped Style Guidelines Redux http://europeandcis.undp.org/environment/ 93. UNDP Environment Projects http://europeandcis.undp.org/environment/#map 94. Leightbox http://www.eight.nl/files/leightbox/ 95. Adding a Map 96. Leightbox mods initialize: function(ctrl) { this.content = ctrl.rel; Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; /* CUSTOM MAP CODE */ this.latlonzoom = ctrl.getAttribute('latlonzoom'); this.filter = ctrl.getAttribute('filter'); this.guid = ctrl.getAttribute('guid'); this.edit = ctrl.getAttribute('edit'); if (window.location.hash == "#map") { this.activate(); } } 97. //CUSTOM MAP CODE HERE! //mapstraction specific stuff should be done through actions.... displayLightbox: function(display){ var firstLoad = false; if (! mapstraction) { loadmapstraction(this.latlonzoom, this.filter, this.edit, this.guid); firstLoad = true; } $('overlay').style.display = display; $(this.content).style.display = display; mapstraction.getMap().checkResize(); if (firstLoad) { var llz_a = this.latlonzoom.split(","); var lat, lon, zoom; lat = parseFloat(llz_a[0]); lon = parseFloat(llz_a[1]);zoom =parseFloat(llz_a[2]); var myPoint = new LatLonPoint(lat,lon); mapstraction.setCenterAndZoom(myPoint, zoom); } window.scroll(0,0);if (display == 'none') { window.location = "http://"+ window.location.host + window.location.pathname + "#"; } else { window.location = "http://"+ window.location.host + window.location.pathname + "#map"; } if(display != 'none') this.actions(); } 98. Hacks 3 Geotag Projects * RSS -> Mapufacture -> GeoRSS Fit in the layout * Lightbox maps Plot Custom GeoRSS/Layers * Mapstraction/MGeoRSS 99. UNDP Environment Projects http://europeandcis.undp.org/environment/#map 100. http://brainoff.com/gmaps/mgeorss.html 101. MGeoRSS MGeoRSS.prototype.initialize=function(map) { this.map = map; this.rssurl = false; this.request = false; this.initIconsAndCats(); } //All too custom... MGeoRSS.prototype.initIconsAndCats=function(){ this.cat2icon = new Array(); this.cat2icon['Access to sustainable energy services'] ="/uploads/public/File/eemap/icons/sun_20px.png"; this.cat2icon['Frameworks and strategies for sustainable development'] ="/uploads/public/File/eemap/icons/doc_20px.png"; this.cat2icon['Conservation and sustainable use of biodiversity'] ="/uploads/public/File/eemap/icons/leaf_20px.png"; this.cat2icon['Sustainable land management to combat desertification and land degradation'] ="/uploads/public/File/eemap/icons/shovel_20px.png"; this.cat2icon['Effective water governance'] ="/uploads/public/File/eemap/icons/water_20px.png"; this.cat2icon['National/sectoral policy and planning to control emissions of ODS and POPs'] ="/uploads/public/File/eemap/icons/doc_20px.png"; this.cat2layer = new Array(); this.cat2layer['Access to sustainable energy services'] = "energy"; this.cat2layer['Frameworks and strategies for sustainable development'] = "policy"; this.cat2layer['Conservation and sustainable use of biodiversity'] = "biodiversity"; this.cat2layer['Sustainable land management to combat desertification and land degradation'] = "land"; this.cat2layer['Effective water governance'] = "water"; this.cat2layer['National/sectoral policy and planning to control emissions of ODS and POPs'] = "policy"; this.cat2layer['country'] = "country"; } 102. MGeoRSS var marker = new Marker(new LatLonPoint(parseFloat(lat), parseFloat(lng))); var marker; if (cat) { var a_cat = new Array(); for (c in this.cat2layer) { if (cat.indexOf( c ) > -1) { a_cat.push(c);} } //var a_cat = cat.split(','); for (var i=0; i