Thursday, December 5, 2013

Getting around the five icon limit in the Google Static Maps API

Our application uses the Google Maps API, including the static maps API. We use custom icons for our markers to help make the maps better match our brand. In the live maps this isn't an issue and we can have as many custom markers as we like. But Google limits you to 5 custom icons in static maps, even with a business license. Most of our icons look roughly the same, they just have different numbers in them to function as our labels, so we quickly exceed that 5 icon limitation.

My methods for getting around this quickly evolved.

I started by not even knowing the limitation, by test case only had 5 icons, so it all seemed fine. In reality as soon as my users would have more than 5 my first 5 were custom and everything after that was the standard Google Map inverted teardrop marker with a dot in it. Not cool as it totally broke our branded look, and made the map look inconsistent.

Once the problem was realized I put a switch in. If 5 or less, use our branded icons, 6 or more, use all teardrops, with the label set to be number I need. This was better, as it was consistent at least, however; the map did not look great when framed with the style of our app when there were more than 5 icons. Furthermore the label property of the teardrop markers is limited to 1 character, so as soon as we had 10 icons it was back to having teardrops with dots in them, which are pretty useless for us.

So now I came up with the solution that probably attracted you to this post. I'm going to try to give it to you at a high level so that you can make it work with your language of preference, but any example are going to be in ColdFusion since that's what we use.


  1. You probably already know how, and depending on your source it's going to be different anyway, but collect up all your map data. Required bits are going to be: center point, zoom, map type, and output image size. I am going to assume sensor (if the application has access to GPS) is false. Also you are going to need all of your marker information which will include the icon you are going to use, and the geo coordinates of them.
  2. I POSTed this all to the CF page that is going to make all the magic happen.
  3. Map your first 5 points as normal. Get the results as a .png, ex1 below
  4. Map your next 5 points but add "style=feature:all|visibility:off" to the query string, get result as a .png. This will give you a png with a transparent background but will have all of your marker icons on it. It will be the same size as your initial map, and the markers will be placed correctly withing that rectangle. ex2 below.
  5. Watermark that image on top of your initial map. ex3 below, NOTE: this step is probably going to vary the most depending on your language of choice and what image manipulation features it offers.
  6. Repeat 4 and 5 until you have all of your markers.
  7. Write out you image with all of the markers now on it. ex4 below.

ex 1:


<cfhttp url="http://maps.googleapis.com/maps/api/staticmap" method="get" path="#PathWhereIWillStoreTempMapImages#" file="#TempMapImageFileName1#.png" getasbinary="yes">
 <cfhttpparam type="url" name="size" value="800x800">
 <cfhttpparam type="url" name="format" value="png">
 <cfhttpparam type="url" name="key" value="#MyGoogleAPIKey#">
 <cfhttpparam type="url" name="center" value="38.897701,-77.036527">
 <cfhttpparam type="url" name="zoom" value="15">
 <cfhttpparam type="url" name="maptype" value="roadmap">
 <cfhttpparam type="url" name="sensor" value="false">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon1.png|38.886839,-77.004743">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon2.png|38.903001,-77.018238">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon3.png|38.705634,-77.035854">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon4.png|38.886839,-77.004743">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon5.png|38.884658,-77.023684">
</cfhttp>


ex2:


<cfhttp url="http://maps.googleapis.com/maps/api/staticmap" method="get" path="#PathWhereIWillStoreTempMapImages#" file="#TempMapImageFileName2#.png" getasbinary="yes">
 <cfhttpparam type="url" name="size" value="800x800">
 <cfhttpparam type="url" name="format" value="png">
 <cfhttpparam type="url" name="key" value="#MyGoogleAPIKey#">
 <cfhttpparam type="url" name="center" value="38.897701,-77.036527">
 <cfhttpparam type="url" name="zoom" value="15">
 <cfhttpparam type="url" name="maptype" value="roadmap">
 <cfhttpparam type="url" name="sensor" value="false">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon6.png|39.023456,-77.054743">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon7.png|38.963001,-77.048238">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon8.png|38.755634,-77.055854">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon9.png|38.826839,-77.044743">
 <cfhttpparam type="url" name="markers" value="icon:http://www.mywebsite.com/icon10.png|38.814658,-77.033684">
 <cfhttpparam type="url" name="maptype" value="roadmap">
</cfhttp>


ex3:


<cfimage source="#PathWhereIWillStoreTempMapImages#/#TempMapImageFileName1#.png" name="layer_1">
<cfimage source="#PathWhereIWillStoreTempMapImages#/#TempMapImageFileName2#.png" name="layer_2">
<cfset ImagePaste(layer_0,layer_this,0,0)>


ex4:


<cfimage action="write" overwrite="yes" source="#layer_1#" destination="#PathWhereIWillStoreTempMapImages#/#TempMapImageFileName1#.png">


I reviewed the license and TOS for the static maps API, and I can't find anything about how this might be a violation. If it somehow is, please let me know and I will cease using this method and remove this post.

Friday, April 26, 2013

Windows Subversion Server Hook Scripts in Batch

We run all windows servers over here and that includes the server I get to run Subversion on. This is a less than ideal situation as even the best Windows Subversion servers are still locked down to http instead of the native svn protocol. It's not as bad as it sounds though, svn1.7 is actually really fast, even over http and even with a stupidly large repository. The problem I've really come up against though is hook scripts. There is literally one example hook script for Windows, and all it really does is force comments. Valuable, yes, but this is not all we can do. If you've found this page I'm sure you've already seen it, it goes like this:


@echo off          
setlocal
set REPOS=%1  
set TXN=%2

svnlook log %REPOS% -t %TXN% | findstr ...... > nul  
if %errorlevel% gtr 0 (goto err) else exit 0  

:err  
echo ---------------------------------------------- 1>&2   
echo Please add a log message to your commit.       1>&2  
echo ---------------------------------------------- 1>&2 
exit 1


In fact this actually checks for a commit message of at least six characters using the bastardized version of regex in the findstr utility. Batch is archaic, and I have to admit I am a complete novice with it, but it doesn't work like any language I've ever learned. Where batch really breaks for me is I want my pre-commit hook to not only force comments, but block anyone but me from committing to the trunk. So I use svnlook changed to see what's being changed. it looks something like this:

A   branch/vendors/deli/
A   branch/vendors/deli/chips.txt
D   branch/trunk/test.txt
A   trunk/vendors/deli/sandwich.txt
A   trunk/vendors/deli/pickle.txt
U   trunk/vendors/baker/bagel.txt
AU  trunk/vendors/baker/croissant.txt
UU  trunk/vendors/baker/pretzel.txt
D   trunk/vendors/baker/baguette.txt

The way I figure it, if I see any character in the first two positions, then two spaces, then the word 'trunk' it should be blocked but findstr can either do it's horrible idea of regex, or match a string literal, and there is no escape sequence to match spaces in findstr. What I need is some real regex power. I tried GNU's grep but found that that either I am inept (which is likely) or that regex doesn't work like one would expect. I got to ^..\s\s[at][nr][tu] to match up to the 'tru' in trunk, but could not figure out how to match 'n' and honestly why [at] to match 't'? I give up on that, then I discovered a more powerful tool GNU's sed With this I was able to write a simple, easy to follow pattern that worked, and worked as I expected: ^..\s\strunk. I could now figure out when someone was attempting to commit to the trunk, and with the gotos in batch able to skip this check if it was me. The hook I ultimately came up with looks like this, with added comments to help out the other beginners out there:

@echo off  
::turns off output other than what you echo, ie, doesn't show any
::actual commands you have running
setlocal
::in my reading this is by default, but just in case, prevents 
::variables in this script and any scripts that call this script
::encapsulated from each other  
set REPOS=%1  
::the first argument svn sends to the hoot is the repo path, you
::reference arguments in the order they are received with the %#
::syntax
set TXN=%2
::the second is the transaction, if we were in post-commit this 
::would be the revision
svnlook author -t %TXN% %REPOS% | findstr michael > nul
::svnlook has a lot of subcommands author should just give me 
::the username of whos doing the commit. findstr works okay for 
::this basic task and the pipe (|) makes the svnlook output the 
::input for the findstr command
if %errorlevel% equ 0 (goto commentCheck)
::this is hacky, but the only way I could find to do thing. I 
::attempted to put any line matching 'michael' into the nul 
::handle, if there were no lines found an error code of 1 is 
::generated if it succeeds then no error code is thrown (0), and 
::I use the goto command to skip to check if there is a commit 
::message
svnlook changed -t %TXN% %REPOS% | sed -n /^..\s\strunk/p > temptest.txt
::I use my actual regex here with the sed command and since we
::can't have variables in batch like we are used to, cache the
::output in a file
for /f %%i in ("temptest.txt") do set size=%%~zi
::read in the size of that file (0 means no matches)
if %size% gtr 0 ( goto authErr ) else ( goto commentCheck )
::if trunk is found the file has a size, goto takes me to give a
::not authorized message, otherwise check the comment
exit 1
::sanity check that will block the commit if something wasn't 
::accounted for.
:commentCheck
:: this is a lable and what goto commands are looking for
svnlook log %REPOS% -t %TXN% | findstr ...... > nul  
if %errorlevel% gtr 0 (goto err) else exit 0 
::again findstr is good enough, just checking for 6 characters of
::message, if there are at least 6 then exit with no error (0) 
::which allows the commit
:err  
echo ---------------------------------------------- 1>&2   
echo Please add a log message to your commit.       1>&2  
echo ---------------------------------------------- 1>&2  
exit 1
::the basic message and exit code that will block the commit 
::displaying whats in the &2 handle
:authErr
echo ---------------------------------------------- 1>&2
echo not authorized to make commits to trunk.       1>&2
echo ---------------------------------------------- 1>&2  
exit 1
::same thing,m already discovered you didn't have access and 
::attempted to commit to the trunk, you get this message and your
::commit is blocked.

A quick note on the grep and sed install: even if you use their installer they will not put their bin path in the PATH environment variable, so the this script will fail unless you add it yourself. Just look up some instructions on how to modify PATH in your version of Windows, and add the path to the bin folder wherever you put it when you ran the grep and/or sed installer.

Tuesday, February 19, 2013

CFDocument ignoring some classes

My co-worker came across an interesting bug the other day. A class he was adding was being ignored by CFDocument. If he just output the content as HTML, there was no problem. It was only when inside CFDocument tags that the class would get ignored. We played around with it, a bit and discovered changing the order of the classes in the class attribute seemed to fix the problem. So with a workaround available we went on our merry way, but it was really bothering me and I couldn't let it go. I decided to make as simple of an example as possible and post a question on Stack Overflow but I took me awhile to even figure out how to duplicate the problem. In the process of duplicating the problem I stumbled upon exactly what the bug was.

The problem occurs when you have two class names applied to the same element, and the second class name matches the right end of the first class name case insensitively. Obviously some bad parsing happening inside the CFDocument engine.

Examples:

    <[element] class="firstClass class">Content</[element]>
    Or
    <[element] class="firstClass Class">Content</[element]>
    Or even
    <[element] class="firstClass stclass">Content</[element]>

Would produce the error, but:

    <[element] class="firstClass class2">Content</[element]>
    Or
    <[element] class="firstClass secondClass">Content</[element]>
    Or
    <[element] class="firstClass Classs">Content</[element]>

Would not. Since there is a workaround Adobe won't bother fixing this, nor would they bother publicizing this in any sort of documentation, just leave it up to their users to somehow know all the quirks of their application. I hope publishing this made your day easier.

A few things that are driving me away from ColdFusion are:

  • Adobe's disinterest in fixing long standing bugs, and if there is a work-around, even if it involves their users needing to stand on their head and type with their toes, then it might as well be labeled "Won't Fix Ever"
  • No documentation about what work-arounds exist for known issues, except on their bug report pages, which are a bitch to navigate in any useful way.
  • The constant movement of their documentation, including live doc pages and bug reports. It's so frustrating to find a forum with a link that says, "Here's the work around" with a link to a page at Adobe that no longer exists. Couldn't you at least leave us a re-direct Adobe?
  • This list could go on and on, but would mostly be re-hashes of the first point. Adobe, please fix broken things before adding more new features that less than 5% of your users care about.