Tiled web map explained

A tiled web map, slippy map[1] (in OpenStreetMap terminology) or tile map is a map displayed in a web browser by seamlessly joining dozens of individually requested image or vector data files. It is the most popular way to display and navigate maps, replacing other methods such as Web Map Service (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. The first tiled web maps used raster tiles, before the emergence of vector tiles.

There are several 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 parallelize. Also, displaying rendered images served from a web server is less computationally demanding than rendering images in the browser, a benefit over technologies such as Web Feature Service (WFS). While many map tiles are in raster format (a bitmap file such as PNG or JPEG), the number of suppliers of vector tiles is growing. Vector tiles are rendered by the client browser, which can thus add a custom style to the map. Vector map tiles may also be rotated separately from any text overlay so that the text remains readable.

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:

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

Tile numbering schemes

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

Standards

Several standards exist:

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.

External links

Notes and References

  1. Web site: OpenStreetMap wiki.
  2. Web site: Slippy map tilenames - OpenStreetMap Wiki. wiki.openstreetmap.org. 2015-06-10.
  3. Web site: tmcw/xyz_vs_tms.md. GitHub Gists. 2015-06-10.
  4. Web site: Tiles à la Google Maps: Coordinates, Tile Bounds and Projection - conversion to EPSG:900913 (EPSG:3785) and EPSG:4326 (WGS84). www.maptiler.com. 2022-03-01.
  5. Web site: An Open Platform: TileJSON. mapbox.com. 2017-01-05.
  6. Web site: Bing Maps Tile System. msdn.microsoft.com. 2015-06-10.