Google’s April Fools’ Day 8-bit Map

Today, Google launched its annual April Fool’s joke – go to http://maps.google.com right now and you’ll see a new “Quest” map style in addition to the regular satellite and aerial map styles.

Looks a little…. familiar? Here’s the 8-bit tileset for Bing Maps I described just over two weeks ago:

You’re welcome, Google, the invoice is in the post…

More Tilt-Shift Trickery… with Bing Maps Birdseye

A few weeks ago, John Nelson of IDV Solutions posted an infographic describing how to simulate tilt-shift photography using aerial imagery from Bing Maps. You can see his guide on visual.ly.

While using Bing Maps imagery as a source for pseudo-tilt-shift imagery is an interesting idea, I think John has missed a trick, because he only uses Bing Maps 2d aerial imagery. Aerial imagery is shot looking straight down from above, so that all the features in the image lie on an essentially flat plane parallel to the lens. Therefore, there’s no reason to expect that features lying further away from the focal point of the image would be any more out of focus than those in the centre (even if this were a scene from a model village, which is what the tilt-shift effect is generally used to simulate).

I think that a much better effect could be produced by using Bing Maps birdseye imagery, which is shot at an oblique angle. Therefore, blurring can be applied to mimic the varying depth of field you’d get throughout the image if this were a close-up shot of a miniature scene. Another point to note is that the plane of focus does not have to be aligned to the plane of the image (i.e. the part of the image that is in sharp focus does not have to be a perfectly horizontal band). It can sometimes be more effective to use an oblique plane of focus -that’s what the “tilt” bit of a tilt-shift lens enables you to achieve.

To demonstrate, here’s some quick pseudo tilt-shift Bing Maps birdseye images I made using the technique described in my blog post from last year. They give the impression that the whole world is one big model village….

I’m now wondering if it would be possible to create a “dynamic” tilt-shift filter in HTML5 or Silverlight to apply this effect in realtime as you panned across Bing Maps in birdseye view. Hmmm…..

Rotating Bing Maps

The question of how to “rotate” a Bing Map comes up a surprising number of times on the MSDN Bing Maps forums.

The Bing Maps Silverlight Control has a Heading property, which, according to the documentation: “when overridden in a derived class, gets or sets the directional heading of the map”. However, I certainly can’t get it to have any effect, and it seems I’m not the only one.

map.Heading = 0;

map.Heading = 180; (Notice the difference? Nope, me neither.)

The Bing Maps AJAX v7 control also has a heading property, which is described here as “The directional heading of the map. The heading is represented in geometric degrees with 0 or 360 = North, 90 = East, 180 = South, and 270 = West”. What the documentation doesn’t mention is that the heading is only taken into account when using Birdseye view. So, in the examples below you can see four different aspects of Norwich castle in Birdseye view by changing the “heading” to represent north, east, south, and west:

map.setView( { heading:0 } );	map.setView( { heading:90 } );
map.setView( { heading:180 } );	map.setView( { heading:270 } );

However, you can choose from these four headings only in Birdseye view. If you’re using the aerial or road map style then the “heading” property, as in the Silverlight control, has no effect.

map.setView( { heading:180 } );

map.setView( { heading:270 } );

So, how can you create an aerial or road Bing Map with an arbitrary rotation, oriented so that “up” was southwest, or 40°, say?

Rotating the Bing Maps Silverlight control

If you’re using the Silverlight control you can apply a RotateTransform to the Map element. The basic XAML syntax is as follows:

<UserControl x:Class="BingMapsSilverlightRotation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">

  <Grid x:Name="LayoutRoot">
    <m:Map CredentialsProvider="{StaticResource MyCredentials}">
      <m:Map.RenderTransform>

        <RotateTransform Angle="15" />

      </m:Map.RenderTransform>
    </m:Map>
  </Grid>
</UserControl>

The map control (and all the elements contained within it) will then be rotated clockwise by the Angle specified in the RotateTransform. The result in this case is:

Note that, as for any of the techniques described here, both the background map image and the labels will be rotated. This is unavoidable because the labels are hard-baked into the tile images themselves (though you could of course use one of the unlabelled map styles and then add your own map labels from OpenStreetMap, say).

Rotating the Bing Maps AJAX v7 control

To rotate the Bing Maps AJAX control, you can use the CSS3 transform property. Unfortunately (as is so often the case with web development), there is little standardisation between how different browsers implement the transform feature, and you’ll have to apply a range of variations on the theme to create a cross-browser solution. For example, the CSS styles required to rotate any element by 15 degrees clockwise across different browsers are as follows:

transform:rotate(15deg); /* CSS3 "standard", but not actually used by any mainstream browser! */
-ms-transform:rotate(15deg); /* Internet Explorer */
-moz-transform:rotate(15deg); /* Firefox */
-webkit-transform:rotate(15deg); /* Safari and Chrome */
-o-transform:rotate(15deg); /* Opera */

You can apply these transforms directly onto the div element containing the map. The problem is that, as shown below, this will not only rotate the map image, but also the navbar, scalebar, and copyright notices:

To rotate only the map tiles, you need a more specific CSS selector to target those elements that should be rotated. Unfortunately, the various elements of the Bing Map control generally do not have unique IDs or classes, so you have to rely on child selectors. Fortunately, the navbar itself does have a class (MicrosoftNav), so you can ensure this is not rotated by using the not() selector. As at the time of writing, the following CSS selector targets all the divs that contain image tiles in a Bing Maps control created in the “mapDiv” div:

#mapDiv > div.MicrosoftMap > div:not(.MicrosoftNav)

Usual caveats apply – this may break at any time in the future if the Bing Maps control gets updated yada, yada… but right now it works, as demonstrated in the code listing below tested in IE9, Firefox 11 and Chrome 17:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Bing Maps Rotation</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    #mapDiv > div.MicrosoftMap > div:not(.MicrosoftNav)
    { 
      transform:rotate(15deg);
      -ms-transform:rotate(15deg); /* IE 9 */
      -moz-transform:rotate(15deg); /* Firefox */
      -webkit-transform:rotate(15deg); /* Safari and Chrome */
      -o-transform:rotate(15deg); /* Opera */
    }
  </style>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
    function GetMap() {
      var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
              { credentials: "AtGUpcoIpD5G3ty3r0wnfr!ggingk3yjg779XlZPsKWfhP",
                center: new Microsoft.Maps.Location(54, -4),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 4
               });
    }
  </script>
</head>
<body onload="GetMap();">
  <div id="mapDiv" style="position:relative; width:400px; height:300px;" />    
</body>
</html>

Some further examples:

Fun with NFC Part Three – Make-your-own Sony Xperia SmartTags

(Before continuing, I should state that I am indebted to a reader, “James”, who provided the Sony SmartTag URIs in a comment to my previous post.)

My explorations into the world of NFC on my Android mobile phone continue. After initial disappointment at the pre-installed Sony Xperia SmartTags application (which is apparently unusable without Sony Xperia-branded SmartTags, which aren’t currently available in the UK), I then had moderate success with two alternative applications from the Google Play shop: NFC Task Launcher and NFC Quick Actions Free, which can both be programmed to perform a range of actions on your phone in response to scanning a custom NFC tag. Neither application was perfect for my purposes, but perhaps the most impressive feature about them was that, within a day of writing about them, I had direct communication with the developers of both applications. What’s more, both applications are clearly under active development and show lots of potential for the future, and I wish them both luck.

However, then came an interesting twist in the story, as “James” provided a key bit of information – the URL that is encoded on each of Sony’s Xperia SmartTags. With this knowledge, you can create your own SmartTags using any regular, generic NFC tag, saving yourself the ridiculously overinflated £15 price asked by Sony, and make use of the built-in SmartTags application in the process. Here’s how:

1.) Get some NFC tags

Head over to somewhere like http://rapidnfc.com/ and pick up four generic NFC tags. You can get wristbands/key fobs/stickers – whatever you want really. I’ve tried “ultralight”, “NTAG203”, and “1k” tags and they all seem to work fine with my Xperia S. Note that the SmartTags application only recognises four different tags, so there’s no point getting more than that (not for this exercise, anyway).

2.) Program the Tags

To simulate the different-coloured SmartTags, you need to write the appropriate corresponding URI to an NFC tag. The only slight problem is that, instead of a website like http://www.example.com, the SmartTag URIs use a custom URI prefix of semc://.

Not all NFC writers are capable of writing URIs using custom prefixes. Unfortunately, neither NXP TagWriter nor NFC Quick Actions – the two applications I already had installed on my handset are currently capable of doing so:

NXP TagWriter forces you to create a URL that begins with the http://www. prefix

NFC Quick Actions will generate an error if you try to write a URL that does not begin with http.

Fortunately, there are still plenty of other alternatives, and the free NFC Tag Writer & Reader from Connecthings allows to specify any custom URL you want. So, install and launch the application, and write the following URLs to each of your four NFC tags:

• Blue (Car) tag: semc://liveware/A1/1/NT1/1/smarttags1
• Red (Home) tag: semc://liveware/A1/1/NT1/2/smarttags1
• Black (Bedroom): semc://liveware/A1/1/NT1/3/smarttags1
• White (Office): semc://liveware/A1/1/NT1/4/smarttags1

3.) Assign actions to your new “SmartTags”

Now, return to the home screen and try scanning one of your newly-programmed “Smart” tags. The Xperia SmartTags application should recognise it and launch accordingly. You can then assign a set of actions that should be carried out every time each tag is scanned.

The range of actions that can be assigned using Sony’s SmartTags application seems pretty similar to those available in other NFC applications. The advantages of the SmartTags application is that it is free (unlike NFC Task Launcher) and supports multiple actions assigned to the same tag (unlike NFC Quick Actions). The biggest disadvantage, however, is that it only seems to recognise four unique tags. I did try programming the hypothetical next URI in the series: semc://liveware/A1/1/NT1/4/smarttags1, but, perhaps unsurprisingly, it wasn’t recognised.

As I said previously, both NFC Task Launcher and NFC Quick Actions seem to be under active development, and the discovery of how to make the SmartTags app work with generic NFC tags certainly doesn’t negate the possible use of other NFC applications on the Xperia S – it just opens up another possible avenue of NFC. Hopefully this post will help let you explore that avenue while saving you 15 quid or waiting 2 months for the official Sony SmartTags to come out