Illuminated Hacks -- Where 2.0 101 Tutorial

Slide 1: Illuminated Hacks Mikel Maron Where 2.0 101 Tutorial mikel@mapufacture.com http://brainoff.com/

Slide 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 means to get exactly what you need. cause I likes the hacks. hacks are rad.

Slide 3: Upcoming StreetView

Slide 4: Bangladesh Boat Journey

Slide 5: geocodr

Slide 6: UNDP Environment Projects

Slide 7: Upcoming StreetView

Slide 8: http://googlesightseeing.com/2008/05/07/street-view-sabotage/

Slide 9: http://gregsadetsky.com/?p=81

Slide 10: http://cbk0.google.com/cbk?output=xml&ll=37.784692,-122.39303 <panorama> <data_properties image_width=\"3500\" image_height=\"1750\" tile_width=\"512\" tile_height=\"512\" pano_id=\"fPaYJ83UesLvxeiFe1FXdA\" num_zoom_levels=\"3\" lat=\"37.784691\" lng=\"-122.392995\"> <copyright>© 2008 Google</copyright> <text>I-80</text> </data_properties> <projection_properties projection_type=\"spherical\" pano_yaw_deg=\"235.97\" tilt_yaw_deg=\"-84.62\" tilt_pitch_deg=\"3.21\"/> <annotation_properties> <link yaw_deg=\"55.54\" pano_id=\"j-LK2ptQjG2w0EfQ1-6zMQ\" road_argb=\"0x80f2bf24\"> <link_text>I-80</link_text> </link> <link yaw_deg=\"233.22\" pano_id=\"SoF-Grk1MNAwHEJvEsCBTw\" road_argb=\"0x80f2bf24\"> <link_text>I-80</link_text> </link> </annotation_properties> </panorama>

Slide 11: 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 ); } http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay

Slide 12: http://cbk0.google.com/cbk?output=tile&zoom=2&y=0&x={0,3}&panoid=j- LK2ptQjG2w0EfQ1-6zMQ

Slide 13: Official StreetView API

Slide 14: http://upcoming.yahoo.com/event/461321/

Slide 15: http://flickr.com/photos/tags/upcoming:event=461321

Slide 16: http://flickr.com/photos/10111/2467558023/

Slide 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/

Slide 18: a hack all grown up 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

Slide 19: http://upcoming.yahoo.com/place/hCca8XSYA5nn0X1Sfw

Slide 20: GeoRSS http://upcoming.yahoo.com/syndicate/v2/place/hCca8XSYA5nn0X1Sfw <item> <title>May 7, Manifesto SF at The Stud</title> <description><![CDATA[MANIFESTO - 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. ]]></description> <guid>http://upcoming.yahoo.com/event/600466/</guid> <link>http://upcoming.yahoo.com/event/600466/</link> <comments>http://upcoming.yahoo.com/event/60046/#comments</comments> <geo:lat>37.7697</geo:lat> <geo:long>-122.42</geo:long> <pubDate>Thu, 07 May 2008 15:50:49 -0700</pubDate> <dc:date>2008-05-08T15:50:49-07:00</dc:date> <xCal:summary>Manifesto SF</xCal:summary> <xCal:dtstart>2008-05-07T21:00:00Z</xCal:dtstart> <xCal:dtend></xCal:dtend> <xCal:location>http://upcoming.yahoo.com/venue/16322/</xCal:location> <xCal:x-calconnect-venue> <xCal:x-calconnect-venue-id>http://upcoming.yahoo.com/venue/16322/</xCal:x-calconnect-venue-id> <xCal:adr> <xCal:x-calconnect-venue-name>The Stud</xCal:x-calconnect-venue-name> <xCal:x-calconnect-street>Harrison @ 9th Street</xCal:x-calconnect-street> <xCal:x-calconnect-city>San Francisco</xCal:x-calconnect-city> <xCal:x-calconnect-region>California</xCal:x-calconnect-region> <xCal:x-calconnect-postalcode>94103</xCal:x-calconnect-postalcode> <xCal:x-calconnect-country>United States</xCal:x-calconnect-country> </xCal:adr> <xCal:url type='Venue Website'>http://upcoming.yahoo.com/venue/16322/</xCal:url> <xCal:x-calconnect-tel></xCal:x-calconnect-tel> </xCal:x-calconnect-venue> </item>

Slide 21: Geometries Attributes elev floor radius featuretypetag relationshiptag featurename Flavors Simple GML RSS formats RSS 1.0 RSS 2.0 Atom Proposals Reference External Geometries Simple Features (for SQL) Multiple Locations georss.org

Slide 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

Slide 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=tile\\\\&zoom=2\\\\&y=0\\\\&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 + \"\\\\&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 }

Slide 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=>'wherecamp@yahoo.com', title=>\"@ARGV[1]\", description=>'', tags =>\"@ARGV[2]\", is_public => 1, is_friend => 1, is_family => 1 );

Slide 25: Studly! http://upcoming.yahoo.com/event/600466

Slide 26: http://www.flickr.com/photos/8721477@N08/

Slide 27: Improvements? Directionality Undistorted

Slide 29: Bangladesh Boat Journey project led by Dharmafly http://www.bbc.co.uk/worldservice/bangladeshboat/ http://dharmafly.com/

Slide 30: Dharmafly. Prem melted my brain http://www.flickr.com/photos/mikel_maron/2304719567/

Slide 31: Hack 1 Easily geotag posts and pics

Slide 32: http://twittervision.com/

Slide 33: http://twitter.com/bangladeshboat

Slide 34: Nanoformats! L: o Used to define a location o Example: Good place to visit L: Place Georges Pompidou, Paris, France o Example2: Good place to visit L: Place Georges Pompidou, Paris, 75004 o Example3: Good place to visit L:48.860500,2.352260 o Text Syntax: L:<Addres, city or town, region> or L:<Address, city or town, postal code> at the end of a tweet o Geo Syntax: L:<lat,long> + info: (Section 3.4.2 of RFC2426) http://microformats.org/wiki/microblogging-nanoformats

Slide 35: nanoformat parsing engine suite

Slide 36: A Model for GeoWeb friendliness http://dev.opera.com/articles/view/location-based-publishing-and-services/ http://dharmafly.com/blog/bangladeshboat

Slide 37: TwitterVision http://twittervision.com/bangladeshboat

Slide 38: Geo Microformats https://addons.mozilla.org/en-US/firefox/addon/4106

Slide 39: hAtom microformat <ul class=\"hfeed vcalendar xoxo\"> <li class=\"hentry vevent xfolkentry postid-t444623812\"> “ <a rel=\"bookmark\" class=\"entry-title entry-content summary description taggedlink url\" href=\"http://twitter.com/bangladeshboat/statuses/444623812\" title=\"Posts from the Bangladesh Boat (on Twitter)\"> The month long BBC Bangladesh boat trip has come to an end, and what a momentous four weeks it's been! </a>” <ul class=\"meta\"> <li class=\"update last-update\">Last updated by <address class=\"author vcard fn\"> <img class=\"photo\" src=\"http://www.bbc.co.uk/worldservice/bangladeshboat/images/alastair_ben.jpg\" alt=\"Alastair Lawson-Tancred (left) and Ben Sutherland\" width=\"134\" height=\"96\" title=\"Alastair Lawson-Tancred (left) and Ben Sutherland\" /> Ben Sutherland and Alastair Lawson </address> <abbr class=\"published dtstart\" title=\"2007-11-26T16:57:52+06:00\">on 28th November 2007</abbr> </li> </ul>

Slide 40: hAtom microformat http://tools.microformatic.com/transcode/rss/hatom/www.bbc.co.uk/worldservice/bangladeshboat/

Slide 41: Google Maps http://maps.google.com/maps?q=http://www.bbc.co.uk/worldservice/bangladeshboat/rss.xml&z=8

Slide 42: mapufacture http://mapufacture.com/feeds/1009982

Slide 43: Google Earth http://bangladeshboat.welcomebackstage.com/feed/?format=kml&numPosts=all

Slide 44: iCal feed

Slide 45: API http://bangladeshboat.welcomebackstage.com/

Slide 46: http://bangladeshboat.welcomebackstage.com/

Slide 47: Greasemonkey API http://bangladeshboat.welcomebackstage.com/

Slide 48: Pacer Feeds http://mapufacture.com/users/{user-id}/pacer

Slide 49: Hack 2 Free the Bubble! http://www.bbc.co.uk/worldservice/bangladeshboat/js/mashup.js

Slide 50: Extreme DOM

Slide 51: http://maps.google.com/intl/en_us/mapfiles/iw2.png

Slide 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\"; } }

Slide 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(); } }); .. }

Slide 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); }

Slide 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 balloon var 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); }

Slide 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]; }

Slide 58: http://www.bbc.co.uk/worldservice/bangladeshboat/js/mashup.js

Slide 59: cute cow code break lolcows! mooove!

Slide 60: geocodr http://geocodr.net/

Slide 61: mapping flickr tags - europe http://brainoff.com/openplan/flickr/

Slide 62: foot and mouth http://brainoff.com/openplan/flickr/

Slide 63: worldKit some Perl serving WMS requests (I'll spare you) flickr tag tiles

Slide 64: naïve Flickr geocoding 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 \"<a href='http://maps.google.com/maps?q=$lat,$lng'>GMap</a>\"; http://brainoff.com/flickr/geocodrer/

Slide 65: http://brainoff.com/flickr/geocoder/?tags=santa+cruz santacruz 31.219397388, -104.796292444 http://brainoff.com/flickr/geocodrer/

Slide 66: k-means clustering http://en.wikipedia.org/wiki/K-means

Slide 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++; }

Slide 68: smarter Flickr geocoding $jca = new JCA($numclusters,$numresults * 2 ,$datapoints); $jca->startAnalysis(); $clusters = $jca->getClusterOutput(); $largestClust = 0; $largestClustSize = 0; for ($i=0; $i<count($clusters); $i++){ $tempCluster = $clusters[$i]; if (count($tempCluster) > $largestClustSize) { $largestClustSize = count($tempCluster); $largestClust = $i; } }//for $cX = $jca->getCluster($largestClust)->getCentroid()->getCx(); $cY = $jca->getCluster($largestClust)->getCentroid()->getCy(); }

Slide 69: rockin

Slide 70: http://geothings.ning.com/Flickr/flickrgeocodr_cluster.php to output more detailed information regarding the clusters themselves in 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 from Flickr, 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

Slide 71: http://geothings.ning.com/Flickr/flickrgeocodr_cluster.php?place=santa+cruz&numcl usters=5&numresults=500 <clusters> <cluster> <type>cluster</type> <id>0</id> <pointcount>10</pointcount> <latitude>-49.734894</latitude> <longitude>-72.9383211</longitude> <place>santa cruz</place> <bbox>-50.483625,-73.280869,-49.280298,-72.321281</bbox> </cluster> <cluster> <type>cluster</type> <id>1</id> <pointcount>178</pointcount> <latitude>36.961319095506</latitude> <longitude>-122.02093021348</longitude> <place>santa cruz</place> <bbox>36.922587,-122.120348,37.025473,-121.854225</bbox> </cluster> <cluster> <type>cluster</type> <id>2</id> <pointcount>6</pointcount> <latitude>49.930333833333</latitude> <longitude>1.7630273333333</longitude> <place>santa cruz</place> <bbox>43.769071,-1.70371,53.4371,11.261426</bbox> </cluster> <cluster> <type>cluster</type> <id>3</id> <pointcount>51</pointcount> <latitude>38.893761862745</latitude> <longitude>-9.4491147254902</longitude> <place>santa cruz</place> <bbox>28.454712,-16.249337,39.164552,-5.990155</bbox> </cluster> <cluster> <type>cluster</type> <id>4</id> <pointcount>5</pointcount> <latitude>37.1452402</latitude> <longitude>-122.2436208</longitude> <place>santa cruz</place> <bbox>37.000924,-122.394363,37.251595,-122.112962</bbox> </cluster> <error>1</error> </clusters>

Slide 72: Cluster 2: Santa Cruz, Portugal

Slide 73: Cluster 3: Santa Cruz, Argentina

Slide 74: Kite Hill, San Francisco

Slide 75: Kite Hill, San Francisco, Google

Slide 76: headmap manifesto http://www.technoccult.com/library/headmap.pdf

Slide 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 <item> <latitude>40.767735142857</latitude> <longitude>-73.974891142857</longitude> <place>sadness</place> <error>1</error> </item>

Slide 78: sadness in new york! http://maps.google.com/maps?q=40.720959166667%2C-73.995379

Slide 79: sadness in new york! http://maps.google.com/maps?q=40.720959166667%2C-73.995379

Slide 80: global sadness in ... switzerland!

Slide 81: Other Geometries, Bay to Breakers thanks Dan Catt! http://geobloggers.com/archives/2008/04/28/making-sense-of-the-world-web20expo-slides-are-online/

Slide 82: Crowd Sourced Reverse Geocoding thanks Dan Catt! http://geobloggers.com/archives/2008/04/28/making-sense-of-the-world-web20expo-slides-are-online/

Slide 84: UNDP Environment Projects http://europeandcis.undp.org/environment/#map

Slide 85: Hacks 1 Geotag Projects * RSS -> Mapufacture -> GeoRSS Fit in the layout * Lightbox maps Plot Custom GeoRSS/Layers * Mapstraction/MGeoRSS

Slide 86: Half a world of projects custom CMS w/ no maps http://europeandcis.undp.org/environment/show/3D245417-F203-1EE9-B535882303FB38F5

Slide 87: Vanilla RSS of UNDP Projects http://europeandcis.undp.org/home/rss?feed=projects&a=121676,121677,121678,121679,121680,121681&showTags=5

Slide 88: UNDP Projects in Mapufacture http://mapufacture.com/feeds/1000504

Slide 89: Editing in UNDP Projects in Cyprus http://mapufacture.com/feeds/1000504/edit?category=Cyprus

Slide 90: Export GeoRSS back out to UNDP <?xml version=\"1.0\" encoding=\"UTF-8\"?> <rss version=\"2.0\" xmlns:opensearch=\"http://a9.com/-/spec/opensearch/1.1/\" xmlns:georss=\"http://www.georss.org/georss\"> <channel> <title>UNDP Europe &amp; CIS projects</title> <link>http://mapufacture.com/feeds/1000504.rss</link> <pubDate>Sat, 10 May 2008 09:46:15 +0000</pubDate> <description>UNDP Europe &amp; CIS projects</description> <opensearch:startIndex>1</opensearch:startIndex> <opensearch:itemsPerPage>300</opensearch:itemsPerPage> <opensearch:totalResults>297</opensearch:totalResults> <georss:polygon>35.1019340572461 14.26025390625 64.1297836764257 14.26025390625 64.1297836764257 166.22314453125 35.1019340572461 166.22314453125 35.1019340572461 14.26025390625</georss:polygon> <item> <guid>607DD33A-F203-1EE9-BE72B91BA22313DF</guid> <title>Second National Communication for Kyrgyzstan</title> <link>http://europeandcis.undp.org/home/show/607DD33A-F203-1EE9-BE72B91BA22313DF</link> <pubDate>Sun, 20 Apr 2008 17:01:26 +0000</pubDate> <description>Preparation of the Kyrgyz Republic’s Second National Communication to the UNFCCC</description> <category>Frameworks and strategies for sustainable development Europe & CIS Kyrgyzstan Central Asia</category> <georss:point>42.8679124839153 74.542236328125</georss:point> </item> <item> <guid>3D2883E9-F203-1EE9-B3320F78E2657ECE</guid> <title>Support to alignment of NBSAP with CBD obligations</title> <link>http://europeandcis.undp.org/home/show/3D2883E9-F203-1EE9-B3320F78E2657ECE</link> <pubDate>Sun, 20 Apr 2008 17:01:25 +0000</pubDate> <description>Support to alignment of NBSAP with CBD obligations and to development of CHM</description> <category>Frameworks and strategies for sustainable development Europe & CIS Romania EU member countries and Turkey</category> <georss:point>44.355278211603 26.2353515625</georss:point> </item> http://mapufacture.com/feeds/1000504.rss

Slide 92: Cramped Style Guidelines Redux http://europeandcis.undp.org/environment/

Slide 94: Leightbox http://www.eight.nl/files/leightbox/

Slide 95: Adding a Map <a href=\"#mapstraction\" filter=\"water\" latlonzoom=\"44.150681,44.34082,4\" rel=\"mapstraction\" class=\"lbOn\">

Slide 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(); } }

Slide 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(); }

Slide 100: http://brainoff.com/gmaps/mgeorss.html

Slide 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\"; }

Slide 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<=a_cat.length; i++) { var caticon = this.cat2icon[ a_cat[i] ]; if (caticon && ! icon) { icon = caticon; } if (this.cat2layer[ a_cat[i] ]) { var tmp = \"\"; if (marker.getAttribute('category')) { tmp = marker.getAttribute('category'); tmp = tmp + \",\"; tmp = tmp + this.cat2layer[ a_cat[i] ]; } else { tmp = this.cat2layer[ a_cat[i] ]; } marker.setAttribute('category', tmp); } } } if (icon) { if (rss_icon) { marker.setIcon(icon,[18,12]); //marker.setIcon(icon, [23,15]); } else { marker.setIcon(icon,[20,20]); } }

Slide 103: http://mapstraction.com/

Slide 104: Mapstraction/MGeoRSS setup function loadmapstraction(latlonzoom, filter, edit, guid) { .. if (filter) { mapstraction.addFilter('category','contains','country'); var filter_a = filter.split(\",\"); for (var i=0; i < filter_a.length; i++) { mapstraction.addFilter('category', 'contains', filter_a[i]); var cb = \"checkbox_\" + filter_a[i]; if ($(cb)) { $(cb).checked = \"CHECKED\"; } } } else { mapstraction.addFilter('category','contains','country'); mapstraction.addFilter('category','contains','biodiversity'); mapstraction.addFilter('category','contains','water'); mapstraction.addFilter('category','contains','energy'); mapstraction.addFilter('category','contains','policy'); mapstraction.addFilter('category','contains','land'); } georss2 = new MGeoRSS(); if (guid) { georss2.centerOnGuid(guid); } mapstraction.addMGeoRSS(georss2); georss2.load(\"/uploads/public/File/eemap/projects.xml\"); georss2 = new MGeoRSS(); mapstraction.addMGeoRSS(georss2); georss2.load(\"/uploads/public/File/eemap/countries.xml\"); }

Slide 105: Layer Toggle onClick= \"javascript:mapstraction.toggleFilter(\\'category\\',\\'contains\\',\\'water\\'); mapstraction.doFilter(true);\"

Slide 106: THANKS! Illuminated Hacks http://www.slideshare.net/mikel_maron (soonish) Mikel Maron Where 2.0 101 Tutorial mikel@mapufacture.com http://brainoff.com/

Slideshare.net (beta)