Go to previous pageGo to next page

1.3.4. Tiling & Caching

As already pointed in the introduction, most maps for LBS are basically special web mapping services for mobile devices. So also the techniques used and the problems to solve are comparable for both.

When talking about web mapping the Google Maps seem to be almost a synonym for many people. When Google Maps were launched the simplicity and the smoothness of the map display was impressive. But in fact the concept behind is just a simple combination of well known techniques.

Web Map Experience

The following example shows a very simple web mapping application. Just click on the image and navigate in the map by dragging the map with the mouse. There are three zoom levels.

web map exampleweb map example

This web mapping example uses the same techniques than the map display in Google Maps. The technique behind is called Ajax and this stands for Asynchronous JavaScript and XML. If you want to know more about Ajax have a look at the web page http://ajaxian.com/ or at the book "Pragmatic Ajax" (Gehtland et al. 2006).

Basically in Ajax the web page which is displayed in a browser is modified in the browser with JavaScript instead from reloading the whole page from the server when content has changed. Only the new parts on the page have to be downloaded newly. In order to make the navigating (panning) in a map smooth tiling and tile caching are used.

Tiling

Going back to the web map example above: by clicking on the "show tiles" button int the lower left corner you can see that the displayed map image is split up in many small tiles. The original map has a size of 3600x2800 pixels. This is only a small map for demonstration. In a real system the source map could be much larger. A map covering a large city, a whole country or even the whole world would probably not fit onto a normal computer and never on a mobile device because of it's file size. Also the panning would be quite slow because of the file size.

city map overview (original size 3600x2800 pixels)city map overview (original size 3600x2800 pixels) city map tiles (original tilesize 100x100 pixels)city map tiles (original tilesize 100x100 pixels)

The original map is split into various tiles (usually quadratic). These tiles are laid out contiguously to form a cohesive image. In the example each tile has the size 100x100 pixels. So the image shown in the browser consists of a couple of tiles. Depending on the visible area of the map the tiles covering this area are displayed. So the remaining tiles covering the rest of the map don`t even have to be in the memory of the device but can be requested when needed due to panning. In the following image some tiles from the city map above are shown in their original size.

city map tiles detailcity map tiles detail

Prefetching and Caching of Tiles

All the tiles of the map are stored on the map server which provides the mapping service. Only the few tiles which are currently displayed need to be in the memory of the browser or LBS device. In order to enhance the panning speed and make it smoother some surrounding tiles can be downloaded in advance so that they are already in the memory when needed. Thus the prefetched tiles are stored in the termcache.

tile cachingtile caching

Depending on the size of the visible area and the tilesize, the cached area can have different sizes. As users usually pan the map only by one third of the visibly size at once these tiles are prefetched and kept in the cache (see figure above).



Go to previous page
Go to next page