I've blogged before about the Google Static Map API (see this entry from last year), but recently an interesting question came in about the color of Google Maps. The reader wanted to know if it was possible to create black and white maps. Both the JavaScript-enabled maps as well as the static maps allow for some deep color styling. (See the docs here for how to style static maps.) But hue and saturation are greek to me. I was curious to see how easy ColdFusion could possibly make this. Here's what I came up with. Probably not useful to anyone but fun.

First - begin with a simple map:

<cfset loc = "Lafayette, Louisiana"> <cfset zoom = 13> <cfset size="400x400"> <cfset mapurl = "http://maps.google.com/maps/api/staticmap?center=#urlEncodedFormat(loc)#&zoom=#zoom#&sensor=false&size=#size#">

<cfoutput> <img src="#mapurl#"> </cfoutput> <p/>

This creates:

So - how can we make this black and white? Don't forget that ColdFusion's imageNew function allows you to initialize an image with a URL. So we can take map URL and turn it into a ColdFusion image object:

<cfset mymap = imageNew(mapurl)>

Which means we can then do this...

<cfset imageGrayScale(mymap)> <cfimage action="writeToBrowser" source="#mymap#">

And get...

Not exactly art - but if you want to get fancy, you can download imageUtils from RIAForge and do stuff like - oh - add a drop shadow:

<cfset mymap = imageNew(mapurl)> <cfset imageUtils = createObject("component","imageutils.imageUtils")> <cfset mymap2 = imageUtils.makeShadow(mymap,5,5)> <cfimage action="writeToBrowser" source="#mymap2#">

Or even more silly...

<cfset mymap = imageNew(mapurl)> <cfset mymap3 = imageUtils.reflectImage(mymap, "Bottom")> <cfimage action="writeToBrowser" source="#mymap3#">

Here's the entire template below with the path to my desktop obfuscated a bit...

<cfset loc = "Lafayette, Louisiana"> <cfset zoom = 13> <cfset size="400x400"> <cfset mapurl = "http://maps.google.com/maps/api/staticmap?center=#urlEncodedFormat(loc)#&zoom=#zoom#&sensor=false&size=#size#">

<cfoutput> <img src="#mapurl#"> </cfoutput> <p/>

<cfset mymap = imageNew(mapurl)> <cfset imageGrayScale(mymap)> <cfimage action="writeToBrowser" source="#mymap#"> <cfimage action="write" source="#mymap#" destination="c:\users\notraymond\desktop\gmap.png" overwrite="true"> <p/>

<cfset mymap = imageNew(mapurl)> <cfset imageUtils = createObject("component","imageutils.imageUtils")> <cfset mymap2 = imageUtils.makeShadow(mymap,5,5)> <cfimage action="writeToBrowser" source="#mymap2#"> <cfimage action="write" source="#mymap2#" destination="c:\users\notraymond\desktop\mapshad.png" overwrite="true"> <p/>

<cfset mymap = imageNew(mapurl)> <cfset mymap3 = imageUtils.reflectImage(mymap, "Bottom")> <cfimage action="writeToBrowser" source="#mymap3#"> <cfimage action="write" source="#mymap3#" destination="c:\users\notraymond\desktop\mapref.png" overwrite="true">