Skip to content
Browse files

adding

  • Loading branch information...
0 parents commit 8a9c079162bb267a8d6ec5b53dd7565f61c0b044 @codepo8 committed
Showing with 326 additions and 0 deletions.
  1. BIN 16x16.png
  2. 0 README
  3. +49 −0 index.html
  4. +19 −0 lookaround.css
  5. +122 −0 lookaround.js
  6. +136 −0 yqlgeo.js
BIN 16x16.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 README
No changes.
49 index.html
@@ -0,0 +1,49 @@
+<!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>Look around you - points of interest lookup</title>
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0/build/base/base-min.css">
+ <link rel="stylesheet" type="text/css" href="lookaround.css">
+</head>
+<body class="yui-skin-sam">
+<div id="doc" class="yui-t7">
+
+ <div id="hd" role="banner">
+ <h1>Look around you&hellip;</h1>
+ </div>
+ <div id="bd" role="main">
+ <p class="intro">This web site tries to find your location and shows you points of interest from Wikipedia around you. It is a demo of what you can do with a few lines of code and the right tools these days.</p>
+
+ <div class="yui-g">
+ <div class="yui-u first" id="map">
+ <p class="info">Trying to determine your location...</p>
+ </div>
+ <div class="yui-u" id="sights">
+ </div>
+ </div>
+ <div id="neighbours"></div>
+ <div id="children"></div>
+
+ <p>The technology involved to create this site is:</p>
+ <ul>
+ <li>The <a href="http://dev.w3.org/geo/api/spec-source.html">W3C Geo Location API</a></li>
+ <li>Various <a href="http://developer.yahoo.com/geo/">Yahoo Geo</a> and <a href="http://developer.yahoo.com/yql">YQL lookups</a> bundled in the <a href="http://isithackday.com/hacks/geo/yql-geo-library/">YQLGeo library</a></li>
+ <li>The <a href="http://geonames.org">Geonames</a> WikiPedia lookup API</li>
+ </ul>
+
+ <p>You can grab the source code of this demo on GitHub.</p>
+
+
+ </div>
+ <div id="ft" role="contentinfo">
+ <p>Written by <a href="http://wait-till-i.com">Christian Heilmann</a></p>
+ </div>
+</div>
+<script src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=SckyCn7V34EmWovT9sK7Z2ivzd2NtNKOMzTWVFwViDtkNLvxNKbiLqqWN9nqtdg-'"></script>
+<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
+<script src="yqlgeo.js"></script>
+<script src="lookaround.js"></script>
+</body>
+</html>
+
19 lookaround.css
@@ -0,0 +1,19 @@
+html,body{background:#999;color:#000}
+#doc{background:#fff;border:1em solid #fff;}
+#map{width:300px;height:200px;}
+ body.js #sights li p{display:none;}
+ body.js #sights li.show p{display:block;}
+a{color:#369;}
+#sights img{float:left;padding:5px;}
+#sights p{clear:both;}
+#sights p{font-size:80%}
+#sights h2{font-size:100%;background:#369;-moz-border-radius:5px;-webkit-border-radius:5px;-border-radius:5px;}
+#sights h2 a{color:#fff;text-decoration:none;padding:5px;}
+#neighbours{background:#ccc;-moz-border-radius:5px;-webkit-border-radius:5px;-border-radius:5px;padding:.5em;margin:2em 0;}
+#neighbours ul{margin:0;padding:0;list-style:none;font-weight:bold;}
+#neighbours ul ul{margin:.5em 0;}
+#neighbours a{color:#000;font-size:90%;}
+#neighbours ul li{display:inline;padding-right:1em;list-style:none;}
+h1{margin:0;color:#393;}
+#ft{font-size:80%;text-align:right;}
+#map td{border:none;padding:0;}
122 lookaround.js
@@ -0,0 +1,122 @@
+YUI().use('node',function(Y){
+ Y.one('body').addClass('js');
+ yqlgeo.get('visitor',function(o){
+ yqlgeo.getinfo(o);
+ });
+ yqlgeo.getinfo = function(o){
+ var cur = o.place ? o.place : o;
+ yqlgeo.rendermap('*', cur.centroid.latitude,cur.centroid.longitude,
+ cur.boundingBox.northEast.latitude,
+ cur.boundingBox.northEast.longitude,
+ cur.boundingBox.southWest.latitude,
+ cur.boundingBox.southWest.longitude);
+ document.getElementById('sights').innerHTML = 'Loading landmarks&hellip;';
+ var url = 'http://ws.geonames.org/findNearbyWikipediaJSON?formatted=true'+
+ '&lat=' + cur.centroid.latitude + '&lng='+
+ cur.centroid.longitude+'&style=full&callback=yqlgeo.wiki';
+ yqlgeo.get(url);
+ document.getElementById('neighbours').innerHTML = 'Loading neighbouring areas';
+ var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from'+
+ '%20geo.places.neighbors%20where%20neighbor_woeid%3D'+
+ cur.woeid+'&diagnostics=false&format=json&'+
+ 'callback=yqlgeo.neighbours';
+ yqlgeo.get(url);
+ };
+ yqlgeo.get = function(url){
+ var old = document.getElementById('getjson');
+ if(old){
+ old.parentNode.removeChild(old);
+ }
+ var s = document.createElement('script');
+ s.setAttribute('src',url);
+ s.setAttribute('id','getjson');
+ document.getElementsByTagName('head')[0].appendChild(s);
+ };
+ yqlgeo.rendermap = function(){
+ var x = arguments;
+ if(x[1]){
+ yqlgeo.map = new YMap(document.getElementById('map'));
+ yqlgeo.map.addTypeControl();
+ yqlgeo.map.addZoomLong();
+ yqlgeo.map.addPanControl();
+ yqlgeo.map.disableKeyControls();
+ yqlgeo.map.setMapType(YAHOO_MAP_REG);
+ var points = [];
+ var point = new YGeoPoint(x[1],x[2]);
+ points.push(point);
+ var img = new YImage();
+ img.src = '16x16.png';
+ img.size = new YSize(16,16);
+ var newMarker = new YMarker(point,img);
+ yqlgeo.map.addOverlay(newMarker);
+ }
+ if(x[3] && x[4]){
+ var point = new YGeoPoint(x[3],x[4]);
+ points.push(point);
+ }
+ if(x[5] && x[6]){
+ var point = new YGeoPoint(x[5],x[6]);
+ points.push(point);
+ }
+ var zac = yqlgeo.map.getBestZoomAndCenter(points);
+ var level = points.length > 1 ? zac.zoomLevel : zac.zoomLevel + 1;
+ yqlgeo.map.drawZoomAndCenter(zac.YGeoPoint,level);
+ yqlgeo.map.drawZoomAndCenter(points[0],level);
+ }
+ yqlgeo.wiki = function(o){
+ if(o.geonames){
+ var out = '<ol>';
+ for(var i=0;i<o.geonames.length;i++){
+ var sight = o.geonames[i];
+ out += '<li><h2>'+
+ '<a href="http://' + sight.wikipediaUrl + '">'+
+ sight.title+'</a></h2><p>';
+ if(sight.thumbnailImg){
+ out += '<img src="'+sight.thumbnailImg+'" alt="">';
+ }
+ out += sight.summary + '</p>'+
+ '<p class="distance">'+sight.distance+' miles away</p>'+
+ '<p class="url"><a href="http://' + sight.wikipediaUrl + '">'+
+ 'http://' + sight.wikipediaUrl + '</a></p>'+
+ '</li>';
+ var point = new YGeoPoint(sight.lat,sight.lng);
+ var marker = new YMarker(point);
+ marker.addLabel(i+1);
+ marker.addAutoExpand(sight.title);
+ yqlgeo.map.addOverlay(marker);
+ }
+ out += '</ol>';
+ }
+ document.getElementById('sights').innerHTML = out;
+ };
+ yqlgeo.neighbours = function(o){
+ var container = document.getElementById('neighbours');
+ if(!o.error && undefined !== o.query.results.place){
+ var out = '<ul><li>Around this area:<ul>';
+ yqlgeo.neighbourdata = o.query.results.place;
+ var all = o.query.results.place.length;
+ for(var i=0;i<all;i++){
+ var cur = o.query.results.place[i];
+ out+='<li><a href="#n'+i+'">'+cur.name+'</a></li>';
+ }
+ out += '</ul></li></ul>';
+ container.innerHTML = out;
+ }
+ };
+ Y.delegate('click', function(e) {
+ e.preventDefault();
+ var current = Y.one(e.target).get('href').replace(/.*#n/,'');
+ if(yqlgeo.neighbourdata[current]){
+ yqlgeo.getinfo(yqlgeo.neighbourdata[current]);
+ }
+ }, '#neighbours', 'a');
+ Y.delegate('click', function(e) {
+ e.preventDefault();
+ var dad = Y.one(e.target).ancestor('li');
+ if(dad.hasClass('show')){
+ dad.removeClass('show');
+ } else {
+ dad.addClass('show');
+ }
+ }, '#sights', 'h2 a');
+});
136 yqlgeo.js
@@ -0,0 +1,136 @@
+/*
+ YQL Geo library by Christian Heilmann
+ Homepage: http://isithackday.com/geo/yql-geo-library
+ Copyright (c)2010 Christian Heilmann
+ Code licensed under the BSD License:
+ http://wait-till-i.com/license.txt
+*/
+var yqlgeo = function(){
+ var callback;
+ function get(){
+ var args = arguments;
+ for(var i=0;i<args.length;i++){
+ if(typeof args[i] === 'function'){
+ callback = args[i];
+ }
+ }
+ if(args[0] === 'visitor'){getVisitor();}
+ if(typeof args[0] === 'string' && args[0] != 'visitor'){
+ if(args[0]){
+ if(/^http:\/\/.*/.test(args[0])){
+ getFromURL(args[0]);
+ } else if(/^[\d+\.?]+$/.test(args[0])){
+ getFromIP(args[0]);
+ } else {
+ getFromText(args[0]);
+ }
+ }
+ }
+ var lat = args[0];
+ var lon = args[1];
+ if(typeof lat.join !== undefined && args[0][1]){
+ lat = args[0][0];
+ lon = args[0][1];
+ };
+ if(isFinite(lat) && isFinite(lon)){
+ if(lat > -90 && lat < 90 &&
+ lon > -180 && lon < 180){
+ getFromLatLon(lat,lon);
+ }
+ }
+ }
+ function getVisitor(){
+ if(navigator.geolocation){
+ navigator.geolocation.getCurrentPosition(
+ function(position){
+ getFromLatLon(position.coords.latitude,
+ position.coords.longitude);
+ },
+ function(error){
+ retrieveip();
+ }
+ );
+ } else{
+ retrieveip();
+ }
+ };
+
+ function getFromIP(ip){
+ var yql = 'select * from geo.places where woeid in ('+
+ 'select place.woeid from flickr.places where (lat,lon) in('+
+ 'select Latitude,Longitude from ip.location'+
+ ' where ip="'+ip+'"))';
+ load(yql,'yqlgeo.retrieved');
+ };
+
+ function retrieveip(){
+ jsonp('http://jsonip.appspot.com/?callback=yqlgeo.ipin');
+ };
+
+ function ipin(o){
+ getFromIP(o.ip);
+ };
+
+ function getFromLatLon(lat,lon){
+ var yql = 'select * from geo.places where woeid in ('+
+ 'select place.woeid from flickr.places where lat='+
+ lat + ' and lon=' + lon + ')';
+ load(yql,'yqlgeo.retrieved');
+ };
+
+ function getFromURL(url){
+ var yql = 'select * from geo.places where woeid in ('+
+ 'select match.place.woeId from geo.placemaker where '+
+ 'documentURL="' + url + '" and '+
+ 'documentType="text/html" and appid="")';
+ load(yql,'yqlgeo.retrieved');
+ }
+
+ function getFromText(text){
+ var yql = 'select * from geo.places where woeid in ('+
+ 'select match.place.woeId from geo.placemaker where'+
+ ' documentContent = "' + text + '" and '+
+ 'documentType="text/plain" and appid = "")';
+ load(yql,'yqlgeo.retrieved');
+ };
+
+ function jsonp(src){
+ if(document.getElementById('yqlgeodata')){
+ var old = document.getElementById('yqlgeodata');
+ old.parentNode.removeChild(old);
+ }
+ var head = document.getElementsByTagName('head')[0];
+ var s = document.createElement('script');
+ s.setAttribute('id','yqlgeodata');
+ s.setAttribute('src',src);
+ head.appendChild(s);
+ };
+
+ function load(yql,cb){
+ if(document.getElementById('yqlgeodata')){
+ var old = document.getElementById('yqlgeodata');
+ old.parentNode.removeChild(old);
+ }
+ var src = 'http://query.yahooapis.com/v1/public/yql?q='+
+ encodeURIComponent(yql) + '&format=json&callback=' + cb + '&'+
+ 'env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
+ var head = document.getElementsByTagName('head')[0];
+ var s = document.createElement('script');
+ s.setAttribute('id','yqlgeodata');
+ s.setAttribute('src',src);
+ head.appendChild(s);
+ };
+
+ function retrieved(o){
+ if(o.query.results){
+ callback(o.query.results);
+ } else {
+ callback({error:o.query});
+ }
+ };
+ return {
+ get:get,
+ retrieved:retrieved,
+ ipin:ipin
+ };
+}();

0 comments on commit 8a9c079

Please sign in to comment.
Something went wrong with that request. Please try again.