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
The x and y parameters to that function are tile coordinates, where the x and y values represent the number of tiles from the top-left corner of the map in each direction. In Google's numbering system, the tile coordinates start at
(0, 0)
for the top-left tile.var ll = [x * this.size, (y + 1) * this.size];
The line above that you've highlighted is calculating the pixel coordinates for the lower-left corner of the tile. For example, if the tile coordinates (x and y parameters to the function) are
(2,3)
, and tile size is 256, the lower left corner of that tile would be at(2 * 256, (3 + 1) * 256) = (512, 1024)
.I found this maptiler.org page on Google maps coordinates particularly helpful to visualise the system. Below is a screenshot from that page, showing the tile system at zoom level 1.