visible map

How does the mbtiles spec and UTFGrid really work? Play with the map below and learn.

1. Downloading Tiles

Modest Maps does the work of requesting lots of tile images from TileStream.

2. Downloading Grid Data

Wax takes care of downloading files of JSON-formatted data from TileStream. This happens the first time that you hover over each tile.

3. Finding Pixels

Finding pixels isn't too tough - Wax just finds the top-left corner of the the tile and then the mouse coordinates.


4. Decoding Keys

Decoding keys takes some simple math.

That'll be enough to pluck out some data from the grid.

5. Formatting Data

So we have data from that key:


But that doesn't look cool. So, it gets run through a formatter function. In this case, that function looks like:

function (options, data) {
    switch (options.format) {
    case 'full':
        return '';
    case 'location':
        return '';
    case 'teaser':
        return '<img src=\"data:image/png;base64,' + data.flagpng + '\" style=\"box-shadow:0px 1px 5px #333;-moz-box-shadow:0px 1px 5px #333;-webkit-box-shadow:0px 1px 5px #333;\" /><br /> <strong>' + data.ADMIN + '</strong>';

Which finally yields the beautiful HTML: