lautr.com

Hannes Blog for Development and Stuff besides

yahoo-placefinder

Utilizing HTML5 Geolocation API and Yahoo! PlaceFinder Example

| 3 Kommentare

Yeah yeah i know, HTML5 is the new web 2.0 or whatever and everyone has to blag about it, but to be honest, most of the improvments are pretty good, I’m not just talking about the semantics and the end of XHTML (Hooray) but i wont cover that here. Here is what I’m gonna do, show you what you can do with the geolocation API and Yahoos Placefinder API.

Geolocation API is by now implementet in most of the browsers besides IE, of course, so its as usual a nice-to-have thing for desktop devices, of course for mobile, its a completly different matter. But if you wanna know more about it, read it up, there are plenty of rescources avaible on the net.

Yahoos Place finder is, in there own words “Yahoo! PlaceFinder is a geocoding Web service that helps developers make their applications location-aware by converting street addresses or place names into geographic coordinates (and vice versa).” And yeah, besides the marketing spin, that is what it does, you provide latitude and latitude and Placefinder tells you where the hell you are.

I made a short example you can check it out here.

The Code is as slim as they come:
PHP:

$search = 'http://where.yahooapis.com/geocode?q='.$_POST['lat'].',+'.$_POST['lon'].'&gflags=R&appid=[yourappidhere]';
$xml = simplexml_load_file($search,'SimpleXMLElement', LIBXML_NOCDATA);
echo $xml->asXML();

HTML/JS

<h1>Utilizing HTML5 Geolocation API and Yahoo! PlaceFinder Example</h1>
<div>You are currently in <strong> </strong> - <strong> </strong>, well to be more precisely in <strong> </strong> and your ZIP is <strong> </strong>'ish</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(
function(position){
$.ajax({
type: 'POST',
url: '/sandbox/utilizing-html5-geolocation-api-and-yahoo-placefinder-example.php',
dataTyoe: 'xml',
data: ({
lat: position.coords.latitude,
lon: position.coords.longitude
}),
success: function(xml){
$('#city').html($(xml).find('city').text());
$('#country').html($(xml).find('country').text());
$('#neighborhood').html($(xml).find('neighborhood').text());
$('#plz').html($(xml).find('uzip').text());
}
});
}
);
});
// ]]></script>

So you see, with literally no Work whatsoever you can get quite some Information, whatever you with them, is of course up to you, but remember if the user provides the Information or not is up to him!

Autor: Hannes

Hi! I’m Johannes Lauter a 26 year old Web Application Developer based in Berlin ... more

3 Kommentare

  1. Hey, cool example. I didn’t get it to work, though. If I read the error correctly, it says it just doesn’t find anything but i don’t know why. It works fine on your example page so it can’t be a problem with my browser not sending the location or something like that.
    In the result set it just says “no error, found 0″.
    I have uploaded it here http://davidmay.de/osm/currentposition.php maybe you would be so kind to take a look at it, would be heavily appreciated :)

  2. hey David, pretty small error on your side, check what your php script returns (i just used firebug), its HTML+XML+HTML so the JS Function can’t get the values :)

  3. Great Idea of combining those two services but somehow I still have some problems with it. I am currently writing a HTML weather app that fetches Weatherdata from MSN Weather and should use the GeoLocation to retrieve data. no idea why but it fetches the location after the weather is fetched and so a wrong location is displayed

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*