Spicing up Google Maps in Flash

by Andy Woodruff on February 25, 2009

Note from the future: the example in this post broke somewhere along the line, but this whole post is obsolete anyway now that the Google Maps API allows styled maps!

This isn’t news to everyone, but it’s worth pointing out the fun things one can do with maps using the ActionScript ColorMatrixFilter. Tired of the boring old yellow and orange Google map in the Flash API (or any other map in Flash/Flex)? Lay down a ColorMatrixFilter on that sucker!

The ColorMatrixFilter, if it needs to be pointed out, essentially allows you to mix up the red, green, blue, and alpha channels of vector or raster graphics to produce exciting new colors. Adobe has a nice little article explaining it, along with an interactive demo.

Here’s a little example of simple effects I threw together for Google Maps. Click the links at the bottom for different looks.

Get Adobe Flash player

I poked around the Google Maps Flash API to find exactly where to apply the filter. If you apply it directly to the Map instance, you’ll color everything, including the Google logo and whatever else floats on top of the map. One level deeper is better, but will still color makers and info windows. A second level deeper is the spot. It’s basically like this, where map is the Map instance:

var a:Sprite = map.getChildAt(1) as Sprite;
var b:Sprite = a.getChildAt(0) as Sprite;
b.filters = [new ColorMatrixFilter([ /* color matrix values */ ])];

In the example above, “Winter” takes the red and green input channels and distributes them equally across all channels, but the blue input remains blue on output. The result is an desaturated, icy-looking blue. “Inverted Grayscale” turns everything to grayscale, but additionally sets the map’s blendMode property to “subtract” and sets it against a white background. That inverts the grayscale image for a somewhat stylish effect.

Now, let’s face it: this is a quick and easy but very limited method for “customizing” a map. (And to be honest, I’m not sure how kosher it is according to the terms of service.) It can make a map look cool, but applying the effect to pre-made tiles means that you’re altering the colors of all features on the map. You can’t keep the official blue and red of interstate highway shields, for example.

So keep this little trick in mind, but be more excited about actual customization (and open data) with CloudMade.

There are 4 comments in this article:

  1. May 15, 2009Martijn says:

    Hi.

    This is awesome!
    I’m trying to make my maps in grayscale and show normal colors on mouse over.

    Question:

    I managed it to make the complete map in grayscale, but when I try to use your map.getChildAt(1) trick, I get errors.

    I know this is not a supportforum, but if you could post some more of the AS code, I would be greatfull to you!

  2. May 15, 2009Martijn says:

    Nevermind.

    I forgot to add a sprite to the Library.

    Thanks for this Tip!

  3. November 16, 2009Markoff says:

    Martijn can you send me working fla for Inverted Grayscale because i can’t do it. Something’s wrong with my code. Thank you markoff__aatt__dir.bg (replace __aatt__ with “@”)

  4. December 19, 2011Ronald says:

    it doesn’t work anymore..