CanvasMap
Getting Started Tutorials 3D Reference

Tiling Design

(Under Construction )

Overview

There is a basic problem in GIS that for spatial data sets of any size, we cannot transfer them from the server to the client and render them at a desired zoom level and extent with the speed required by users. This is particularly a problem with large raster data sets. The solution is to down sample the image into a series of "steps" where each step is 1/2 the resolution (and thus 1/4 the size in bytes) of the previous steps. If we do this repeatedly, we will eventually have a step that is less than 256x256 pixels which is very manageble. If we lay these steps one on top of the other, you can image a pyramid of steps where the bottom is the original and much larger step and the top is less than 256x256 pixels. The next step in the process is to take each of the steps that is greater than 256x256 and break it into "tiles" in a rectangular grid. This approach was first used on the web by "TopoZone" and then made popular by GoogleMaps.

There are now a variety of web services available for tiles. CanvasMap supports the OpenStreetMapFormat for tiles and has its own tiling scheme as well. CanvasMap's tiling is performed by BlueSpray and is also used by BlueSpray to create layers with pyramids.

The tiling for CanvasMap is realatively sophistitated and supports points, polylines, polygons, rasters, and grids of values. The rasters are traditional PNG or JPG tiles while the grids of values are grids of floating point values typically used as elevation points for displaying 3D terrain information.

One issue with pyramids is that they can have a huge number of tiles. Imaging tiling the entire Earth from a low-resolution to 1 meter. Take the width and height of the Earth in degrees and then mulitple each by 110,000 to convert it to meters (this is assuming geogrpahic projection) and then dividing each by 256 for the numbers of pixels in the 1meter per pixel step and then multiplying the two numbers together. The result is the total number of tiles or about 11 billion tiles! BlueSpray avoids this problem by including all the tiles that are required at the top steps and then only including tiles below each step if they contain something interesting. The basic organization is to have a grid of tiles for the top step. Then each tile can have from 0 to 4 child tiles. Tiles are always loaded from the top down and only loaded as needed baesd on the viewing area and the selected zoom level.

Zoom Levels

In BlueSpray, ZoomLevel=1 indicates the resolution of the tile is exactly the same as 1 unit in the map reference units. In other words, if the ZoomLevel is 1 and the data is in UTM, then each pixel will be 1 meter in width. If the units are degrees, then ZoomLevel=1 indicates the pixels are 1 degree in width (i.e. about 110km). As the user zooms out (i.e. the pixels cover a larger area or become lower in resolution) the zoom level decreases.

Tiling Folders

Tiles are stored in a single folder. The top folder contains an "Info.js" file and a series of other folders, one for each step in the pryamid. The folders are labeled "Tile_<step number>".

Within each step folder, is a series of folders, one for each row in the step. The row folders are just named with their row number. Within the row folders, are tiles numbered by their column. This is very similar to the approach used by the OpenStreetMapFormat.

Info.js

The Info.js file contains the following information:

Tile Files

For each tile, there is a "<column index>.js" file. This contains a JSON object with the following: