Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

10K compo entry now available

  • Loading branch information...
commit 2635e60f924d0cbc6cb585220d916a01cd827e89 0 parents
@codepo8 authored
Showing with 336 additions and 0 deletions.
  1. +22 −0 index.html
  2. +28 −0 json.js
  3. +115 −0 worldinfo.css
  4. +171 −0 worldinfo.js
22 index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>World Info</title>
+ <link rel="stylesheet" href="worldinfo.css" type="text/css">
+ <link href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700" rel="stylesheet" type="text/css" >
+<link href="//fonts.googleapis.com/css?family=Neuton:regular" rel="stylesheet" type="text/css" >
+<script src="json.js" type="text/javascript" charset="utf-8"></script>
+ <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
+</head>
+<body>
+ <div id="main">
+ <h1>World Info</h1>
+ <p>A quick lookup system about all the countries in the world -
+ powered by YQL, Yahoo GeoPlanet, Open Street Map and Wikipedia.</p>
+ <div id="list"></div>
+ <p id="ft">Written by <a href="http://wait-till-i.com">Chris Heilmann</a>, Fonts by Google, Data by Yahoo, Wikipedia and Flickr, Background by NASA</p>
+</div>
+<script src="worldinfo.js"></script>
+</body>
+</html>
28 json.js
@@ -0,0 +1,28 @@
+if(!this.JSON){this.JSON={};}
+(function(){function f(n){return n<10?'0'+n:n;}
+if(typeof Date.prototype.toJSON!=='function'){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+'-'+
+f(this.getUTCMonth()+1)+'-'+
+f(this.getUTCDate())+'T'+
+f(this.getUTCHours())+':'+
+f(this.getUTCMinutes())+':'+
+f(this.getUTCSeconds())+'Z':null;};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf();};}
+var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==='string'?c:'\\u'+('0000'+a.charCodeAt(0).toString(16)).slice(-4);})+'"':'"'+string+'"';}
+function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==='object'&&typeof value.toJSON==='function'){value=value.toJSON(key);}
+if(typeof rep==='function'){value=rep.call(holder,key,value);}
+switch(typeof value){case'string':return quote(value);case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value){return'null';}
+gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==='[object Array]'){length=value.length;for(i=0;i<length;i+=1){partial[i]=str(i,value)||'null';}
+v=partial.length===0?'[]':gap?'[\n'+gap+
+partial.join(',\n'+gap)+'\n'+
+mind+']':'['+partial.join(',')+']';gap=mind;return v;}
+if(rep&&typeof rep==='object'){length=rep.length;for(i=0;i<length;i+=1){k=rep[i];if(typeof k==='string'){v=str(k,value);if(v){partial.push(quote(k)+(gap?': ':':')+v);}}}}else{for(k in value){if(Object.hasOwnProperty.call(value,k)){v=str(k,value);if(v){partial.push(quote(k)+(gap?': ':':')+v);}}}}
+v=partial.length===0?'{}':gap?'{\n'+gap+partial.join(',\n'+gap)+'\n'+
+mind+'}':'{'+partial.join(',')+'}';gap=mind;return v;}}
+if(typeof JSON.stringify!=='function'){JSON.stringify=function(value,replacer,space){var i;gap='';indent='';if(typeof space==='number'){for(i=0;i<space;i+=1){indent+=' ';}}else if(typeof space==='string'){indent=space;}
+rep=replacer;if(replacer&&typeof replacer!=='function'&&(typeof replacer!=='object'||typeof replacer.length!=='number')){throw new Error('JSON.stringify');}
+return str('',{'':value});};}
+if(typeof JSON.parse!=='function'){JSON.parse=function(text,reviver){var j;function walk(holder,key){var k,v,value=holder[key];if(value&&typeof value==='object'){for(k in value){if(Object.hasOwnProperty.call(value,k)){v=walk(value,k);if(v!==undefined){value[k]=v;}else{delete value[k];}}}}
+return reviver.call(holder,key,value);}
+text=String(text);cx.lastIndex=0;if(cx.test(text)){text=text.replace(cx,function(a){return'\\u'+
+('0000'+a.charCodeAt(0).toString(16)).slice(-4);});}
+if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,''))){j=eval('('+text+')');return typeof reviver==='function'?walk({'':j},''):j;}
+throw new SyntaxError('JSON.parse');};}}());
115 worldinfo.css
@@ -0,0 +1,115 @@
+*{
+ margin:0;
+ padding:0;
+ list-style:none;
+ font-family:calibri,sans-serif;
+ font-family: 'Neuton', serif;
+ font-size:16px;
+}
+html,body{
+ background:url(http://grin.hq.nasa.gov/IMAGES/MEDIUM/GPN-2000-001046.jpg) bottom center no-repeat #000;
+ color:#fff;
+}
+ul{
+ position:relative;
+ margin:1em 0;
+ padding:0;
+}
+ul li{
+ display:inline;
+ padding:0 .5em 0 0;
+}
+#azlists ul{
+ margin:.5em 0;
+ float:left;
+ width:10em;
+ display:none;
+}
+#azlists li{
+ padding:0;
+}
+#azlists ul.show{
+ display:block;
+}
+#container{
+ margin-left:12em;
+}
+img{
+ display:block;
+ margin:1em 0;
+ border:none;
+}
+p img{
+ display:inline;margin:0;
+}
+#list button{
+ border:none;
+ background:#369;
+ color:#fff;
+ -moz-border-radius:2px;
+ -webkit-border-radius:2px;
+ border-radius:2px;
+ padding:2px 5px;
+ text-decoration:none;
+}
+#list button:hover,#list button:focus{
+ background:#fc6;
+ color:#fff;
+}
+#list #azlists button{
+ background:transparent;
+ color:#fff;
+ text-align:left;
+ display:block;
+ width:10em;
+}
+#list #azlists button:hover,#list #azlists button:focus{
+ background:#ccc;
+ color:#000;
+}
+#list{
+ position:relative;
+}
+#container p a{
+ display:inline;
+ color:#ffc;
+ text-decoration:underline;
+}
+#main{
+ margin:30px;
+ padding:2em;
+ min-height:900px;
+ position:relative;
+ -moz-border-radius:10px;
+ -webkit-border-radius:10px;
+ border-radius:10px;
+ background:rgba(0,0,0,.5);
+ -moz-border-radius:10px;
+ -webkit-border-radius:10px;
+ border-radius:10px;
+}
+div.img{height:250px;}
+h1{
+ font-size:30px;
+ color:#0c0;
+ font-family: 'Yanone Kaffeesatz', serif;
+ font-size: 56px;
+ text-transform:uppercase;
+}
+h2{margin:0 0 .5em 0;padding:0;}
+#ft{
+ clear:both;
+ margin:3em 0 0 0;
+ font-size:10px;
+ text-align:right;
+}
+.load{
+ font-size:20px;
+ font-weight:bold;
+ color:#ffc;
+ margin:1em 0;
+}
+#ft a{
+ font-size:10px;
+ color:#000;
+}
171 worldinfo.js
@@ -0,0 +1,171 @@
+/*
+ World Info by Christian Heilmann
+ Homepage: http://github.com/codepo8/worldinfo
+ Copyright (c)2010 Christian Heilmann
+ Code licensed under the BSD License:
+ http://wait-till-i.com/license.txt
+*/
+$(document).ready(function(){
+
+ // define messages and "global variables"
+ var loading = 'Please wait, loading the world&hellip; '+
+ '(can take up to 20 seconds - only on the first start)',
+ contentloading = 'Loading content&hellip;',
+ current,cs;
+ // if localStorage is supported and the browser has the world
+ // data cached, use this instead of hammering YQL
+ if(localStorage && localStorage.getItem('thewholefrigginworld')){
+ render(JSON.parse(localStorage.getItem('thewholefrigginworld')));
+ } else {
+
+ // Otherwise display a loading message
+ $('#list').html('<p class="load">'+loading+'</p>');
+
+ // This YQL query loads all the children of the element with the
+ // Where on Earth ID 1 (which is earth) and sorts them by name
+ // for more info check the geoplanet API
+ // http://developer.yahoo.com/geo/geoplanet/
+ var query = 'select centroid,woeid,name,boundingBox'+
+ ' from geo.places.children(0)'+
+ ' where parent_woeid=1 and placetype="country"'+
+ ' | sort(field="name")';
+ var YQL = 'http://query.yahooapis.com/v1/public/yql?q='+
+ encodeURIComponent(query)+'&diagnostics=false&format=json';
+
+ // load the information and store it if the browser supports it - then
+ // render the interface
+ $.getJSON(YQL,function(data){
+ if(localStorage){
+ localStorage.setItem('thewholefrigginworld',JSON.stringify(data));
+ }
+ render(data);
+ });
+
+ }
+
+ // render the information
+
+ function render(data) {
+
+ // start a list
+ var aznav = '<ul>';
+ var out = '<div id="azlists">';
+
+ // loop over all the places in the data
+ cs = data.query.results.place;
+ var old = '';
+ for(var i=0,j=cs.length;i<j;i++){
+
+ // if the first character of the current name is different
+ // than the last one add a new item and a nested list
+ // this generates the A-Z navigation and the items
+ var now = cs[i].name.substr(0,1);
+ if(now !== old){
+ aznav+= '<li><button value="'+i+'">'+now+'</button></li>';
+ out+='<ul id="list'+now+'">';
+ }
+ // add the name of the location and use a number as the value
+ out += '<li><button value="'+i+'">'+cs[i].name+'</button></li>';
+ if(i<j-1 && now !== cs[i+1].name.substr(0,1)){
+ out+='</ul>';
+ }
+ old = now;
+ }
+ aznav+='</ul>';
+ out+='</div>';
+
+ // add a container to host the map and content and show the results
+ $('#list').hide().html(
+ aznav+out+'<div id="container"></div>').
+ fadeIn('slow');
+
+ // load the content for the first country and display it
+ showcountry($('#listA button:first'));
+
+ // add the class show to the first sub-menu to show it
+ current = $('#listA');
+ current.addClass('show');
+
+ // Use event delegation (now that jQuery has caught up) on all
+ // links inside the #list element
+ $("#list").delegate("button","click",function(event){
+ event.preventDefault();
+
+ // if the content of the button is a single character we are in the A-Z
+ // navigation and we shift the "show" class from the last shown
+ // sub-menu to the current one
+ if($(this).html().length==1){
+ $(current).removeClass('show');
+ $('#list'+$(this).html()).addClass('show');
+ current = $('#list'+$(this).html());
+
+ // otherwise we call the showcountry function
+ } else {
+ showcountry($(this));
+ }
+
+ });
+ };
+ // load country information from Wikipedia and display a map
+ function showcountry(elm){
+
+ // fade the old container and show a loading message
+ $('#container').fadeOut().html(
+ '<p class="load">'+contentloading+'</p>'
+ ).fadeIn();
+
+ // Get the name of the country the user clicked on and replace
+ // spaces with an underscore - this is the WikiPerdia convention
+ var name = elm.html().replace(/ /g,'_');
+
+ // get the information about the country from the data stored from
+ // geoplanet - this is why I used numbers as the href
+ var bb = cs[elm.attr('value')];
+
+ var width = $('#main').width()-$('#azlists ul:first').width()-50;
+
+ // Use the awesome static maps API for open street map at
+ // http://pafciu17.dev.openstreetmap.org to show the map using
+ // the bounding box data from geoplanet
+ var image = 'http://pafciu17.dev.openstreetmap.org/?module=map&bbox='+
+ bb.boundingBox.southWest.longitude+','+
+ bb.boundingBox.northEast.latitude+','+
+ bb.boundingBox.northEast.longitude+','+
+ bb.boundingBox.southWest.latitude+
+ '&points='+bb.centroid.longitude+','+bb.centroid.latitude+
+ ',pointImagePattern:greenI&width='+width+'&height=250';
+
+ // Add a heading and the image
+ var out = '<h2>'+bb.name+'</h2><div class="img"><img src="'+image+
+ '" alt="'+bb.name+'"></div>';
+
+ // Scrape country content from WikiPedia. Each country web site
+ // has a table with short info of the country - get the three following
+ // paragraphs
+ query = 'select * from html where url="http://en.wikipedia.org/wiki/'+
+ name+'" and xpath="//table/following-sibling::p" limit 3';
+ YQL = 'http://query.yahooapis.com/v1/public/yql?q='+
+ encodeURIComponent(query)+'&diagnostics=false&'+
+ 'format=xml&callback=?';
+
+ // Load the data and join the results. Then replace all the /wiki links
+ // with working links. If there was no data returned, delete what
+ // was coming back from the API (the JSON wrapper)
+ $.getJSON(YQL,function(data){
+ if(data.results){
+ data = data.results.join('').replace(/"\/wiki/g,
+ '"http://en.wikipedia.org/wiki');
+ } else {
+ data = '';
+ }
+
+ // hide the container, populate and show it
+ $('#container').hide().html(out+data).fadeIn();
+
+ // remove all the <sup> elements (Wikipedia footnote links)
+ $('#container sup').remove();
+ });
+ }
+});
+
+// and I'm spent!
Please sign in to comment.
Something went wrong with that request. Please try again.