Christian Heilmann

Posts Tagged ‘maps’

Indiana Jones maps with HTML5 and Google Maps

Thursday, December 16th, 2010

I am right now in the US for my first week in Mozilla (back to back meetings and lots of discussions and interviews of awesome going on here) and when I got back to the hotel USA had all the Indiana Jones movies playing. Now, I always loved the travel sequences with the moving red line and map and the video of the plane on top (and its copy in Rocket Ranger on C64). As I had my trusty MBA on me I thought I give it a go to re-create the effect in HTML5 - and I did:

You can See the demo online and read the details on the Mozilla hacks blog: Syncing HTML5 video with Google Maps. The source is of course available on GitHub.

I was pretty amazed how easy it is to achieve the effect. Most of playing with HTML5 is simply letting yourself go and have a run for it rather than thinking of how hard it might be.

TTMMHTM: Rounded, Braille, selling your soul and printing from an iPad

Friday, April 16th, 2010

Things that made me happy this morning:

GeoPlanet Explorer – another showcase for quick development with YQL and YUI

Friday, February 26th, 2010

A few days ago Gary Gale pinged me on messenger and subsequently carried a cup of coffee to my desk to pester me with another challenge. This time he talked about just how rich and cool the GeoPlanet data is and that it is tough to show people this in a simple interface. Internally we have a few pretty cool tools for testing and analyzing the data but most of them are too loaded with information only understandable for the geo folk out there. So in essence, the benevolent overlord of geo technologies in Yahoo was asking to build a simple interface to navigate the GeoPlanet data.

Well, this morning I got a chance to have a go at his request and here’s the GeoPlanet Explorer interface for you. Check the following screencast to see it in action:

Building the interface wasn’t magic – I used YQL to access the data, write a few lines of PHP to display it in a nested list and then added a few lines of YUI3 JavaScript to collapse and expand the location details.

Notice that the whole interface uses progressive enhancement throughout. If you have no JavaScript at your disposal you get a static map and all the information in one single page. The lat/lon links open in Yahoo Maps and you can see the location there.

If you have JavaScript enabled the interface collapses and the map is Ajax and will be refreshed every time you click on a lat/lon link.

The source code of the GeoPlanet Explorer is available on GitHub and it can give you a few pointers how to use the GeoPlanet API with YQL for your own solutions.

TTMMHTM – BBC Web animals, two very cool APIs and there’s something about the LG logo

Tuesday, February 23rd, 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>'+
       var value = $('#loc').attr('value');
       if (geocoder) {
            function(point) {
              if (!point) {
                alert(value + " not found");
              } else {
                map.setCenter(point, 13);
                var marker = new GMarker(point);
       return false;
         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;

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');
 var copyright = $('#map div[dir=ltr]');