Tiled web map

An exaggeration of a tiled web map, in this case the default OpenStreetMap style near Melbourne, Australia. Tiled web maps are normally displayed with no gap between tiles.

A tiled web map, slippy map^[1] (in OpenStreetMap terminology) or raster tile map is a map displayed in a browser by seamlessly joining dozens of individually requested image files over the internet. It is currently the most popular way to display and navigate maps, replacing other methods such as WMS which typically display a single large image, with arrow buttons to navigate to nearby areas. Google Maps was one of the first major mapping sites to use this technique. Tiled web maps may in turn be replaced by vector tiles as the standard.

There are several major advantages to tiled maps. Each time the user pans, most of the tiles are still relevant, and can be kept displayed, while new tiles are fetched. This greatly improves the user experience, compared to fetching a single map image for the whole viewport. It also allows individual tiles to be pre-computed, a task easy to parallelise. Also, displaying rendered images served from a web server is much less computationally demanding than rendering images in the browser, a benefit over technologies such as WFS.

Defining a tiled web map

Properties of tiled web maps that require convention or standards include the size of tiles, the numbering of zoom levels, the projection to use, the way individual tiles are numbered or otherwise identified, and the method for requesting them.

Most tiled web maps follow certain Google Maps conventions:

• Tiles are 256x256 pixels
• At the outer most zoom level, 0, the entire world can be rendered in a single map tile.
• Each zoom level doubles in both dimensions, so a single tile is replaced by 4 tiles when zooming in. This means that about 22 zoom levels are sufficient for most practical purposes.
• The Web Mercator projection is used, with latitude limits of around 85 degrees.

The de facto OpenStreetMap standard, known as Slippy Map Tilenames^[2] or XYZ,^[3] follows these and adds more:

• An X and Y numbering scheme
• PNG images for tiles
• Images are served through a REST API, with a URL like http://.../Z/X/Y.png, where Z is the zoom level, and X and Y identify the tile.

Tile numbering schemes

There are three main numbering schemes in use:^[4]

• Google Maps / OpenStreetMap: (0 to 2^zoom-1, 0 to 2^zoom-1) for the range (-180, +85.0511) - (+180, -85.0511)
• Tile Map Service: (0 to 2^zoom-1, 2^zoom-1 to 0) for the range (-180, +85.0511) - (+180, -85.0511). (That is, the same as the previous with the Y value flipped.)
• QuadTrees, used by Microsoft.

Standards

Several standards exist:

• Tile Map Service: an early standard supported by OpenLayers. One difference is the y axis is positive southwards in TMS, and northwards in OpenStreetMap.
• Web Map Tile Service: a more recent OGC standard.
• The de facto XYZ standard referred to above.
• TileJSON: a lightweight JSON description of all the parameters associated with a web map, created by Mapbox.
• Bing Maps Tile System,^[5] using Quadkeys for addressing.

Client libraries

To display a tiled map in a browser usually requires the support of a web mapping framework. This framework handles the retrieval of tiles, display, caching, and user navigation. Popular frameworks for tiled maps include Google Maps API, OpenLayers and Leaflet.

References

1. "OpenStreetMap wiki".
2. "Slippy map tilenames - OpenStreetMap Wiki". wiki.openstreetmap.org. Retrieved 2015-06-10.
3. "tmcw/xyz_vs_tms.md". GitHub Gists. Retrieved 2015-06-10.
4. "Tiles à la Google Maps: Coordinates, Tile Bounds and Projection - conversion to EPSG:900913 (EPSG:3785) and EPSG:4326 (WGS84)". www.maptiler.org. Retrieved 2015-10-15.
5. "Bing Maps Tile System". msdn.microsoft.com. Retrieved 2015-06-10.

External links

• "How do Web Maps Work?". Mapbox.