Using CFImage to create custom map icons for Google Maps

In writing a map application with ColdFusion I needed to create some custom icons and discovered an easy way to take any small icon and create hundreds of them with sequential numbers overlayed on top of the icon.

 

There are a number of sites with free icons, but they all seem to stop at 99, I needed to go into the hundreds in some cases, which made me start to look at what cfimage can do for me.

 

First, I went I downloaded a default Google icon as my base (20x34px), then I created new blank icons with differing colors within Photoshop.  I saved all the blank icons in a directory called /icons off my root directory. Once I have all the blanks I then edit the list in the below script. 

 

The script will create a directory for each color, so for blue you will have /icons/blue/mapicon1.png thru mapicon99.png or however you create.

 

I think you could move the ImageNew out of the loop and into a variable but it works as written and is a one time conversion.

 

My next idea is to have user generated icons, by having the users select the background and text color.

 

I also want to create multiple lists to change the text color, since some backgrounds need black text.

 

This should be enough to get you started.  Enjoy.

 

 

<xmp>

<cfset whitecolorlist = "black,blue,blueball,brightgreen,chestnut,chocolate,cyan,darkblue">

<cfset currentDir = getdirectoryfrompath(getbasetemplatepath())>

<cfoutput>

<!--- Loop colors and create icons inside relative directory --->

<cfloop list="#whitecolorlist#" index="coloritem">

    

    <cfset iconcolor = coloritem>

    <cfset currentcolordirectory = currentdir & iconcolor>

    <!--- create a directory for the color if it does not exist--->

    <cfif not directoryexists(currentcolordirectory)>

        <cfdirectory action = "create" directory = "#currentcolordirectory#" >

    </cfif>

    

    

    <cfloop  from="11" to="99" index="i">

        <cfset myImage=ImageNew("blank#iconcolor#.png")> 

        <cfset ImageSetDrawingColor(myImage,"white")> 

        <cfset attr = StructNew()> 

        <cfset attr.style="bold"> 

        <cfset attr.size=9> 

        <cfset attr.font="verdana"> 

        <cfset attr.underline="no"> 

        <!--- Need to play with x offset depending how many characters.--->

        <cfif i lt 10>

            <cfset x = 7>

        </cfif>

        <cfif i gt 9 and i lt 100>

            <cfset x = 4>

        </cfif>

        <cfif i gt 99 and i lt 1000>

            <cfset x = 1>

        </cfif>

        <cfset ImageDrawText(myImage,i,#x#,12,attr)> 

        <!--- Place image in a directory based on color --->

        <cfimage source="#myImage#" action="write" 

destination="#currentcolordirectory#/mapicon#i#.png" overwrite="yes"> 

        

        <img src="/icons/#iconcolor#/mapicon#i#.png"/>

    </cfloop>

 </cfloop>

</cfoutput>

</xmp>