My code turned out to be OK, the problem was solved by rebuilding mapnik from the github repository.
Lessons learned:
- the utfgrid should always look like an ascii art version of the rendered tile.
- if not, watch out for '\u0000' characters in the utfgrid - since the spec has provisions that avoid such characters, there is a high chance you have a buggy mapnik library installed.
- I should trust my code.
This is what the correct utfgrid looks like:
grid({
"keys" : ["477", "219", "40", "252", "50", "68", "414"],
"data" : {
"50" : { "NM_MUNICIP" : "Ava\u00ed", "ID" : 1776.0, "CD_GEOCODM" : "3504305" },
"40" : { "NM_MUNICIP" : "Arealva", "ID" : 1766.0, "CD_GEOCODM" : "3503406" },
"219" : { "NM_MUNICIP" : "Iacanga", "ID" : 1945.0, "CD_GEOCODM" : "3519105" },
"414" : { "NM_MUNICIP" : "Pederneiras", "ID" : 2140.0, "CD_GEOCODM" : "3536703" },
"68" : { "NM_MUNICIP" : "Bauru", "ID" : 1794.0, "CD_GEOCODM" : "3506003" },
"477" : { "NM_MUNICIP" : "Regin\u00f3polis", "ID" : 2203.0, "CD_GEOCODM" : "3542503" },
"252" : { "NM_MUNICIP" : "Itaju", "ID" : 1978.0, "CD_GEOCODM" : "3522000" } },
"grid" : [
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!#####$$",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!########$",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!############",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!###############",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!################",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!#################",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!#################",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!################$",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!!#################$",
" !!!!!!!!!!!!!!!!!!!!!!!!!!!#################$$",
" !!!!!!!!!!!!!!!!!!!!!!!!###################$$",
" !!!!!!!!!!!!!!!!!!!!!!!###################$$$",
" !!!!!!!!!!!!!!!!!!!!!!!###################$$$$",
" !!!!!!!!!!!##!!!!!!!!!!###################$$$$",
" !!!!!!!!!!!#####!!!!!!####################$$$$",
" !!!!!!####!########!!!!#####################$$$",
" !!!!################!!#########################",
" !!!!############################################",
" !!!!#############################################",
" !!##############################################",
" !!###############################################",
" ################################################",
"% ###############################################",
"%%%%% %% & ###############################################",
"%%%%%%%%%%%&&&&&&###############################################",
"%%%%%%%%%%&&&&&&&###############################################",
"%%%%%%%%%%&&&&&&&&##############################################",
"%%%%%%%%&&&&&&&&&&&#############################################",
"%%%%%%%%&&&&&&&&&&&&############################################",
"%%%%%%&&&&&&&&&&&&&&############################################",
"%%%%&&&&&&&&&&&&&&&&###########################################'",
"%%%&&&&&&&&&&&&&&&&&##########################################''",
"%%&&&&&&&&&&&&&&&&&&&#########################################''",
"%%&&&&&&&&&&&&&&&&&&&&&####################################'''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&#################################''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&##############################'''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&#############################''''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&&############################''''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&&###########################'''''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&&###########################'''''''''",
"%%&&&&&&&&&&&&&&&&&&&&&&&&&###########################''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&##########################'''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&##########################'''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&#########################''''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&&#######################'''''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&&&#####################''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&##################'''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&################''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&##############'''''''''''''''''",
"%&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&############''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&###########'''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&##########''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&#########'''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''####''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&'''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&'''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&'''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&''''''''''''''''''''''''''''''''",
"&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&'''''''''''''''''''''''''''''''"
]
});
Best Answer
there are some ways for drawing a grid on a map. i havent tried them before bacause i have never needed it.
1.you can check out matplotlib library for drawing grid on a map but it looks like a bit complex. it supports lots of projection.
you can find its doc here as Basemap Matplotlib Toolkit 1.0.3 documentation.
2.for qgis, you can try GridPluginLayer which overlays a user-definable grid on the map.. its source code here.
3.in arcgis, you can use MakeGridsAndGraticulesLayer_cartography function for creating grid. you can get some information here.
4.with javascript, you can check out this example on google-map. there is some information in source code...
another javascript binding on google-maps here with utm and i think it can help you so more from others...
Example Result:
i hope it helps you...