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

  • Archive for February, 2010

    TTMMHTM: Scuba attacks in Norway,safer internet, mouse tracking and SMS API

    Wednesday, February 10th, 2010

    Things that made me happy this morning:

    Rotating maps with CSS3 and jQuery

    Tuesday, February 9th, 2010

    One thing that annoys the heck out of me with maps you see on a screen is that you can’t rotate them. When I look at a real map I constantly turn it around so that I face in the right direction. Google maps lately added this feature in the hybrid and satellite maps but I wanted to do that with the simple maps and also other map providers.

    The solution was CSS3. With the rotation transformations you can arbitarily turn elements. Of course this differs again from browser to browser which is why it made sense to me to find a library plugin that does that. Zachary Johnson build one of those and using this together with the Google Maps API it was pretty easy to build a rotating map:

    Rotating a map with CSS3 and jQuery by  you.

    The code itself is very easy – thanks to the transformation work already done in Zach’s code:

    google.load("maps", "2.x");
    function initialize() {
    var mapcontainer = $('#mapcontainer');
    var mapdiv = $('#map');
    var geocoder = new GClientGeocoder();
    var map = new google.maps.Map2(mapdiv);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
    mapcontainer.after('<div id="buttons">'+
    '<form id="f"><label for="loc">Location:</label>'+
    '<input type="text" id="loc">'+
    '<input type="submit" value="go"></form>'+
    '<p>Press R and L to rotate map, = to reset.</p>'+
    '<p>Use cursor keys to move.</p>'+
    '<p>Zoom with + and -.</p>'+
    '</div>');
    mapcontainer.attr('tabIndex','-1');
    mapcontainer.focus();
    $('#f').submit(function(event){
    var value = $('#loc').attr('value');
    if (geocoder) {
    geocoder.getLatLng(
    value,
    function(point) {
    if (!point) {
    alert(value + " not found");
    } else {
    map.setCenter(point, 13);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    mapcontainer.focus();
    }
    }
    );
    }
    return false;
    });
    mapcontainer.keydown(function(event){
    switch(event.keyCode){
    case 82: mapdiv.animate({rotate: '+=5deg'}, 0); break;
    case 76: mapdiv.animate({rotate: '-=5deg'}, 0); break;
    case 40: map.panDirection(0,-1); break;
    case 38: map.panDirection(0,1); break;
    case 39: map.panDirection(-1,0); break;
    case 37: map.panDirection(1,0); break;
    case 107: map.setZoom(map.getZoom()+1); break;
    case 109: map.setZoom(map.getZoom()-1); break;
    case 61: mapdiv.animate({rotate: '0'}, 0); break;
    }
    });
    }
    google.setOnLoadCallback(initialize);
    

    Of course I was not the first with this. The StreetView Fun demo by Lim Chee Aun (@cheeaun) has a similar implementation (click “maps” in the demo to see it):

    StreetView Fun by  you.

    Things to fix

    • Map navigation: as you might have already experienced, dragging the map is becoming very confusing. This cannot really be solved as it would require Google Maps to know the rotation. Right now I am using the panDirection method to move the map with the cursor keys – a cleaner way would be to use PanTo and really calculate the next place to pan to taking into consideration the angle of the map. Any volunteers?
    • I am quite sure I am violating Google’s terms and conditions with this as I am cropping off the copyright.I found a way to display the copyright and Google branding:
    GEvent.addListener(map, "tilesloaded", function() {
    var logo = $('#logocontrol');
    logo.attr('style','');
    var copyright = $('#map div[dir=ltr]');
    copyright.attr('style','');
    $('#mapinfo').append(logo);
    $('#mapinfo').append(copyright);
    });

    Explaining what YQL is to non-technical people

    Monday, February 8th, 2010

    Giving technology to the world – a talk about writing good code examples

    Friday, February 5th, 2010

    One of the things I love about my company is that you are perfectly allowed in Yahoo to give “Fire and Brimstone” talks to rally your colleagues. It is a very open company and if you can back up criticism with proof and offer solutions people are happy to listen to you.

    Last Thursday I took the opportunity of being in the Silicon Valley to give a talk about giving technology to the world, pointing out mistakes we made in explaining our services and APIs, what works well and how some competitors do a great job at explaining complex technology in an easy to understand fashion.

    It was a great opportunity to explain the concepts of developer evangelism to an internal audience who hadn’t yet read anything about the matter of seeing developers as an audience.

    Check the slides on SlideShare and the audio on archive.org:

    Listen to the Audio of the talk on archive.org:

    Do you know any great API sandboxes and documentation? I’d be happy to have more positive examples!

    Building quick web applications by using YQL and YUI as building blocks

    Thursday, February 4th, 2010

    This is a talk I gave two days ago in the Sunnyvale office of Yahoo explaining how I built some of the sites you might have seen like Keywordfinder, GeoMaker, GooHooBi or UK House Prices.

    There is actually no magic to it – I am not a superhuman developer. The main trick to build products like that really fast is to use building blocks that work, separate concerns of the application (APIs for the backend returning HTML, JavaScript for behaviour and Ajax and CSS for look and feel).

    Without further ado, here is the slide deck for you to go through:

    The audio recording

    The audio of the talk is available on archive.org

    The preview in the slides

    One new demo I built for the talk was Flickr Collector which allows you to quickly collect photos from flickr and get the source code for them easily add them to blog posts and articles.

    Flickr collector by  you.

    The source codes

    The talk was filmed and will be available on the YUI Theater soon.