• You are currently browsing the Christian Heilmann blog archives for January, 2010.

  • Archive for January, 2010

    Adding map links and a small map to any text using JavaScript – addmap.js

    Friday, January 29th, 2010

    As part of a larger article, I am currently building some tools that use geographical information. The first one is a pure JavaScript solution to link locations in a text to Google Maps and to show a small map under the text. You can see it in action by clicking the screenshot below.

    Analyse text and add a map with its locations in pure JavaScript by  you.

    All you need to do to use the script is get your own Google Maps key and embed the script in the page you want to analyse, giving it the ID of the main text element as a parameter:

    <script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
    <script>
    addmap.config.mapkey = 'YOUR_API_KEY';
    addmap.analyse('content');
    </script>

    You can customise the look and feel by writing your own CSS for the generated HTML and setting the addmap.config.width and addmap.config.height properties to resize the map.

    Under the hood here is what happens:

    The code of addmap.js is available on GitHub.

    TTMMHTM: Book pirates, Cabinet Office, Socks of Win and browser stats

    Wednesday, January 27th, 2010

    TTMMHTM: Meaning of love, Windows 3.11, geeky decor and my dates in the valley so far

    Monday, January 25th, 2010

    Things that made me happy this morning:

    Finding the current location by IP and with the W3C Geo API

    Monday, January 25th, 2010

    I was always fascinated by those ads that show you “hot contacts in {city}” not because of the hot contacts, but because they always changed to where I was at the time.

    I was also quite interested in the fact that they were always a bit off (again, the city, not the contacts). As I like to find things out, here’s a demo of just how far the location of these ads can be off:

    The difference between IP location and Geo location by  you.

    You can see your results by visiting the demo page and allowing it to get your location if you use a browser that supports the W3C geo location API.

    Here’s how this works:

    You can guess the location of a user by their IP and Rasmus Lerdorf wrote a nice API to do that at http://geoip.pidgets.com/. Using that, you can read the IP in PHP and call the API with cURL:

    if ($_SERVER['HTTP_X_FORWARD_FOR']) {
    $ip = $_SERVER['HTTP_X_FORWARD_FOR'];
    } else {
    $ip = $_SERVER['REMOTE_ADDR'];
    }
    $url = 'http://geoip.pidgets.com/?ip='.$ip.'&format=json';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);
    $data = json_decode($output);
    $lat = $data->latitude;
    $lon = $data->longitude;

    This API is only a wrapper for the Maxmind API and for some reason rounds the latitude and longitude from time to time. You can get more accurate results using the Javascript Web Service of Maxmind directly:

    <script src="http://j.maxmind.com/app/geoip.js"></script>
    <script>
    var lat = geoip_latitude();
    var lon = geoip_longitude();
    </script>

    The most detailed data can be obtained with the W3C Geo API though:

    if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
    var lat = position.coords.latitude;
    var lon = position.coords.longitude
    });
    }

    And that is all there is to it :)

    TTMMHTM:How web sites work, how many people see them, open data and lots of accessibility and “girly” stuff

    Sunday, January 24th, 2010

    I am right now sitting at Heathrow Terminal 5 in London on my way outbound to a two week stint in the Silicon Valley (Sunnyvale/Mountain View) to meet with the US team. And here are the things that made me happy this morning: