@@ -9,6 +9,7 @@
'city':'usercity',
'latitude':'userlat',
'longitude':'userlon',
+ 'postcode':'userpostcode',
'country':'usercountry'
}
);
addbutton.js
@@ -1,6 +1,6 @@
/*
GeoFill by Christian Heilmann
- Version: 1.0
+ Version: 1.1
Homepage: http://icant.co.uk/geofill
Copyright (c) 2009, Christian Heilmann
Code licensed under the BSD License:
@@ -9,9 +9,10 @@
geofill = function(){
var fieldstofill = null;
var postcode = null;
+ var ipdata = null;
function find(o){
fieldstofill = o;
- get('http://geoip.pidgets.com/?format=json&callback=geofill.set');
+ get('http://geoip.pidgets.com/?format=json&callback=geofill.getpc');
}
function lookup(pc){
postcode = pc;
@@ -66,13 +67,24 @@ geofill = function(){
s.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(s);
}
+ function getPostalfromIP(o){
+ ipdata = o;
+ // god I friggin love YQL
+ var url = 'http://query.yahooapis.com/v1/public/yql?q=select'+
+ '%20postal%20from%20geo.places%20where%20woeid%20in%20'+
+ '(select%20place.woeid%20from%20flickr.places%20where'+
+ '%20lat%3D%22'+o.latitude+'%22%20and%20lon%3D%22'+
+ o.longitude+'%22)&format=json&callback=geofill.set';
+ get(url);
+ }
+
function set(o){
var filtered = {
- city:o.city,
- country:o.country_name,
- postcode:o.postal_code,
- latitude:o.latitude,
- longitude:o.longitude
+ city:ipdata.city,
+ country:ipdata.country_name,
+ postcode:o.query.results.place.postal.content,
+ latitude:ipdata.latitude,
+ longitude:ipdata.longitude
}
for(var i in fieldstofill){
var x = document.getElementById(fieldstofill[i]);
@@ -84,5 +96,11 @@ geofill = function(){
fieldstofill.callback(filtered);
}
}
- return {set:set,find:find,pc:setPostcode,lookup:lookup}
+ return {
+ set:set,
+ find:find,
+ pc:setPostcode,
+ lookup:lookup,
+ getpc:getPostalfromIP
+ }
}();
geofill.js
@@ -48,7 +48,7 @@
color:#fff;
}
#ft a{
- color:#fc6;
+ color:#9cf;
}
html,body{
background:#666;
@@ -57,31 +57,59 @@
padding:.2em 0;
}
#bd{background:#fff;border:1em solid #fff;}
+#nav li{
+ list-style:none;
+}
+#nav li a {
+ background:#369;
+ color:#fff;
+ padding:.2em 1em;
+ display:block;
+ text-decoration:none;
+ -moz-border-radius:5px;
+ margin:.5em 0;
+ color:#fff;
+}
+#nav li a:hover {
+ background:#69c;
+}
</style>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd" role="banner"><h1>GeoFill - automatically filling form data with geo information</h1></div>
<div id="bd" role="main">
- <p>Wouldn't it be cool to be able to allow users to automatically fill parts of a form, especially the location part of addresses? Services like <a href="http://fireeagle.yahoo.net/">FireEagle</a> allow you to do that but it is not very likely that mainstream users will have signed up to them.</p>
- <p>One thing we can do is recognise the user's IP number or allow the user to enter one thing and try to guess the rest for them. GeoFill is a JavaScript wrapper library that uses Yahoo Geo and GeoIP to do that for you. Try the following examples:</p>
-
- <h2>Examples</h2>
+ <div class="yui-gc">
+ <div class="yui-u first">
+ <p>Wouldn't it be cool to be able to allow users to automatically fill parts of a form, especially the location part of addresses? Services like <a href="http://fireeagle.yahoo.net/">FireEagle</a> allow you to do that but it is not very likely that mainstream users will have signed up to them.</p>
+ <p>One thing we can do is recognise the user's IP number or allow the user to enter one thing and try to guess the rest for them. GeoFill is a JavaScript wrapper library that uses Yahoo Geo and GeoIP to do that for you. Try the following examples:</p>
+ <h2>Examples</h2>
- <ul id="demos">
- <?php
- $demos = array('suggestion'=>'Provide a location suggestion based on IP','searchbutton'=>'Provide a button to get data','postcode'=>'Lookup from postcode');
- foreach(array_keys($demos) as $d){
- if($_GET['demo']===$d){
- echo '<li><strong>'.$demos[$d].'</strong></li>';
- } else {
- echo '<li><a href="index.php?demo='.$d.'">'.$demos[$d].'</a></li>';
- }
- }
-
-
- ?>
- </ul>
+ <ul id="demos">
+ <?php
+ $demos = array('suggestion'=>'Provide a location suggestion based on IP','searchbutton'=>'Provide a button to get data','postcode'=>'Lookup from postcode');
+ foreach(array_keys($demos) as $d){
+ if($_GET['demo']===$d){
+ echo '<li><strong>'.$demos[$d].'</strong></li>';
+ } else {
+ echo '<li><a href="index.php?demo='.$d.'">'.$demos[$d].'</a></li>';
+ }
+ }
+
+
+ ?>
+ </ul>
+
+ </div>
+ <div class="yui-u">
+ <ul id="nav">
+ <li><a href="http://www.wait-till-i.com/2009/06/07/adding-address-information-automatically-to-forms-with-geofill/">Comment on the blog</a></li>
+ <li><a href="http://github.com/codepo8/JavaScript-Geo-Fill/tree/master">GeoFill on GitHub</a></li>
+ </ul>
+
+ </div>
+ </div>
+
<?php if(isset($_GET['demo'])){?>
<div class="yui-gc">
<div class="yui-u first">
index.php
@@ -17,6 +17,7 @@
but.onclick = function(){
$('usercity').value = o.city;
$('usercountry').value = o.country;
+ $('userpostcode').value = o.postcode;
$('userlat').value = o.latitude;
$('userlon').value = o.longitude;
function $(id){
suggestion.js
9a89c45f30768b891744a5477322e6e8beaff7ff
Christian Heilmann
chris.heilmann@gmail.com
http://github.com/codepo8/JavaScript-Geo-Fill/commit/21a67d424835069cea18cfb9692240f1916b929e
21a67d424835069cea18cfb9692240f1916b929e
2009-06-08T08:16:12-07:00
2009-06-08T08:16:12-07:00
added postcode lookup for ID results!
18d13d8efa4db531b66f07be94b69ba3180cb685
Christian Heilmann
chris.heilmann@gmail.com