Stupid experiments with Google Static Maps and ColdFusion Image functions

This post is more than 2 years old.

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">

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Brad posted on 4/8/2011 at 6:33 AM

I, for one, do love the stupid experiments for all manner of CF things, Ray. They get the creative juices flowing for real (i.e. non-stupid) experiments. Never stop the stupidness.

Comment 2 by Raymond Camden posted on 4/8/2011 at 6:35 AM

Well I'm glad you liked it. :)

Comment 3 by Jason Presley posted on 4/8/2011 at 5:13 PM

This (the b/w thing at least) to create printable pages where the content will be printed on a b/w laser. I have had issues printing color on those. All depends on the hardware and the clients perception :)

Comment 4 by Jason Presley posted on 4/8/2011 at 5:15 PM

This could be useful is what I meant to say. Sorry my brain was going faster than my fingers :)

Comment 5 by Joe Brislin posted on 4/8/2011 at 6:15 PM

Interesting concept using Coldfusion image functions. I never thought about that. I just recently finished a project (http://gettingthere.imbreso... that uses the Styled Map attributes of Google Maps. The Hue and Saturations are fairly difficult to manipulate to get just the right color but it is very powerful. There is a wizard available that can help you set the right combination - http://gmaps-samples-v3.goo....

Comment 6 by Raymond Camden posted on 4/8/2011 at 6:20 PM

I tried using that wizard - nothing seemed to work for me. Maybe I'm using it wrong.

Comment 7 by Mark Gregory posted on 4/9/2011 at 2:16 AM

Now where did I put that copy of the dreaded 1990's Lake Applet?

Comment 8 by Raymond Camden posted on 4/9/2011 at 2:17 AM

Wow - first result for java lake applet:

http://www.ibdprince.com/ja...

Comment 9 by Jeremy Battle posted on 4/9/2011 at 8:26 PM

This inspired me to try my own "stupid experiment" and I created the ability to create larger static maps than google will give you (640x640 is the max they will give you as you probably know) - http://example.jeremybattle...

Thanks cfimage! ;)

Comment 10 by Raymond Camden posted on 4/9/2011 at 8:48 PM

Dude - awesome! I thought the quality would dip but even at 1K by 1K it looks real good.

Comment 11 by Jeremy Battle posted on 4/9/2011 at 9:43 PM

Oddly the quality dips on my Xoom and my Droid 2. Not sure why really.

Google appears to rate limit the requests to static maps so it can be shut down pretty quick if there are a lot of requests from the same IP. But still, was a fun little thing to write.

Comment 12 by Raymond Camden posted on 4/11/2011 at 5:41 PM

I tested on my Inspire and it looks great.

Comment 13 by Misty posted on 5/8/2012 at 11:51 PM

That's Great, Gave a Shot and Missing 1 thing, how do i bring Mrker with the Printed One

Comment 14 by Misty posted on 5/9/2012 at 12:15 AM

seems, i am solving my own issues

hehehehe

Comment 15 by Raymond Camden posted on 5/9/2012 at 1:13 AM

Nothing wrong with that. I consider this blog a community. We can all learn from each other.